Technologie · Fontdarstellung

Content

Fonts auf Websites
Darstellung von Fonts
Darstellung ohne Graustufen
Hinting
TrueType vs. PostScript
Darstellung mit Graustufen
Darstellung mit Subpixel-Rendering
Farbige Fonts
Weiterführende Informationen

Fonts auf Websites

Geschichte

Browser mit Webfont-Unterstüzung

Chrome 4.0+
Internet Explorer 4+
Firefox 3.5+
Safari 3.1+
Opera 10+

Seit Computer eine Darstellung an einem Bildschirm aufweisen, wurde immer wieder nach technischen und gestalterischen Möglichkeiten gesucht, Schriften möglichst den Wünschen des Gestalters entsprechend dar zu stellen. Als das World Wide Web 1993 durch das CERN frei gegeben wird, war die Formatierung noch nicht durch einen Gestalter zu beeinflussen. Lediglich der Browser bestimmte das aussehen. Mit der Einführung von CSS im Jahre 1996 wurde dann die Möglichkeit geschaffen, Schriften einem Inhalt zu zuweisen. Allerdings musste der entsprechende Font bereits auf dem Zielgerät installiert sein. Bereits 1997 ermöglichte Microsoft mit damaliger Technologie in Ihrem Browser das Laden von Fonts über das Internet. Somit wurde es möglich, eigene Schriften einzusetzen. Doch diese Technologie war nur auf Internet Explorer (Windows) verfügbar und auch von den Font-Anbietern sehr schlecht akzeptiert. Erst im Jahre 2009 wurde auf Grundlage von OpenType ein neues Format namens «WOFF» (Web Open Font Format) entwickelt. Dieses Format wurde sehr schnell von Browser-Herstellern und von Font-Anbietern akzeptiert, so dass heute Problemlos auf allen wichtigen Browsern der vom Gestalter gewünschte Font dynamisch in die Seite geladen werden kann.

Web Safe Fonts (Systemfonts)

Unter Systemfonts wird häufig eine Auswahl an Schriften verstanden, die zu einer sehr hohen Wahrscheinlichkeit auf dem Betriebssystem installiert sind, auf dem ein Browser eine Website darstellt. Somit ist der Browser in der Lage diesen Font zu verwenden und es muss kein zusätzlicher Font übertragen werden. Die Auswahl dieser Fonts ist sehr beschränkt und variiert stark von Betriebssystem zu Betriebssystem. Um dennoch die Gestaltung mehr oder weniger unter Kontrolle zu behalten, werden in einem CSS sogenannte Fallbacks angegeben. Das heisst, wenn eine Schrift nicht vorhanden ist, so kommt eine andere zum Einsatz.

Beispiel

CSS-Definition mit Font-Fallbacks:

p {
  font-family: Arial, Helvetica, sans-serif;
}

Es wird versucht zuerst Arial einzusetzen. Wenn keine Arial vorhanden ist, soll Helvetica zum Einsatz kommen und sonst eine beliebige Serifenlose.

Verbreitung und Vorteile von Webfonts

Meist kommt bei Webfonts das WOFF (Web Open Font Format) zum Einsatz. Seit 2014 sind auch die besser komprimierten WOFF 2.0 Dateien im Gebrauch, die heute von allen modernen Browsern unterstützt werden. Auch ältere Browser können mit älteren Font-Formaten (EOT) Schriften einbinden. Verfügt man über eine Lizenz eines Webfonts, so kann diese Schrift dynamisch zur Seite hinzugeladen werden. Der Gestalter weiss somit, wie seine Seite aussehen wird und kann die Typografie vollständig kontrollieren.

Darstellung von Fonts

Vektor zu Pixel

Heutige Fonts bestehen meist aus Vektor-Daten, die dann für die Anzeige an einem Ausgabegerät in eine Pixel-Matrix umgesetzt werden müssen. Diese Umrechnung von Vektoren zu Pixel kann auf verschiedene Arten geschehen. Die dafür zuständige Software wird Renderer genannt und ist je nach Hersteller unterschiedlich und liefert für die selben Vektoren unterschiedliche Ergebnisse.

Buchstabe a als Outline

Font als Outline

Microsoft Arial Unicode

Buchstabe a als Pixel ohne Hinting

12 Pixel Höhe (PPM) – S/W

Gerendert werden alle Pixel die zu mindestens 50% innerhalb der Kontur liegen (ohne Hinting).

Auflösung

Je höher die Auflösung eines Buchstaben ist, um so klarer nähert sich die Pixel-Darstellung an die Vektorform an. Eine höhere Auflösung pro Buchstabe kann erreicht werden, indem die Grösse des Buchstabens oder die Auflösung des Ausgabegeräts erhöht wird.

Arial as in s/w gerendert

MS-Renderer – S/W 8 bis 48 Pixel Höhe (PPM)

Microsoft Arial Unicode (mit Hinting)

Darstellung ohne Graustufen

Textworte in Arial als s/w in 8–18px mit Microsoft Renderer

8 bis 18 Pixel Höhe (PPM)

MS-Renderer – S/W
Microsoft Arial Unicode

Bei kleinen Schriften oder aber bei gewissen Display-Technologien kann es sinnvoll sein, Schrift nur mit S/W darzustellen.

Textwort in Arial als s/w in 8px mit Microsoft Renderer

8 Pixel Höhe (PPM)

Microsoft Arial Unicode – MS-Renderer – S/W

Textwort in Arial als s/w in 24px mit Microsoft Renderer

24 Pixel Höhe (PPM)

Microsoft Arial Unicode – MS-Renderer – S/W

Unterschiede im Rendering

Bei der S/W-Darstellung von Schrift sind die Unterschiede zwischen verschiedenen Renderern viel weniger stark erkennbar als bei einer Darstellung mit Graustufen.

a in Arial als s/w in 13px mit FreeType Renderer – 2014

FreeType-Renderer – S/W

13 Pixel Höhe (PPM) – Microsoft Arial Unicode

a in Arial als s/w in 13px mit Microsoft Renderer – 2014

MS-Renderer – S/W

13 Pixel Höhe (PPM) – Microsoft Arial Unicode

a in Arial als s/w in 13px mit Apple Renderer – 2014

Apple-Renderer – S/W

13 Pixel Höhe (PPM) – Microsoft Arial Unicode

Hinting

Über spezielle Instruktionen wird die Kontur einer Schrift so verformt, dass die Darstellung besser auf ein Pixel-Grid passt. Danach wird diese neue Kontur vom Renderer gerastert. Die Verformung ist auch so optimiert, dass zum Beispiel die x-Höhe über einen ganzen Font hinweg in allen Zeichen gleich hoch erscheint.