Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Markus Schlegel 16. September 2010

Font-Size-Adjust und Text-Size-Adjust: Viel Verwirrung um zwei neue CSS3-Eigenschaften

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.

Anzeige

„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),

Markus Schlegel

Markus Schlegel arbeitet als freier Webdesigner und bloggt über Web- und Icondesign, Typografie und Usability. Twitter,

10 Kommentare

  1. Mir waren die beiden Zeilen
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    in der CSS-Datei des CSS-Grid-Frameworks Kube aufgefallen, und ich muss gestehen, dass ich auch in 2015 von font-size-adjust und text-size-adjust bis dahin noch nichts gehört hatte. Die Erklärung hier hat für mich etwas Licht in diese Angelegenheit gebracht.

    Man könnte ja wirklich jammern, wenn das Jammern nicht so verpönt wäre: Früher (also ganz, ganz früher) musste man sich mit den Eigenheiten von Netscape und Internet Explorer herumschlagen, später immer noch mit den Extrawürsten des Internet Explorers … und heute? Nun ja, da muss man fummeln, damit die Webseiten auch ja auf allen möglichen Geräten irgendwie gut aussehen. Die Frameworks erleichtern einem zwar die Arbeit, aber sie haben auch hier und da so ihre Schwächen, und zumindest einmalig muss man sie auf die eigenen Bedürfnisse abstimmen.

    Da bin ich immer froh, wenn ich zwischendurch mal Print-Aufträge habe.

  2. sehr detailliert und hilfreich, vor allem der iphone absatz hat mir bei der entwicklung sehr geholfen

  3. Gewagte Theorie, „text“ ginge den Künstler nichts an. Den Schriftenentwerfer möchte ich sehen, der sich nicht für Zeilendurchschuss, Zeilenlänge und all die anderen Faktoren interessiert, die maßgeblich die Wirkung des Schriftbildes beinflussen und worauf Schriften am Ende auch optimiert werden. Wieder eimal zeigt sich, dass der deutsche Begriff Webdesigner einen Techniker meint, der Gestaltung so nebenbei mit erledigt. Wie überall, was man dem Land auch ansieht.

  4. Jaja, is alt …

    Aber in welchem Paralleluniversum darfst du denn leben? Es ist knapp vor 2013 und kein Dekstop-Browser außer der Frickelfox unterstützt font-size-adjust (auch nich mit Präfixen).

    http://webdesignernotebook.com/css/the-little-known-font-size-adjust-css3-property/ – Da kann ja jeder mal die Demos testen …

  5. Erst einaml danke für den umfassenden Artikel zu den beiden Attributen, das war mir in dieser Form nicht geläufig, auch nicht das das iPhone mal etwas mehr kann. Natürlich wird im Hause Microsoft mal wieder etwas anders interpretiert, das ärgert mich als Webdesigner bereits seit IE6.

  6. Ah, dass es das auf dem Desktop-Safari auch gibt, wusste ich nicht. Ich dachte, ich hätte das im Apple-Developer-Bereich gelesen, dass sich das nur auf iOS-Devices anwenden lässt. Dort stand leider nicht, dass sich dies vor allem auf die Mindestschriftgröße bezieht.

    Leider wird auf der Developer-Seite auch nicht gewarnt, dass ein Abschalten der Funktion Usability-Probleme mit sich bringen kann: „To turn automatic text adjustment off, set -webkit-text-size-adjust to none as follows: …“

    Aber vielen Dank für die Vertiefung!

  7. Das iPhone 4 hat in CSS-Pixeln die gleichen Abmessungen wie die vorhergehenden Modelle, es rechnet Pixelwerte intern einfach mal 2. Deshalb spricht CSS schon immer von Pixeln als einem relativem Wert. Das Raster-Elektronenmikroskop wird also selten von Nöten sein.

    Tatsächlich skaliert der mobile Safari die Schrift hoch, um sie lesbarer zu machen, er hat quasi einfach eine eingebaute Mindest-Schriftgröße wie herkömmliche Browser auch.

    Text-size-adjust ist allerdings nicht nur auf dem iPhone zuhause sondern auch im Desktop-Safari (5). Benutzt man dort den Wert none führt das dazu, dass man die Schriftgröße im Browser nicht mehr anpassen kann (z.B. auf http://www.t-mobile.de/), was natürlich ein Usability-Nachteil ist. Falls man es also unbedingt verwenden möchte ist es sinnvoll es per Media Query auf mobile Endgeräte zu beschränken.

  8. Danke für die Infos, die beiden css Attribute waren mir noch nicht geläufig.
    Schöne Zusammenfassung von Features!

  9. Mal wieder ein lesenswerter Artikel mit etwas neuem! Schönen Dank.

  10. Guter Artikel, vielen Dank dafür!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.