CSS

CSS: Textdarstellung optimieren mit Text-Rendering

23. April 2012
von

Texte können dank CSS vielfältig gestaltet werden. Auch die Art und Weise, wie der Browser einen Text rendert, lässt sich mit der Eigenschaft „text-rendering“ festlegen. Dabei kann die Rendering-Methode auf Geschwindigkeit oder auf Lesbarkeit optimiert werden.

Rendering-Methoden mit sichtbaren Unterschieden

Die CSS-Eigenschaft „text-rendering“ kennt neben dem Wert „auto“ noch drei weitere Werte, mit denen die Rendering-Methode näher konfiguriert werden kann. „optimizeSpeed“ optimiert einen Text so, dass er möglichst schnell dargestellt wird. Buchstaben werden dabei nicht geometrisch präzise angezeigt. Das Kerning wird ausgeschaltet und Ligaturen werden nicht dargestellt.

Der Wert „optimizeLegibility“ sorgt für eine optimale Lesbarkeit von Texten.  Es findet ein Kerning zwischen den Buchstaben statt. Außerdem werden Ligaturen dargestellt, sofern die verwendete Schriftart sie zur Verfügung stellt. Der Wert „geometricPrecision“ sorgt für eine geometrisch präzise Anzeige des Textes.

 


oben: weder Kerning noch Ligaturen mit „optimizeSpeed“, unten: Kerning und Ligaturen mit „optimizeLegibility“

Standardmäßig wählt der Browser eine geeignete Rendering-Methode aus. Da derzeit nur Gecko- und Webkit-Browser die CSS-Eigenschaft kennen, können andere Browser nicht berücksichtigt werden. Gecko-Browser wählen bei Schriften, die kleiner als 20 Pixel sind, automatisch die Methode „optimizeSpeed“, für größere Fonts „optimizeLegibility“. Webkit-Browser wählen standardmäßig die Methode „optimizeSpeed“ und zwar unabhängig von der Schriftgröße.

Der Wert „geometricPrecision“ wird nur vom Chrome unterstützt. Die Einstellung sorgt im Chrome dafür, dass Schriften exakt in der angegebenen Größe dargestellt werden, auch wenn es sich um “krumme” Schriftgrößen wie 12,9 Pixel handelt. Normalerweise werden Schriften immer auf die nächsthöhere oder niedrigere Schriftgröße skaliert. Gecko unterpretiert „geometricPrecision“ wie „optimizeLegibility“.

[Bildquellenangabe für das Foto auf der Magazinübersicht: Written language via Fotopedia]

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!