Es ist Ihnen vielleicht schon aufgefallen: Einige CSS-Eigenschaften beinhalten das Schlüsselwort „text“, andere das Wort „font“. Was vom Sinn her ähnlich zu sein scheint, birgt im Zusammenhang mit CSS einen signifikanten Unterschied. Die CSS-Eigenschaften font-size-adjust und text-size-adjust haben bis auf den gleichen Namensteil “size-adjust”  keine Gemeinsamkeiten.

“Font” steht für das eher Künstlerische

Eigenschaften mit dem Wörtchen „font“ beziehen sich auf die individuelle Gestaltung einer Schrift; auf alles, womit man auch als Schriftgestalter außerhalb des Webs zu tun bekommt. Die CSS-Eigenschaften font-weight und font-style bezeichnen die gewünschte Schriftstärke (mager, fett, halbfett) und die Schriftlage (kursiv, normal). Beide Merkmale gehören zum Schriftschnitt, ebenso wie die Schriftbreite (normal, breit, schmal). Eine Schriftamilie (font-family) verfügt in der Regel zumindest über vier verschiedene Schriftschnitte (der Begriff stammt aus Zeiten des Bleisatz als die Vorlagen für Buchstaben oder Lettern noch aus Stahl geschnitten wurden – Anmerkung der Redaktion), das heißt eine Normalschrift, eine echte Kursivschrift, eine Fettschrift sowie Fettkursiv. Weitere verbreitete Bezeichnungen für Schriftstärken sind zum Beispiel Light, Condensed oder Black. Leider nimmt die CSS-Eigenschaft font-weight diese Werte nicht an.

Neben font-weight und font-style gibt es noch die Eigenschaften:

• font-variant und
• font-family.

Mit font-variant können Sie sogenannte Kapitälchen (Schrift in Großbuchstaben) realisieren, während Sie über die CSS-Eigenschaft font-family Schriftfamilien wie zum Beispiel Arial, Helvetica, Verdana vorgeben. Man kann also sagen, dass sich alle Eigenschaften mit „font“ im Namen auf die Schrift an sich beziehen und das behandeln, was vom kreativen Kopf hinter der Schrift schon bedacht werden musste.

“Text” betrifft das Setzen der Schrift

Mit den Eigenschaften des Keywords „text“ hingegen muss sich im Grunde kein Schriftgestalter abgeben. Diese Eigenschaften entstanden teilweise auch aus der Not heraus; damit sich Schrift richtig an das Medium Web anpassen ließ. Unterstreichungen (text-decoration) gab es zwar schon vor dem Web, fielen aber nicht wirklich in den Aufgabenbereich der Typografen.

Bei „text“-Eigenschaften tritt der Setzer zutage. Die Aufgabe des Setzers ist es, die Schrift richtig auszurichten (text-align), die Einzüge zu bestimmen (text-indent), oder zu entscheiden, ob eine Schrift ausschließlich in Kapital-Buchstaben gesetzt werden soll (text-transform). Eine neuere Eigenschaft wäre dann noch der Text-Schatten (text-shadow) oder nun eben text-size-adjust.

Font-Size-Adjust versus Text-Size-Adjust

Jetzt wissen wir schon, wie die beiden Eigenschaften einzuordnen sind. Doch was bewirkt überhaupt font-size-adjust, was text-size-adjust?

Abbildung 1: Unterschiedliche Laufweiten der Schriften

Font-size-adjust ist vor allem auch dann interessant, wenn wir per @font-face Schriften referenzieren, die der Browser herunterlädt und sich dann so verhält, als habe er die Schrift schon immer gehabt. Bei einem näheren Blick auf verschiedene Schriften bei gleicher Schriftgröße fällt auf, dass die Schriften mal größer, mal kleiner ausfallen (Abb. 1). Mit font-size geben wir nämlich nicht die subjektive Größe der Schrift, sondern die Höhe des „Stempelkissens“, die Größe des sog. virtuellen Kegels (hellblaue Linien in Abb. 1) an. Manche Schriften wie die Verdana nutzen diesen virtuellen Raum sehr weit aus, während die Vista-C-Fonts (Calibri, Constantia, Corbel …) sich bescheiden geben und recht großzügig Platz lassen. Setzt man so beispielsweise die Calibri und die Verdana nacheinander in seinen Schriften-Stapel, kann es passieren, dass für denjenigen, der die Calibri nicht hat, ein völlig anderes Schriftbild entsteht als für alle anderen (Abb. 2).

font: 11px Calibri, Verdana, sans-serif;

