praegnanz.de büro für intervernetzte medien

Gerrit, 29.11.2007

Schriftgrößen-Lotterie

Eine wunderbare Eigenschaft in CSS ist die Möglichkeit, mehrere Schriftfamilien zu definieren, die dann je nach Verfügbarkeit auf dem jeweiligen System verwendet werden, um den gewünschten Text anzuzeigen.

Ein Problem haben die CSS-Macher jedoch offenbar nicht bedacht: Die gängigen Webschriften sind größtenteils für den Bildschirm optimiert und halten sich in kleineren Schriftgraden nicht unbedingt an eine Standard-Vermaßung. Beim Hinting-Prozess wurden teilweise verschiedene Definitionen des Pixelrasters herangezogen, um die Buchstaben knackig scharf darzustellen. Das Resultat: Deutliche Unterschiede in der dargestellten Buchstabenhöhe!

Bei der Verdana wissen wir das schon länger: Sie mogelt sich oftmals ein weiteres Pixel in der Höhe hinzu. Doch auch in der umgekehrten Richtung ist dies denkbar: Die neuen Vista-Schriften (nur echt mit dem C) wirken durch die Bank kleiner als die Referenzschrift Arial. (Ich habe sie jetzt einfach mal zur Referenzschrift erkoren, das ist nichts offizielles.)

Gucken wir uns das einmal genauer an! Hier eine Aufstellung und Vermaßung von vier Schriften, alle bei font-size: 10px; und mit line-height: 1.2em; (Screenshots mit ClearType1 mit Hilfe des furiosen Typetesters erstellt)

Wie Ihr seht: Gravierende Unterschiede. Zum einen natürlich in der Zeichenbreite (was man jedoch nicht so gut und einfach messen kann), aber auch in der klar messbaren Höhe: Die Verdana schummelt bei der Oberlänge!

Doch gucken wir uns das auch noch, stichprobentechnisch, bei 12 Pixel Font-Size an:

Diesmal noch eindeutiger: Calibri und Consolas haben nur eine x-Höhe von 6 Pixeln, während Arial und Verdana 7 zu bieten haben. Die Verdana gönnt sich darüber hinaus wieder volle 3 Pixel für die Oberlänge und füllt mit 12 Pixel Gesamthöhe den kompletten virtuellen Kegel aus, was an sich ungünstig ist, aus diversen Gründen. Die Consolas indes macht sich nach oben hin frei und setzt ausschließlich für den i-Punkt eine Extra-Pixelreihe an.

Natürlich stellt sich die Frage nach dem Sinn dieser Betrachtungen. Ganz klar: Einfacher wird das typografische Arbeiten so nicht! Die ersten großen Websites beginnen dieser Tage damit, die Vista-Schriften einzusetzen (z. B. Bunte), und man muss sich Gedanken machen: Wollen wir, dass Leute mit älteren Windows-Versionen und Mac-User, generell deutlich größer wirkende Schriften angezeigt bekommen? Ist das nicht gegen den Trend? Will man nicht lieber größere Fonts auf neuen Geräten haben, weil vielleicht neue Geräte auch höhere Auflösungen besitzen, die eher nach größeren Schriften verlangen?

Eine Sache ist sonnenklar: Es wäre schön, wenn man in CSS die Deklaration einer Schriftfamilie an einen ihr zugewiesenen Schriftgrad koppeln könnte. Somit wäre man in der Lage, alles optisch auszugleichen. Etwa so:

font: normal 13px/1.5 calibri, normal 11px/1.5 verdana, normal 12px/1.5 arial;

Oder so ähnlich. Weiß jemand, ob das in CSS3 möglich ist?

update: Ja, offenbar hat man beim W3C darüber nachgedacht und in die Arbeitsversionen von CSS3 die font-size-adjust-Funktion eingebaut (Danke, Tobias):

This property allows authors to specify an aspect value for an element that will preserve the x-height of the first choice font, whether it is substituted or not.

Sehr schön, hier wird sich also an der x-Höhe orientiert, was schon mal ein Schritt in die richtige Richtung ist. Doch daraus ergeben sich meines Erachtens wieder zwei neue Probleme:

  • Woher weiß denn der Browser, wie groß die x-Höhe der einzelnen Fonts ist? Gibt es da eine Tabelle mit den wichtigsten Webfonts, die Bestandteil der CSS3-Spezifikation ist? Oder ist das gar in den Font-Metadaten eingebaut? Man weiß es nicht. Mir fehlt in den Specs eine Möglichkeit, die Ausgleichswerte an einzelne Font-Alternativen zu binden.
  • Falls die Browser tatsächlich die x-Höhe ausgleichen, kann man nur hoffen, dass sie dies bei kleinen Schriftgraden unter Berücksichtigung der pixelgrid-optimierten Schriftgrade tun. Eine Größenanpassung nützt mir nichts, wenn der Skalierungsfaktor 3 Prozent beträgt und der ganze Font komplett vermatscht und zu Tode geglättet wird, nur um die korrekten Größenverhältnisse zu bekommen. Pixeloptimierung geht vor! Also müsste der Browser automatisch auf die nächstgrößere Pixelgröße springen, wenn er die x-Höhen entsprechend anpasst.

