Font Rendering

FONT RENDERING:

• Web-Font-Revolution muss mehr beachtet werden für das Verstehen der Technologie hinter Webschriftarten

• Unterschiedliche Browser und Betriebssysteme zeigen Schriften unterschiedlich an. Das Verstehen, warum Schriften wie dargestellt werden hilft dabei, Webseiten zu schaffen, die erfolgreich sind und in allen Varianten bequem zu lesen sind. (Statt den Versuch zu starten, die Nutzung von Browser und OS zu bestimmen, sollte das Augenmerk darauf gelegt werden, wie die Differenzen ausgeglichen werden können)

• Bisher gab es nur eine handvoll brauchbarer Webschriftarten, die allgemeine Gültigkeit haben.

• Heute gibt es eine riesige Auswahl an Schriften, aber nicht jedes Betriebssystem unterstützt diese. Verschiedene OS-Hersteller verfolgen unterschiedliche Strategien, um Fonts zu Rendern, also um ihre Darstellung zu berechnen.

• Betrachtet man entsprechend, wie die Schriften auf dem Bildschirm aussehen, stellt man fest, dass die Zeichen stellenweise starke Unterschiede von System zu System aufweisen.

--> Auch sehr gut designte Schriftarten können nicht gut auf z.B. Windows aussehen, wenn eine entscheidende Sachen fehlt: Das Hinting.

• Es ist also wichtig, zu wissen, worauf man bei der Auswahl von Schriften achten muss, um eine hohe Typo-Qualität dauerhaft zu erhalten.

RENDERING-ARTEN

Rasterung

• Die Buchstaben werden als abstrakte Zeichnungen - meist mit sehr genauen, feinen Rändern - designt.
• Wir der Text auf dem Bildschirm angezeigt, muss die präzise, ideale Form in einem mehr oder minder groben Raster von Pixeln dargestellt werden
• Während der Gebrauch von der bloßen Vorschau am Monitor sich zur Druckausgabe in das eigentliche Medium, das wir lesen, wandelte, wurden immer mehr und mehr anspruchsvollere Wiedergabeverfahren (rendering methods) entwickelt, die auch das Lesen am Monitor angenehmer machen.

Schwarz-Weiß-Wiedergabe (Black-White-Rendering)

• Die erste Methode, um Buchstabenformenauszudrücken, beruhte auf rein weißen und schwarzen Pixeln (auch "Bi-Level Rendering")
• Im Druck gibt es durch die hohe Druckauflösung ein sehr gutes Ergebnis, auf dem Monitor macht uns die eher geringe Anzahl an verfügbaren Pixeln zu schaffen und die genaue Form kann nicht gut wiedergegeben werden. Auch wenn wir die einzelnen Pixel nicht sehen können, erfassen wir die Pixeltreppen statt einer Rundung doch.

Graustufen Wiedergabe (Grayscale-Rendering / Anti-Aliasing)

• Idee: Verbesserung der runden Darstellung durch bessere Kontrolle der Helligkeit eines Pixels.
• Ein Pixel, der auf dem Rand der Buchstabenform liegt, wird grau. Je mehr des Pixels noch in den Buchstaben bzw. die Form integriert ist, desto dunkler wird er.
• Das Ergebnis ist eine weichere Kontur, durch die unschöne Pixeltreppen weniger auffallen.
• Das Prinzip ist das gleiche wie bei der harnkomprimierung von Fotos auf eine niedriegere Auflösung: Unser Auge wandelt die Graustufen in einen Teil der Form um, sodass wir einen Buchstaben sehen, der an sein Form-Vorbild sehr nah herankommt.

Subpixel Rendering

• Die dritte Generation der Wiedergabe-Technologie
• Charakterisiert durch scheinbar farbige Pixel (Nimmt man einen Screenshot und vergrößert diesen, sieht man blaue, grüne und rote Pixel)
• Die Farbigen Pixel sind Subpixel, die Farbe und Helligkeit der Pixel neben ihnen controllieren.
• Sie sind so klein, dass wir sie als einzelne farbige Punkte gar nicht wahrnehmen.
• Alle Subpixel werden individuell dazugeschaltet; Ist der rechte Subpixel eines Weißraums z.b. rot, erscheint er als Vollpixel technisch auch rot.
• Die Vorteile dieser Technik werden deutlich, wenn man die Subpixel entsättigt. Verglichen mit dem einfachen Grayscale-Rendering hat sich die Auflösung horizontal verdreifacht. Position und Gewicht vertikaler Stämme können noch genauer reflektiert werden und der Text erscheint klarer.

DERZEITIGE AUSFÜHRUNGEN

• Da sich fast alle Browser auf das System Beziehen, auf dem sie aufgerufen werden, muss das Augenmerk bezüglich Webfont-Rendering auf das Betriebssystem gelenkt werden.
• Trotzdem gibt es auch Unterschiede unter den Browsern was die Unterstützung von Kerning und Ligaturen, genauso auch die Anwendung von Unterstreichungen und Fetten Schriftschnitten angeht.

--> Allein deswegen kann mannichtmal für ein Betriebssystem alle Browser auf den exakt gleichen Darstellungsstand bringen.

Ein Beispiel, welche Wiedergabeverfahren für Browsers unter Windows verwendet werden:

Browser: PS-Webfonts - TT-Webfonts

IE 6-8 (XP): not supported - GDI grayscale

IE 6-8: not supported - GDI grayscale

IE 9: Direct Write - Direct Write

FF 4+: GDI grayscale - GDI grayscale

FF 4+: Direct Write - Direct Write

(Direkt Writer activated by User)

