CSS font-size – Schriftgröße auf Webseiten

font-size – Maßeinheiten

Die Maßeinheiten für Schriftgrößen haben es in sich. Früher einmal gab es Pixel (px) für Monitore und Point (pt) für den Druck, heute stellt CSS über 20 Einheiten bereit.

h2 { font-size: 2em }
p { font-size: 18px }
td { font-size: small }
li { font-size: 90% }

font-size

regelt die Größe der Schrift mit absoluten oder relativen Werten, durch numerische Werte, Prozentangaben oder Schlüsselwörter wie larger und smaller.

Dabei ist die Angabe der Schriftgröße eher als Empfehlung zu sehen, denn die tatsächliche Schriftgröße hängt am Ende von der Auflösung und Größe des Monitors, von den Einstellungen des Benutzers und auch noch vom Browser ab. Wie die Schriftgröße beim Benutzer ankommt? Das ist ein Blick in die Glaskugel.

Relative Maßeinheiten

1. em (relativ)
2. rem (relativ)
3. ex (relativ)
4. ch (relativ)
5. % (relativ)
6. vw (relativ)
7. vh (relativ)
8. vmin (relativ)
9. vmax (relativ)
10. smaller (relativ)
11. larger (relativ)

Absolute Maßeinheiten

1. px (absolut)
2. xx-small (absolut)
3. x-small (absolut)
4. small (absolut)
5. xx-large (absolut)
6. x-large (absolut)
7. large (absolut)
8. medium (absolut)

Einheiten für den Druck

1. pt (Druck)
2. pc (Druck)
3. cm (Druck)
4. mm (Druck)
5. in (Druck)

In den modernen Browsern bietet CSS eine praktische Funktion: CSS clamp. font-size: clamp(min, bevorzugt, max) bestimmt eine minimale und maximale Schriftgröße, und das gleichzeitig mit einem bevorzugten Wert. Die clamp-Funktion erspart Breakpoints.

Gut lesbare Schriftgröße

Kleiner geht es nicht: Neun Pixel brauchen wir, damit der Text lesbar ist. Aber die Zeit der kleinen Schriften ist vorbei. Die Auflösung der Monitore – selbst der Monitore auf den mobilen Geräten – ist so heute so hoch, dass die Schriftgröße sich am Standard von 1em (16px) orientieren kann, und dabei dennoch ein kompaktes Schriftbild entsteht.

Font-size: 9 Pixel
Aus »Das Buch der kleinen Kreuzstichmuster«

Native Schriftgrößen der Elemente

Es gab eine Empfehlung in HTML: The Markup Language (an HTML language reference) / W3C Working Group Note 28 May 2013, und obwohl das Dokument nicht mehr fortgeschrieben wird und nur noch aus historischen Gründen im Web bleibt, lieferte es immerhin einen Anhaltspunkt, wie Browser die Schriftgrößen der Elemente rendern sollen.

EM hat sich zur Standard-Maßeinheit für font-size entwickelt, darum geben die Browser-Konsolen unter den Developer Tools die Schriftgrößen in EM an. 1em entspricht 16px.

Der Begriff EM hat seinen Ursprung aus dem Schriftsatz, wo 1EM etwa der Breite der großen Letter M entspricht.

Schriftgröße und Auflösung des Monitors

Wie groß die Schrift auf dem Monitor tatsächlich dargestellt wird, hängt auch von der Kombination von Pixeldichte (PPI – Pixel per inch), Viewport-Größe, Browser- und Betriebssystemeinstellungen ab.

font-size ch

ch ist das Maß für das Zeichen 0 (Null, U+0030) der aktuell verwendeten Schrift. ch steht also nicht für character als »Breite eines Zeichens«, es sei denn, es handelt sich um eine Schrift mit fester Breite für jedes Zeichen (mono-space).

em wiederum ist ein inzwischen veraltetes Maß für den Buchstaben m. Da das m in den nicht-propotionalen Schriften sehr breit ist, eignet sich em nicht sonderlich gut, um etwa die Breite eines Absatz festzulegen. em sollte eher als Anfangswert statt als Breite Buchstabens m verstanden werden. Die 0 spiegelt eher das Mittelmaß der meisten Schriften, ist aber auch noch etwas breiter als die meisten Zeichen – so um 20%.

ch, em und rem sind also nicht unbedingt empfehlenswert als Maßeinheiten für Layout-Element (auch wenn wir das noch so oft sehen), sondern eben für font-size.

Relative Schriftgrößen: EM, REM, CH %

em, % und rem sind relative Maßeinheiten, px hingegen ist eine absolute Größenordnung.

Das Absolute an absoluten Einheiten wie Pixel ist: Die Schriftgröße eines Elements bleibt unter allen Umständen und an jeder Position gleich.