Mhh, ich hoffe, das ist jetzt nicht zu Grafiker-nerdig …

update 7.7.08: Peter Kröner erklärt uns, wie man mit font-size-adjust umgeht!

21 Kommentare

  1. Tobias am 29. November 2007 #

    Ja – font-size-adjust ist meines Wissens dafür da.

    http://www.w3.org/TR/2002/WD-css3-fonts-20020802/#font-size

  2. Tobias am 29. November 2007 #

    Sorry falscher Link:
    http://www.w3.org/TR/2002/WD-css3-fonts-20020802/#font-size-adjust

    Das Working Draft stammt allerdings aus dem Jahr 2002 und hat mittleren Priorität für die Weiterentwicklung.

    The working group believes this draft is stable and it therefore issues a last call for comments, before requesting the status of Candidate Recommendation for the draft. The deadline for comments is 30 August 2002.

    Versteh ich nicht ganz.

    Man kann sich also denken wie lange es noch bis zu einer Recommendation dauert  …

  3. Gery am 29. November 2007 #

    Kann nur staunen!

  4. Alexander Hahn am 29. November 2007 #

    Krass das sich da seit 2002 nichts getan hat, wo es meiner Meinung nach eine so offensichtlich wichtige Neuerung darstellen würde! Was ist wichtiger als ausgewogene Typografie im Netz? Wenig denke ich.

    Feinste Grüße und danke für die Bestätigung, dass die »C« Schriften wirklich kleiner/flacher sind, dachte schon ich bilde mir das ein.

  5. Eric Eggert am 29. November 2007 #

    Also ich persönlich fände das einen Rückschritt von der Interoparabilität von Schriften, wenn man da in jedem Stylesheet jede Schriftart wieder ins Verhältnis zu seiner Ausgangsschriftart setzen muss. Das kann es ja irgendwo auch nicht sein. Dann lieber was in die Schriften oder in den Browser eingebautes.

  6. at am 29. November 2007 #

    »font: normal 13px/1.5 calibri, normal 11px/1.5 verdana, normal 12px/1.5 arial; [...] Weiß jemand, ob das in CSS3 möglich ist?«
    Nein, man wird auch weiterhin Maßeinheiten für den Zeilenabstand verwenden müssen. Aber das nur am Rande.
    »font: normal 1em/1.5em sans-serif;« funktioniert übrigens bestens.

  7. Gerrit am 29. November 2007 #

    @at: Nun, zumindest die CSS 2.1 Spezifikation erlaubt ausdrücklich die Angabe eines einfachen Integer-Wertes als value für line-height. Ich gehe davon aus, dass dies auch für die Kurzschreibweise gilt.

  8. Tobias am 29. November 2007 #

    @Eric: Und was soll man den da einbauen? Standardisierte X- und Versal-Höhe? Das kann man doch nicht machen.

  9. at am 29. November 2007 #

    Du hast Recht, mein Fehler. Weshalb es aber sinnvoll sein soll, einen nach deinem Dafürhalten fehlinterpretierten Schriftgrad zur weiteren Berechnung heranzuziehen, erschließt sich mir nicht.

  10. Gerrit am 29. November 2007 #

    Da verstehe ich jetzt nicht, was Du meinst: Es ist völlig egal, ob man das »em« hinschreibt oder nicht – die Zeilenhöhe orientiert sich stets am Schriftgrad des dazugehörigen Elements. Wenn man nicht gerade mit Pixelwerten arbeitet, was natürlich schwachsinnig ist, weil nicht skalierbar!

  11. Michel am 29. November 2007 #

    Um die »Streitigkeiten« zwischen Angabe von Maßeinheiten bei @line-height@ zu beenden, sollte jeder nochmal Unitless line-heights von Eric Meyer lesen ;)

    Dass die Vista-Schriften optisch etwas kleiner ausfallen, ist mir auch schon aufgefallen.

  12. Jörg L. am 29. November 2007 #

    Schön, dass Du das nun so genau vermessen hast, Gerrit. :)

    @Michel:
    Der Artikel von Eric Meyer übersieht, was man mit einer line-height in em erreichen kann: Nämlich feste Zeilenhöhe bei wechselnder CSS-Schriftgröße, unter Wahrung der Skalierbarkeit durch den Nutzer. Wenn Du z.B. angibst:

    body {
    font-size: 100%;
    line-height: 1.25em;
    }

    Dann kannst Du untergeordneten Elementen auch kleinere Schriftgrößen zuweisen, ganz nach belieben, und die Zeilenhöhe wird doch dieselbe bleiben – absolut, nicht relativ. Nur wenn der Nutzer die Schriftgröße skaliert, ändert sich auch die Zeilenhöhe mit. Auch im IE.

    Das erleichtert ein Grid Layout doch erheblich.

  13. Gerrit am 29. November 2007 #

    Mit dem Eric-Meyer-Artikel ist mein letzter Kommentar hinfällig geworden. Danke für die Aufklärung! Seltsam, dass ich das nie gemerkt habe in all den Jahren.

  14. Michel am 29. November 2007 #

    @Jörg L.:

    Da hast du natürlich recht, das war aber – denke ich – nicht Aufgabe des Artikels. Rhythmisch-gleichbleibene Zeilenhöhen bekommt man damit natürlich super hin.

  15. RaiseHell am 29. November 2007 #

    »Die Verdana schummelt bei der Oberlänge!«

    Tut sie das? Im Vergleich zu den anderen Schriftarten könnte man das durchaus so sehen.
    Andererseits ist die Verdana die einzige Schriftart, die bei einer 10 Pixel Einstellung auch wirklich 10 Pixel hoch ist. Sollte es denn nicht genau so sein?

  16. Jörg L. am 29. November 2007 #

    Wenn Du mal einen Akzent auf einen Buchstaben machen willst, wird das bei Verdana schwierig. Der Buchstabe wird eben zu groß (mit dem Akzent), oder der Buchstabe wird verkleinert gegenüber der einfachen Version.

    Nochmal zu den verschiedenen line-height angaben: ALA hat es mal ausführlich getestet .

  17. Christoph Päper am 30. November 2007 #

    Bereits in CSS 2.0 gibt es ‚font-size-adjust‘, aber da es nicht genügend viele Implementierungen gab (und m.W. gibt), wurde es für CSS 2.1 nicht beibehalten. Die nötigen Daten lassen sich im Prinzip aus den Dateien extrahieren.

  18. Ralf Herrmann am 30. November 2007 #

    >>>Andererseits ist die Verdana die einzige Schriftart, die bei einer 10 Pixel Einstellung auch wirklich 10 Pixel hoch ist. Sollte es denn nicht genau so sein?

    Nö. Die Schriftgröße ist die Größe des Schriftkegels und hat mit der Höhe der Buchstabenformen nur indirekt etwas zu tun.

  19. Jens Grochtdreis am 6. Dezember 2007 #

    Ich bin nun leider kein Typograph und deshalb verstehe ich das Problem nicht. Für mich scheint es so, als ob allein die Verdana richtig dimensioniert sei, denn bei 10 bzw. 12 Pixeln nimmt sie auch ebenso viel Platz ein. Also ist alles prima. Oder?

    Daß Schriften unterschiedlich wirklen und laufen ist doch eigentlich klar. Wenn dem nicht so wäre, bräuchte man sie nicht. Oder bin ich da zu naiv?

  20. Tobias am 6. Dezember 2007 #

    @Jens: Ich würde sagen ein »Richtig« oder »Falsch« gibt es nicht.

    Stell dir mal vor man schreibt in seine CSS

    font-family: Calibri, Helvetica, Verdana, Arial, sans-serif;
    font-size: 0.75em;

    Auf Vista wird die Calibri, auf dem Mac die Helvetica und beim Rest wohl die Verdana genommen. Und obwohl alle die selbe Schriftgröße zugewiesen bekommen wirken sie optisch doch stark unterschiedlich. Und das mag der Typograph eben nicht ;-). Sie sollen wenigstens gleich wirken.

  21. Mathias am 9. Dezember 2007 #

    Hi
    Von der Schriftgrößen-Lotterie kann man gleich auch auf die Laufweiten-Lotterie kommen.
    Je nach Schriftglättungsalgorithmus brauchen die selben Schriften unterschiedlich viel Raum. Nicht nur der Grauwert ändert sich, sondern auch der Zeilenwechsel.
    Hier ein Bild zum direkten Vergleich: http://www.mnn.ch/blog/wp-content/uploads/2007/12/schriften.png

Kommentarfunktion für diesen Artikel geschlossen.