Schönes neues CSS: font-size-adjust

Achtung: dieser Beitrag ist alt! Es kann gut sein, dass seine Inhalte nicht mehr aktuell sind.

Nach Schatteneffekten und den neuen Möglichkeiten der Farbdefinition widmen wir uns in diesem Teil der Serie rund um schönes neues CSS einem typografischen Thema. Mit font-size-adjust vereinheitlichen wir Buchstabengrößen über verschiedenen Schriften hinweg. Das ist auch tatsächlich sinnvoll, denn Schriftgröße ist nicht gleich Schriftgröße.

Vorwort: Schriftgröße ist nicht gleich Schriftgröße

Wenn wir in einen Stylesheet font-size:16px; schreiben, sagt das noch nicht viel darüber aus, wie das Endprodukt aussieht, denn was 16 Pixel sind, hängt von der verwendeten Schrift ab. Hier ein Beispiel mit vier verschiedenen Schriftarten auf der gleichen Schriftgröße (80 Pixel):

Unterschiedliche Höhen bei gleicher Schriftgröße

Blau eingezeichnet sind die H-Linie, die k-Linie sowie die x-Höhe (die Höhe eines Kleinbuchstabens) der Verdana im Wort Alpha. Man sieht, dass all dass diese Linien bei den anderen Schriften völlig anders liegen, obwohl überall die gleichen 80 Pixel Schriftgröße angegeben sind. Die Verdana und besonders ihre x-Höhe fällt einfach sehr groß aus.

Das wird in dem Moment zum Problem, in dem wir in unserem Stylesheet eine font-family definieren, in der die verschiedenen Schriftarten unterschiedliche x-Höhen haben. Dann nämlich landen wir, sobald die erste Wahl im Font Stack fehlt, sofort bei einem komplett anderem Schriftbild – wie im Beispiel zu sehen. Und font-size-adjust ist unsere Rettung.

Was macht font-size-adjust?

Mit font-size-adjust kann man, vereinfacht ausgedrückt, eine bestimmte x-Höhe erzwingen, ganz egal welche Schrift aus font-family eingesetzt wird. Und das geht so: Das Verhältnis zwischen der Höhe der Großbuchstaben und der x-Höhe einer Schrift nennt man Aspektwert. Mittels font-size-adjust informieren wir den Browser über den Aspektwert der ersten Schrift im Font Stack. Fehlt diese Schrift, nimmt der Browser die nächstbeste aus font-family, skaliert diese dann aber so, dass ihre Kleinbuchstaben genau so hoch werden, wie es die Kleinbuchstaben der ersten Schrift wären.

Klingt kompliziert, deswegen einfach ein Bild um den Effekt zu zeigen:

font-size-adjust in Aktion

Wie beim ersten Bild haben auch hier alle vier Wörter unterschiedliche Schriftarten und 80 Pixel Schriftgröße, aber sie wurden durch font-size-adjust so skaliert, dass sie wesentlich einheitlicher aussehen. Hier einmal in direkten Vergleich:

font-size-adjust im Vergleich

Man erkennt besonders bei Beta und Delta, wie die Schriftgröße erhöht wurde, um sie auf das Niveau der Verdana von Alpha zu bringen.

Also, was macht font-size-adjust? Ganz einfach, font-size-adjust erlaubt es uns, einheitlichere Schriftbilder zu erreichen, selbst wenn unterschiedlichste Schriftarten zum Einsatz kommen. In Zeiten, in denen der Apple-Marktanteil klettert und die Schrifteinbettung in Websites sich entwickelt, wird man das ausgesprochen gut gebrauchen können.

Wie benutzt man font-size-adjust?

Der Aspektwert der ersten Schrift im Font Stack ist alles, was man bei font-size-adjust notieren muss (alternativ none oder inherit). Ein Beispiel:

p.beispiel {
	font-family:Verdana, Arial, sans-serif;
	font-size:12px;
	font-size-adjust:0.58;
}

Der Aspektwert der Verdana beträgt 0.58. Wenn der Text in Verdana nicht angezeigt werden kann und Arial ran muss, wird der Text so skaliert, dass die Kleinbuchstaben genau so groß sind, wie sie bei einer 12px-Verdana wären.

Aspektwerte für viele Webfonts lassen sich online finden.

Welche Browser können font-size-adjust?

Im Moment ist der Firefox 3 der einzige Browser, der etwas mit font-size-adjust anfangen kann. Macht aber nichts – Safari und Opera werden zeitnah nachrüsten, vielleicht auch der Internet Explorer eines Tages. Bis dahin macht dieser dünne Support aber nichts aus, denn schließlich ist font-size-adjust lediglich eine dezente optische Verbesserung und nichts, womit ein Design steht oder fällt.

