font Kurzform vs Einzeleigenschaften: Reihenfolge, Pflichtwerte, Fallen

Reihenfolge und Pflichtwerte

font: [style] [variant] [weight] [stretch] size[/line-height] family. Stil, Variante, Gewicht und Breite sind optional und dürfen untereinander die Reihenfolge tauschen; font-size und font-family müssen vorkommen, in dieser Reihenfolge, als letzte beide. Fehlt eines, ist die ganze Deklaration ungültig und wird ignoriert – ohne Fehlermeldung.

html { font: 400 100%/1.55 "Piazzolla Variable", Georgia, serif; }

Was zurückgesetzt wird

Alles, was nicht genannt ist: font-style auf normal, font-weight auf normal, font-variant auf normal, line-height auf normal. Ein font: 16px serif nach einem font-weight: bold macht den Text wieder mager. Dazu gehören in CSS 3 auch font-size-adjust, font-kerning und die font-variant-*-Eigenschaften.

Systemschriften

Die Kurzform nimmt als einzige die Schlüsselwörter caption, icon, menu, message-box, small-caption und status-bar: font: menu übernimmt die Systemschrift der Menüs samt Größe. Für Einzeleigenschaften gibt es keine Entsprechung.

Die Zeilenhöhe reist mit

Wer font: bold 16px Georgia schreibt, setzt auch line-height zurück – auf normal, obwohl von Zeilenhöhe keine Rede war. Auf einem Fließtext, dessen Zeilenabstand weiter oben sorgfältig eingestellt wurde, ist das ein stiller Rückschritt. Die Schreibweise mit Schrägstrich hält beides zusammen: font: bold 16px/1.6 Georgia. Dieselbe Wirkung hat die Kurzform auf font-style und font-variant, die ohne Nennung ebenfalls auf ihren Ausgangswert zurückfallen.

Die Schriftliste und ihr Rückfall

font-family nimmt keine Schrift entgegen, sondern eine Liste, die der Browser von links nach rechts abarbeitet – und zwar Zeichen für Zeichen, nicht einmal für das ganze Element. Fehlt in der ersten Schrift ein bestimmtes Zeichen, holt er es aus der nächsten, die es hat. Deshalb kann ein Text in zwei Schriften erscheinen, ohne dass im Stylesheet etwas falsch steht; besonders auffällig wird das bei Anführungszeichen, Gedankenstrichen und Währungszeichen.

Am Ende jeder Liste sollte eine der fünf allgemeinen Familien stehen, die CSS 1 eingeführt hat: Serifenschrift, serifenlose Schrift, Festbreitenschrift, kursive Schreibschrift und Zierschrift. Sie sind keine Schriften, sondern Kategorien, die der Browser aus seinen Einstellungen füllt – und sie sind die einzige Angabe, die garantiert etwas trifft. Namen mit Leerzeichen gehören in Anführungszeichen, die allgemeinen Familien niemals: In Anführungszeichen wäre daraus die Suche nach einer real installierten Schrift dieses Namens.

Was die Kurzform von CSS 2.1 nicht kennt

Die Kurzform ist in CSS 2.1 mit fünf Bestandteilen und den Systemschriften abschließend definiert. Was danach kam, hat sie erweitert, und dabei ist eine Falle entstanden: Die Kurzform setzt heute auch font-stretch, font-size-adjust und die Angaben zu den Schriftvarianten zurück, obwohl diese in ihrer Schreibweise gar nicht vorkommen können. Wer eine dieser Eigenschaften setzt und danach die Kurzform notiert, verliert sie stillschweigend.

Das ist derselbe Mechanismus wie bei der Zeilenhöhe, nur weniger bekannt, weil die betroffenen Eigenschaften seltener vorkommen. Wer Kapitälchen, Ziffernvarianten oder eine angepasste Schriftbreite verwendet, notiert die Schriftangaben deshalb besser einzeln. Umgekehrt bleibt die Kurzform genau dort das beste Werkzeug, wo sie ursprünglich gedacht war: eine vollständige Schriftangabe an einer Stelle, an der vorher nichts stand, oder das absichtliche Zurücksetzen aller Schriftangaben auf einen definierten Stand.

Wie der Browser den passenden Schnitt sucht

Zwischen der Angabe im Stylesheet und dem, was auf dem Bildschirm erscheint, liegt ein festgelegtes Suchverfahren. Der Browser geht die Schriftliste durch, prüft für jeden Namen, ob eine passende Familie verfügbar ist, und wählt darin den Schnitt aus – zuerst nach dem Stil, dann nach der Breite, dann nach der Stärke. Erst wenn dort nichts passt, geht er zum nächsten Namen der Liste über.

Fehlt die verlangte Stärke innerhalb einer vorhandenen Familie, wechselt er nicht zur nächsten Schrift, sondern rechnet den Schnitt aus: Er verdickt die Konturen oder neigt die aufrechte Form. Das erklärt eine ganze Klasse von Beobachtungen – warum fetter Text mit einer bestimmten Schrift plump wirkt, warum eine Kursive falsche Buchstabenformen zeigt, und warum das Prüfwerkzeug eine Schrift meldet, obwohl das Ergebnis nicht danach aussieht. Die Antwort liegt nicht in den Schriftangaben, sondern in den geladenen Schnitten.

Wann welches

• Grundschrift des Dokuments auf html oder body: Kurzform, mit Zeilenhöhe.
• Eine Eigenschaft für ein Element ändern – Gewicht einer Überschrift, Größe eines Hinweises: Einzeleigenschaft.
• Formularfelder an die Umgebung angleichen: font: inherit.

Häufige Fragen