Wie man Text perfekt rendert
Die Auswahl einer schönen Schrift ist nutzlos, wenn sie auf Ihrem Bildschirm hässlich aussieht. Um abscheulichen oder schlimmer noch unleserlichen Text zu vermeiden, sollten Sie immer testen, ob die Schriftart auf den Geräten, die Ihre Besucher verwenden, gut funktioniert. Sie könnten überrascht sein; Die meisten Ihrer Besucher verwenden wahrscheinlich nicht dasselbe Gerät, mit dem Sie entwerfen und entwickeln. Tatsächlich verwendet die überwiegende Mehrheit der Menschen, die im Internet surfen, Android- und Windows-Computer.
Der beste Weg, um das Verhalten einer Schriftart zu testen, besteht darin, einen Beispieltext in der Schriftart festzulegen und ihn auf allen Geräten auszuprobieren, auf die Sie abzielen. Schlechtes Rendern macht sich besonders bei dünnen Gewichten bemerkbar.
Beispielsweise kann eine Schriftart, die unter macOS gut gerendert wird, unter Windows fragil erscheinen (siehe Abbildung unten). Es ist wichtig, reale Geräte zu verwenden, da Online-Tools zum Testen von Browsern und virtuelle Maschinen häufig ungenau sind (dazu später mehr).
Wenn Sie den Inhalt Ihrer Website noch nicht haben (tsk!), Geben Sie den von Tim Brown Web-Schriftmuster eine Drehung. Der Inhalt wird auf verschiedene Textgrößen und mit unterschiedlichen Hintergrundfarben festgelegt. Es ist kein Ersatz für echten Inhalt, aber zur Not.
Manchmal hat man Glück und die von Ihnen gewählte Schriftart ist explizit für Bildschirme konzipiert: ScreenSmart von Hoefler & Co, eText von Monotype und Reading Edge von Font Bureau sind Beispiele für Sammlungen, die speziell für Bildschirme entwickelt wurden und überall schön aussehen sollten. Natürlich lohnt es sich, die Textwiedergabe unabhängig von der Herkunft der Schriftart zu überprüfen.
Aber warum sieht Text von Browser zu Browser anders aus? Um diese Frage zu beantworten, müssen wir einen kurzen Abstecher in die Details der Textwiedergabe machen.
Rasterisieren und Antialiasing
Der Prozess der Umwandlung von Schriftkonturen in Pixel wird als Rasterisierung bezeichnet. Die Text-Rendering-Engine des Betriebssystems platziert den Umriss (dh die Form) jedes Zeichens in der gewünschten Schriftgröße in einem Pixelraster. Als nächstes werden alle Pixel gefärbt, deren Mitte innerhalb des Umrisses liegt (siehe Abbildung unten).
In diesem Beispiel ist ein Pixel entweder ein- oder ausgeschaltet, unabhängig davon, wie viel Umriss im Pixel vorhanden ist. Diese Annäherung an mathematisch perfekte Umrisse wird als Aliasing bezeichnet. Antialiasing versucht, die groben treppenartigen Erscheinungen zu mildern, die durch die begrenzte Auflösung der Bildschirme verursacht werden.
Die Idee hinter Antialiasing besteht darin, herauszufinden, wie viel der Kontur in jedem Pixel vorhanden ist, und dies mit einem Graustufenwert darzustellen. Mit anderen Worten, wenn der Umriss 50 Prozent eines Pixels bedeckt, werden 50 Prozent Schwarz verwendet, um dieses Pixel zu färben. Wenn sich das Pixel vollständig innerhalb des Umrisses befindet, wird 100 Prozent Schwarz verwendet und so weiter. Dies führt zu einem Antialiasing-Rendering, das das Aliasing reduziert (siehe Abbildung unten). Der Begriff 'Graustufen-Antialiasing' wird häufig verwendet, um diesen Effekt zu beschreiben.
Während Antialiasing die Qualität der Textwiedergabe verbessert, ist es möglich, das Ergebnis mithilfe von Subpixel-Antialiasing weiter zu verbessern. Subpixel-Antialiasing nutzt die Eigenschaften von Bildschirmen, um die Auflösung von gerastertem Text zu erhöhen. Jedes Pixel in einer Anzeige besteht aus drei länglichen Subpixeln: Rot, Grün und Blau (andere Konfigurationen existieren, es gelten jedoch dieselben Prinzipien). Das Betriebssystem kann diese Subpixel einzeln steuern. Subpixel-Antialiasing nutzt dies aus, indem die Abdeckungsberechnung auf jedes Subpixel angewendet wird (siehe Abbildung unten).
Der Unterschied zwischen diesen Textwiedergabeoptionen wird deutlich, wenn Sie mit kleineren Textgrößen arbeiten. Ohne Antialiasing verlieren Charaktere schnell ihre markanten Umrisse. Graustufen-Antialiasing lässt die Zeichen verschwimmen, behält aber ihre Form bei. Subpixel-Antialiasing rendert scharfe Zeichen, führt aber auch Farbsäume an den Kanten des Zeichens ein.
Antialiasing-Tipps
Sie können die Antialiasing-Einstellungen über den Nicht-Standard ändern -webkit-font-Glättung und -moz-osx-font-Glättung CSS-Eigenschaften. Leider verwenden viele CSS-Frameworks und -Bibliotheken die antialiased und Graustufen Werte, damit der Text unter macOS heller erscheint. Die meisten Entwickler und Designer wissen jedoch nicht, dass dies das Subpixel-Antialiasing deaktiviert und den Text unschärfer erscheinen lässt, wodurch die Lesbarkeit beeinträchtigt wird.
Es ist sehr rücksichtslos, die bevorzugte Textwiedergabe einer anderen Person so zu ändern, dass sie weniger lesbar ist. Wenn Sie helleren Text benötigen, verwenden Sie ein geringeres Gewicht, anstatt das Subpixel-Rendering zu deaktivieren.
Text-Rendering-Engines
Die meisten Betriebssysteme verwenden ihre eigene proprietäre Text-Rendering-Engine, während andere dieselbe Open-Source-Engine verwenden (allerdings nicht unbedingt mit derselben Konfiguration). Alle unterstützen jedoch Antialiasing und Subpixel-Antialiasing, unterscheiden sich jedoch geringfügig in ihrer Implementierung. In vielen Betriebssystemen kann der Benutzer die Antialiasing-Methode auswählen. Unter Windows wird Subpixel-Antialiasing beispielsweise als ClearType bezeichnet. Unter macOS heißt es LCD Font Smoothing.
Derzeit gibt es vier wichtige Text-Rendering-Engines: das Graphics Device Interface (auch als GDI bekannt) und DirectWrite unter Windows; Kerngrafiken unter MacOS und iOS; und der Open-Source-FreeType unter Linux, Chrome OS und Android.
Im Allgemeinen verwendet ein Browser die Text-Rendering-Engine, die für das Betriebssystem, auf dem er ausgeführt wird, typisch ist. Chrome verwendet beispielsweise DirectWrite unter Windows, Core Graphics unter macOS und FreeType unter Android. Windows ist insofern einzigartig, als es zwei Text-Rendering-Engines bietet: GDI und das neuere DirectWrite.
Alle modernen Browser verwenden DirectWrite, sodass Sie sich bis auf eine Ausnahme keine Gedanken über GDI machen müssen: Einige Browser greifen auf das minderwertige GDI-Rendering zurück, wenn der Computer keine dedizierte Grafikhardware hat. Online-Browsertest-Tools und virtuelle Maschinen verfügen häufig nicht über dedizierte Grafikhardware, sodass das Rendern von Text auf diesen Tools nicht korrekt ist.
Im Idealfall wird der gesamte Text mithilfe von Subpixel-Antialiasing gerendert, da der am besten lesbare Text erstellt wird. Leider ist dies nicht immer möglich. Beispielsweise ist das Subpixel-Antialiasing auf drehbaren Geräten wie Tablets und Telefonen häufig deaktiviert. Wenn Sie den Bildschirm dieser Geräte drehen, sind die Subpixel nicht mehr in dem vom Rasterizer erwarteten Muster angeordnet und führen dazu, dass das Subpixel-Antialiasing hässlich aussieht.
Browser deaktivieren in ähnlichen Situationen auch das Subpixel-Antialiasing, z. B. wenn Text gedreht oder animiert wird. In diesem Fall stimmt der gerasterte Text nicht mehr mit dem Subpixel-Layout der ursprünglichen Position des Textes überein und muss erneut gerastert werden. Dies ist insbesondere für Animationen teuer, sodass die meisten Browser auf Graustufen-Antialiasing zurückgreifen, das nicht unter demselben Problem leidet und in jeder Ausrichtung funktioniert.
Einige Browser - beispielsweise Chrome unter macOS - deaktivieren auch das Subpixel-Antialiasing auf hochauflösenden Bildschirmen, um eine konsistentere Benutzererfahrung zu erzielen. Andere Browser aktivieren nur Subpixel-Antialiasing für kleinen Text, da geringfügige Änderungen beim Rendern von Text bei größeren Formaten weniger sichtbar sind.
Es gibt mehrere andere Fälle, in denen Browser das Subpixel-Antialiasing deaktivieren. Die Regeln, nach denen Browser die Antialiasing-Methode auswählen, werden ständig aktualisiert Neue Eckfälle und Probleme werden gefunden . Diese häufigen Änderungen machen es sehr schwierig, den Überblick über die Textwiedergabe zu behalten. Was früher Subpixel-Antialiasing verwendet hat, kann beim nächsten Browser-Update auf Graustufen zurückgreifen. Die einzige Möglichkeit, sicher zu wissen, wie Ihr Text gerendert wird, besteht darin, auf tatsächlichen Geräten zu testen.
Sie sind wahrscheinlich daran gewöhnt, Ihre Website in mehreren Browsern zu testen. Das Testen der Textwiedergabe erhöht die Anzahl der Tests, die Sie durchführen müssen. Sie müssen nicht nur alle Kombinationen von Betriebssystemen und Browsern überprüfen, sondern auch alle gängigen Einstellungen für die Textwiedergabe.
Einige Geräte sind möglicherweise für die Verwendung von Graustufen-Antialiasing vorkonfiguriert, während andere eine Mischung aus Graustufen- und Subpixel-Antialiasing verwenden. Um es noch schwieriger zu machen, ist es nicht möglich, Online-Browser-Testtools oder virtuelle Maschinen zu verwenden, da sich die Textwiedergabe häufig von der von realen Geräten unterscheidet.
Verwenden Sie beim Testen immer ein repräsentatives Beispiel Ihres Inhalts. Eine Musterbibliothek eignet sich ideal zum Testen des Renderns von Typen, da sie eine breite Auswahl Ihres Inhalts enthält: Überschriften, Textkörper, Beschriftungen, Hintergrundfarben und Animationen. Wenn Sie Beispiele für Ihren Inhalt auf einer einzigen Seite haben, können Sie alle Kombinationen von Stilen und Hintergrundfarben schnell überprüfen.
Halten Sie Ausschau nach Text, der auf einigen Betriebssystemen nicht lesbar ist oder dünn erscheint. Wenn Sie ein Problem finden, wechseln Sie zu einer anderen Schriftart in derselben Schriftfamilie, machen Sie den Text dunkler oder wählen Sie eine andere Schriftart. Viel Glück.
Dieser Artikel wurde ursprünglich in Ausgabe 301 von net veröffentlicht, dem weltweit meistverkauften Magazin für Webdesigner und Entwickler. Ausgabe 301 kaufen oder net abonnieren .
Zum Thema passende Artikel:
