molily: Text-Unterlängen übertreten Elementgrenzen

Beitrag lesen

Hallo!

Schriftrendering ist nicht pixelgenau – damit kann man sich nur abfinden. Wenn du drei Browser (z.B. Chrome, IE, Firefox) auf vier Systemen (Windows XP, Windows 7, Ubuntu, Mac OS) mit demselben Font testest, bekommst du nach Adam Riese und Eva Zwerg ungefähr 23 verschiedene Resultate, von denen die Hälfte unschön oder gar unlesbar ist.

Du musst damit rechnen, dass verschiedene Systeme andere Fonts verwenden und/oder sie unterschiedlich groß rendern. Es gibt zwar Techniken wie font-size-adjust, aber die haben sich nicht breit durchgesetzt.

Selbst wenn man Abstände minimieren will, dann nutzt man line-height: 1.2 oder höher. Wenn man lesbaren Text setzt, dann nimmt man mindestens 1.4 oder 1.6 und hat dadurch genug Spielraum. Es kommt selten vor, dass Glyphen pixelgenau an eine Kante grenzen sollen. In einem solchen Fall wäre eine Script-Lösung denkbar, die die optimale Größe sucht, z.B. mit SVG oder Canvas.

Als Hintergrundlektüre empfehle ich das Webtypobuch und diese Artikelreihe im Typekit-Blog.

Mathias