Der frustrierendste Aspekt des Webdesigns für Designer, die für den Druck ausgebildet sind, ist der anhaltende Mangel an typografischer Kontrolle. Sorgfältige typografische Entscheidungen sind das Markenzeichen qualitativ hochwertiger Arbeit, und der Mangel an dieser Qualität im Internet ist für diejenigen von uns, die wissen, wonach wir suchen, immer wieder beunruhigend. Glücklicherweise nimmt das Maß an Kontrolle, das wir haben, ständig zu, und auch die Unterstützung für eine fortgeschrittenere typografische Darstellung nimmt zu. Während es sicherlich nicht möglich ist, die Art von Behandlung zu liefern, die Anwendungen wie Illustrator bieten – bei der jeder Buchstabe bei Bedarf angepasst werden kann –, stehen Tools zur Verbesserung der Qualität zur Verfügung. Eine der am wenigsten bekannten ist die Eigenschaft zur Textwiedergabe. Sie werden die Textrendering-Eigenschaft in keiner CSS-Spezifikation finden, da es sich technisch gesehen nicht um CSS, sondern um eine SVG-Eigenschaft handelt, obwohl sie genau wie eine CSS-Eigenschaft verwendet wird. Das Wichtigste ist, dass wir mit einer einzigen CSS-Zeile einige Flüsse und andere Unvollkommenheiten aus unserem Text beseitigen können. Die Eigenschaft zur Textwiedergabe verfügt über vier Einstellungen:
- auto: Ermöglicht dem Browser, selbst eine Einstellung zu wählen
- optimierenGeschwindigkeit: konzentriert sich auf Geschwindigkeit
- optimizeLegibility: konzentriert sich auf erweitertes Rendering
- geometrischePräzision: Präzises Rendern
Leider begünstigt die Verwendung der Browser-Standardeinstellung „Auto“ normalerweise eher die Geschwindigkeit als die Lesbarkeit – ein Hinweis auf einen von Entwicklern und nicht von Designern finalisierten Standard. Da die meisten von uns keine Seiten erstellen, die umfangreich genug sind, um die Notwendigkeit der Einstellung „optimizeSpeed“ zu rechtfertigen, sind wir eigentlich nur an „optimizeLegibility“ interessiert (obwohl „geometrische Präzision“ für bestimmte Schriftarten nützlich ist). Der CSS-Code lautet wie folgt: .myClass { text-rendering: optimierenLegibility; } Hier ist ein direkter Vergleich von „optimizeSpeed“ und „optimizeLegibility“. Wie Sie bei genauem Hinsehen sehen können, gibt es in der besser lesbaren Version zwei wesentliche Verbesserungen: Die „ffi“-Zeichen in der ersten Zeile wurden korrekt durch eine Ligatur ersetzt und das Kerning wurde durchweg verbessert, was besonders in der fünften Zeile bemerkenswert ist, wo der Abstand zwischen dem „V“ und dem „e“ korrigiert wurde.
Die Kerning-Verbesserungen sind in diesen Überlagerungen besser zu erkennen:
Chrome-Mac
Chrome Windows
Firefox-Mac
Firefox Windows
Internet Explorer 9 Windows
Safari-Mac
Die Browserunterstützung ist derzeit inkonsistent. Die Tatsache, dass die Textwiedergabe in Browsern, die sie nicht unterstützen, jedoch stillschweigend fehlschlägt, bedeutet, dass sie derzeit sehr gut verwendbar ist.
Verwenden Sie die Textrendering-Eigenschaft in Ihrem CSS? Würde irgendjemand außer einem Typografen den Unterschied überhaupt bemerken? Teilen Sie uns Ihre Meinung in den Kommentaren mit.
Ausgewähltes Bild/Miniaturansicht, Bild verfeinern über Shutterstock.