Kommentare (12)

  1. Martin

    7. Juli 2008, 15:08 Uhr

    Schreibe meinen Artikel über font-size-adjust. Das wird wieder Detailtypografiegenerde, das keiner lesen/versetehn wird...

    Also, ich hab's gelesen/verstanden. ;)
    Schöner Artikel, danke!

  2. Moritz Gießmann

    7. Juli 2008, 15:17 Uhr

    Super Sache, vor allem weil nicht alle Schriftarten auf allen Systemen vorhanden sind. Wenn ersetzt wird, wird das Layout nicht zerstört :-)

  3. muhli

    7. Juli 2008, 15:19 Uhr

    Tolle Eigenschaft. Kann aber auch total schief gehen, wenn der eingestellte Aspektwert vollkommen von dem der Ausweichschrift abweicht. Bei Verdana zu Times und Georgia ist das ja schon fast grenzwertig.
    Aber sehr schön erklärt das Ganze ;)

  4. Peter

    7. Juli 2008, 15:24 Uhr

    Zitat Martin:

    Also, ich hab's gelesen/verstanden. ;)
    Schöner Artikel, danke!

    Bitteschön! Und wie sagte einst der olle Adenauer: Was interessiert mich mein Geschwätz von gestern?

  5. Daniel

    7. Juli 2008, 18:11 Uhr

    Bin auch gespannt wie sich CSS nun in nächster Zeit weiterentwickelt, habe das Gefühl, dass es bald einen Schub geben wird, auch von Seiten des IE7.

  6. Peter

    7. Juli 2008, 18:22 Uhr

    Zitat Daniel:

    Bin auch gespannt wie sich CSS nun in nächster Zeit weiterentwickelt, habe das Gefühl, dass es bald einen Schub geben wird, auch von Seiten des IE7.

    Naja, wenn man bedenkt, dass selbst der IE8 nicht mehr als CSS 2.1 können wird … naja, so toll wird das nicht.

  7. soophie

    7. Juli 2008, 20:25 Uhr

    Schöne Sache. Leider wird Typografie im Web niemals den Stellenwert einnehmen, den es im Printbereich einnehmen wird. Hätte ich nicht eine Print-/Digital-Ausbildung "genossen", wüßte ich von dem Kram wahrscheinlich nichts :-)

  8. Michel

    7. Juli 2008, 21:51 Uhr

    Ah wunderbar, mein Wunsch (und der anderer) wurde erhört ;)

    Schön erklärt, schon wieder 'ne Ecke schlauer.

  9. David Maciejewski

    1. April 2009, 14:10 Uhr

    Wunderbar.

  10. Andreas

    17. Juli 2009, 20:41 Uhr

    Die Bilder in dem Artikel sind leider nicht (mehr) vorhanden. Es wäre toll, wenn Du Dir das Problem in freien 5 Minuten ansehen könntest. (Bei mir, Safari 4, lädt der Browser zumindest ewig.)

    Das ist ein tolles Theme, dass gerade die neuen Vista-Schriften betrifft – wenn es denn (endlich) mal unterstützt wird.

    Viele Grüße und vielen Dank für den Artikel!

  11. Axel

    17. Juli 2009, 21:30 Uhr

    Ich hoffe Microsoft kapiert es endlich und bringt mit IE9 einen ordentlichen Browser. Die Hoffnung stirbt zuletzt. Resourcen hätten sie jedenfalls mehr als genug.

    Eine neue JavaScript-Engine wurde aber schon angedeutet. Da haben sie ja auch genügend Know-How. Wird wohl was auf Basis der .NET CLR.

  12. Simon

    2. August 2009, 09:26 Uhr

    Interessante Eigenschaft. Danke für deine ausführliche Erklärung.

Die Kommentarfunktion ist seit Juli 2014 deaktiviert, weil sie zu sehr von Suchmaschinenoptimierern für manuellen Spam mißbraucht wurde. Wenn du Anmerkungen oder Fragen zum Artikel hast, schreib mir eine E-Mail oder melde dich via Twitter.

Folgt mir!

Kauft mein Zeug!

Cover der HTML5-DVD
Infos auf html5-dvd.de, kaufen bei Amazon

Cover des HTML5-Buchs
Infos auf html5-buch.de, kaufen bei Amazon

Cover des CSS3-Buchs
Infos auf css3-buch.de, kaufen bei Amazon