Bei relativen Einheiten für die Schriftgröße erben alle Elemente die Vergrößerung oder Verkleinerung der Schriftgröße vom body bzw. html-Element. html {font-size: 1.1em} oder html { font-size: 110% } vergrößern die Schrift aller Elemente im Dokument um 10%. font-size in REM erbt ebenfalls vom HTML / Body-Element, aber nicht von seinem Eltern-Element.

Diese Technik wird auf vielen Webseiten genutzt, denn auf den meisten Webseiten wurde früher die »normale« Schriftgröße ein wenig reduziert, um Inhalte kompakt darzustellen. Heute wird die Schriftgröße für die großen Monitore eher generell vergrößert.

Absolute vs. relative Schriftgrößen

EM erbt von seinem direkten Eltern- oder umfassenden Element, px erbt nichts.

Nach handfesten Pixeln, die für jedermann irgendwie intuitiv und fassbar sind, bereiten EM zuerst leichte Knoten in den Denkschleifen. Nehmen wir an, die Schriftgröße für das html-Element ist mit font-size: 110% schon generell leicht vergrößert.

main { font-size: 110% } vergrößert den Hauptbereich um weitere 10%, während .sidebar { font-size: 0.9em } alle Schriften dann wieder verkleinert … das klingt, als wären wir am äußeren Rand der Berechenbarkeit.

font-size in EM setzt die beiden Layout-Blöcke schnell und unkompliziert in ein Verhältnis zueinander. Mit font-size in px muss die Schriftgröße für jedes Element unterhalb von main bzw. von .sidebar einzeln angepasst werden.

html { font-size: 1.1em }
h4 {font-size: 1.4em; }
p { font-size: 1.1em; }
li { font-size: 0.9em }

main { font-size: 1.1em; }
.sidebar { font-size: 0.9em; }

html { font-size: 18px }
main h4 { font-size: 27px; }
main p { font-size: 21px; }
main li { font-size: 17px }

.sidebar h4 { font-size: 22px; }
.sidebar p { font-size: 17px; }
.sidebar li { font-size: 15px }

Kommen jetzt auch noch Änderungen an den Breakpoints hinzu, braucht nur eine Eigenschaft im Breakpoint für den großen Monitor überschrieben werden:

@media screen and (min-width: 1400px) {
    html { font-size: 1.28em}
}

Übrigens: Gleich, ob font-size in %, px, em oder rem angegeben wird: Der Abstand zwischen Überschriften wie h6 und Text in Absätzen mit dem p-Tag bleibt immer erhalten.

font-size, Inheritance und Cascading

Diese Technik spart Schreibarbeit im Stylesheet und verhindert manch einen Ausreißer. Doch der Effekt kann auch zurückschlagen – wer z.B. für das ul-Element eine Verkleinerung auf diesem Wege durchsetzen will, dem schlägt die Vererbung ein Schnippchen: Jedes tiefer verschachtelte Element erbt die CSS-Eigenschaft und die Listenelemente werden von Ebene zu Ebene immer kleiner.

Cascading und Vererbung (Inheritance) sind die häufigsten Fallen, wenn sich die Schriftgröße einfach nicht an die Vorgaben des Webdesigners anpassen will. Das beste Werkzeug für die Suche nach den Fehlern im CSS sind die Entwickler-Tools in der Browser-Konsole (rechte Maustaste und Element untersuchen oder Element-Informationen).

Welche CSS-Regeln wirken auf ein Element: Element untersuchen und Element-Informationen in der CSS-Console.

font-size in Prozent

EM oder % – das macht keinen Unterschied.

1em = 100% = 16px
0.773em = 77.3%

Die Angabe in % (ganzzahlig!) erlaubt feine Schrittweiten bei der Vergrößerung oder Verkleinerung um jeweils 1%. Am Ende muss der Browser aber sowohl EM als auch % wieder zu Pixeln umrechnen und runden.

Das W3C empfiehlt zwar »em« bzw. »rem«, aber die Empfehlung stammt noch aus der Zeit, als die Zoom-Funktion des Browsers zu Problemen führen konnte.

Früher konnte die Angabe der Schriftgröße im HTML- oder BODY-Element mit font-size: 110% zu Problemen führen, wenn der Benutzer den Zoom im Browser auf 200 oder 300% einstellte. Das hat sich heute durch das Aussterben der alten IE-Versionen erledigt.

px Pixel • Konsistente Schrift, feste UI-Elemente

px kann weiterhin für konsistentes border, padding und margin sorgen, skaliert aber nicht über Media Queries wie em / % / rem.

Sowohl relative Angaben wie em, % als auch absolute Angaben wie px haben Vor- und Nachteile. em/rem oder % für die Schriftgröße ist eine elegante Lösung, die viele Zeilen im CSS spart, während sich mit Schriftgrößen in px ein pixelgenaues Layout umsetzen lässt.