Chrome: GDI grayscale - GDI grayscale

Opera: GDI grayscale - GDI grayscale

Windows:

• Font-Format hat maßgeblichen Einfluss auf die Wiedergabe
• Der entscheidende Unterschied liegt zwischen PostScript-Schriftarten und TrueTypeFonts, nicht auf welche Weise sie in den Browser integriert werden

--> Solange die grundlegende Schriftart die selbe ist, sehen wir ein identisches Rendering

• Das Dateiformat der Schriftarten gibt Hinweise, welche grundlegende Technik benutzt wird (EOT & .ttf enthalten immer TrueTypes, während .otf typischer Weise PostScript-basiert ist. WOFF kann beides enthalten)
• Unterschied im Hinting: PS enthalten nur wage Informationen über die Position verschiedener Teile eines Buchstabens und benötigen eine intelligente RenderingSoftware, um sie auszulesen. TTF dagegen beinhalten sehr spezifische, einfache Einstellungen, die den Wiedergabe Prozess direkt kontrollieren.

---> Neue Rendering-Software von Windows, ClearType, unterstützt nur TrueTypeFonts und rendert diese mit einem Hybrid aus SubpixelRendering und Schwarz-Weiß-Rendering

---> Das Ergebnis sind Treppen in der Kontur, die vorallem bei sehr großen Schriftgrößen sichtbar sind. Diese sind zwar unschön, aber nicht zu vermeiden, selbst mit dem besten Hinting.

• ClearType ist entsprechend eher ein Schritt zurück bei großen Schriften; Der Gewinn in der horizontalen Präzision im gering gegenüber den rauen Konturen, die das Gesamtbild stören.

• Aber: Windows hat eine lösung. Mit DirectWrite gab es die Ergänzung zur Weichzeichnung in der Vertikalen für ClearType.
• DirectWrite gibt eine Verbesserung der Gleichmäßigkeit von Texten, da es die Positionierung von Subpixeln erlaubt, die den Buchstaben einen entsprechenden Abstand geben, ganz, wie sie programmiert und angelegt wurden.
• Auch im PS-Font-Rendering gibt DirectWrite weichere Konturen und lässt Subpixel-Rendering zu. Es sorgt für mehr Graupixel, um Strichstärken besser zu reflektieren.

---> Sehr ausbalanciert und sehr ähnlich zu Mac OS rendering

• in GDI-basierten Browsern werden PS-Web-Fonts mit GrayscaleRendering angezeigt

----> Anders als GDI-ClearType gibt es hier weiche Konturen

----> Anders als TrueType-Hints, ist PS-Hinting deutlich leichter zu erstellen, auch automatisch.

Unhinted Fonts in Windows:

• Schriften im alten graustufen-Modus von Windows sahen erstaunlich gut aus.
• Solange sie nicht via Hinting mit vollen Pixeln gefüllt werden und der rasterizer das wieder entkräftet, ist dieses alte System gleich dem von iOS, doch heute sind unhintet Fonts keine Option mehr.

---> GDI-ClearType ist auf ein gutes Hinting angewiesen, eine Unhintet Font mit GDI zu rastern verschlechtert die Qualität. (Horizontale Striche werden extrem dich angezeigt; "Warzen"/"Warts" werden dort sichtbar, wo Konturen nicht ordentlich an das Pixelraster ausgerichtet sind)

---> In DirectWrite gibt es genau die selben Probleme, wegen des fehlenden Hintings können die Striche nicht exakt angepasst werden.

Mac OS X

• Alle Browser nutzen die QuartzRendering Software, die sehr verlässlich ist, da sie nicht versucht intelligent zu sein
• Da das Hinting ignoriert wird, rendert die Software alle Schriftarten - ob PS oder TT - genau gleich.
• Das angewandte Subpixel-Rendering ist sehr robust und ausgewogen; Der Rasterizer versucht nicht zu verstehen, wie dick oder dünn striche sind und was eine Schrift ausmacht, sondern betrachtet nur, was durch dunklere und hellere Pixel dargestellt wird.
• Da die Buchstabenform nicht interpretiert wird, kann sie auch nicht falsch interpretiert werden.

---> Führt stellenweise zu Problemen, gerade weil einiges nicht intelligent controlliert wird:

• Bei manchen Schriftgrößen kann es passieren, dass Horizontale eine Graureihe haben, weil die theoretische Höhe keinen ganzen Pixel darstellt. Eine minimale Änderung der Schriftgröße behebt das Problem jedoch.
• Schriften neigen dazu, zu stark gerendert zu werden, was sie sehr massiv macht. Sichtbar wird das, wenn man die gleiche Schriftart in Windows anzeigt und dort vergleicht. (Oft ist das nur in gewissen Schriftgrößen extrem)

iOS

• selbes Prinzip wie Mac OS, nur kein Gebrauch von Subpixel-Rendering (die macher wollten den CPU-Gebrauch einschränken. Beim Subpixel-Renderiung muss das System das Renderiung über"denken", da Subpixel physisch auf eine spezielle Weise angebracht werden)

===> Mac: Keine Kontrolle über das Rendering, was akzeptabel ist, da das System generell verlässlich ist. Der einzige Schwachpunkt ist, dass Schriften generell zu massiv dargestellt werden.

===> Windows: Hinting-Angelegenheit, speziell bei TT-basierten WebFonts. Als Kontrolle gibt es die Wahl zwischen PS- und TT-basierten Schriften. Wichtig ist vorallem, dass sie vernünftigt gehintet werden.

Quelle: http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

(auf der Seite gibt es auch Bilder zu den einzelnen Rendering-Arten und Ansichten)