Mit font-size-adjust wirken wir nun diesem Problem etwas entgegen. Wir gehen davon aus, dass alle Schriften in unserem Stapel einen ähnlichen Apsektwert (aspect ratio) haben und dass dieser maßgeblich für die subjektive Größe einer Schrift verantwortlich ist. Dieser Wert beschreibt das Verhältnis von der Mittellänge (auch X-Höhe: die Höhe der Kleinbuchstaben) zur Großbuchstabenhöhe. Die Verdana hat ein Verhältnis von circa 0,55 und die Calibri von 0,46. Wir geben für font-size-adjust nun den Aspektwert der ersten Schrift in unserem Stapel an; also der der Calibri:

font: 11px Calibri, Verdana, sans-serif;
font-size-adjust: 0.46;

So arbeitet font-size-adjust

Aber was genau tut font-size-adjust eigentlich? Nun, sagen wir: Man kann damit eine bestimmte X-Höhe erzwingen. Alle Schriften werden so skaliert, dass ihre Mittellängen der X-Höhe der ersten notierten Schrift entsprechen. Da man in seinem Schriftstapel ohnehin darauf achten sollte, dass die Aspektwerte nicht allzu weit auseinanderlaufen, ist das eine sehr ordentliche Methode, um Schriftgrößen anzugleichen. Die Aspektwerte vieler Webfonts lassen sich hier ablesen oder auch mit den virtuellen Linealen diverser Bildbearbeitungsprogramme selbst bestimmen.

Wie genau der Browser dabei vorgeht, ist nicht sicher. Prinzipiell müssten der Rendering-Engine die Aspektwerte aller verbreiteten Schriften bekannt sein.

Was ist text-size-adjust?

Text-size-adjust hört sich wie gesagt sehr ähnlich an, macht aber etwas gänzlich anderes. Die Eigenschaft gibt es bisher nur mit dem Präfix webkit beim iPhone-Safari. Dort auf dem iPhone bewirkt -webkit-text-size-adjust eine Justierung der Schriftgröße. Man kann der Eigenschaft die Werte none (keine Schriftgrößenänderung), auto (automatische Schriftgrößenänderung) und Prozentangaben (relative Schriftgrößenänderung zu none) übergeben. Doch worin liegt der Unterschied zu normaler Schriftgrößenänderung per font-size?

Nun, ein nicht sehr unwichtiger Unterschied ist, dass sich die Vergrößerung der Schrift per text-size-adjust nicht auf die Einheit em niederschlägt. Notiert man beispielsweise die Breite eines Blocks relativ zur Schriftgröße mit em-Angaben, dann wird bei einer größeren Schrift auch dieser Block breiter. Vergrößern wir die Schrift mit text-size-adjust, gilt das nicht mehr.

Achtung iPhone

Was aber wahrscheinlich am wichtigsten ist: Auf dem iPhone ist die Standardbelegung von text-size-adjust nicht none (was gar keiner Schriftgrößenänderung entspräche), sondern auto. Das bedeutet, dass jede Website automatisch skaliert wird. Möchte man das zurücksetzen, muss man den Wert manuell auf none setzen.

/* Zurücksetzen der Auto-Schriftskalierung */
html { -webkit-text-size-adjust: none; }

Was ist der Sinn von text-size-adjust?

Vor allem mit dem aktuellen iPhone 4 haben wir ein Endgerät mit einem enorm hoch auflösendem Display, aber auch die iPhones davor oder das iPad haben eine sehr hohe Pixeldichte bei relativ kleinem Bildschirm. Setzt der Webdesigner nun alle seine Schriftgrößenwerte in Pixel – was ja durchaus legitim ist -, kann es passieren, dass man als iPhone-User Texte mit einem Rasterelektronenmikroskop lesen müsste. Damit das nicht passiert, hat sich Apple die nachträgliche Textskalierung per text-size-adjust einfallen lassen. Der vorbelegte Wert auto soll dabei schon eine sinnvolle Vorgabe sein, an der man eigentlich nichts mehr ändern müsste.

Schlusswort

Text-size-adjust und font-size-adjust haben also nichts gemein, bis auf einen Teil des Namens. Text-size-adjust ist außerdem bisher noch “iPhone-only” und wird zum Beispiel auf Android-Geräten nicht unterstützt.

Font-size-adjust hingegen können der Firefox, Safari, Chrome und Opera, also wieder einmal alle außer dem Internet Explorer. Zum Glück ist die Funktion nicht überlebenswichtig für ein Design, sondern macht es nur etwas ordentlicher und schöner, sodass Internet-Explorer-Nutzer gar nichts davon mitbekommen, wenn sie nicht in den Genuss angepasster Schriftgrößen per font-size-adjust kommen.

(mm),