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.