CSS font-size – Schriftgröße auf Webseiten

CSS: font-size Minimum

font-size legt die Schriftgröße absolut durch numerische Werte für Pixel (z.B. 16px) oder Punkt (12pt) oder relativ in Prozent (120%) oder em / rem fest. Für die Anpassung der Schriftgröße an die Größe des Viewports hat CSS3 auch noch vw und vh eingebracht. Dazu gibt es immer noch die alten Schlüsselwörter wie xx-large oder larger.

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.

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. Die Schriftgröße beim Benutzer 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)

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.

Elementfont-sizemarginline-height
p111.2
h12 1.34002.34
h21.51.24501.74
h31.171.16991.41
h411.33001.2
h50.831.38600.92
h60.671.56110.76
ul111.2
li101.2
table, td101.2
pre0.81250.81250.92
div
section …
101.2
input
button
0.68760.1250.8125

EM hat sich zur Standard-Maßeinheit für font-size entwickelt, darum geben die Browser-Konsolen 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.

Relative Schriftgrößen: EM, REM, %

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.

Main

3 sachsen moon officia aute, non cupidatat vegan maiscolbus dolor brunch. Flood boot quinoa nesciunt laborum rasanti.

  • Rasanti flooter
  • Giganti maiscolbus

Sidebar

Ruhrortus 3 high moon tempor, sunt aliqua put a kran on it squid quer-beet rheinarm nulla wachturm.

  • Goto Start
  • Goto to End

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.

EM: nur eine Eigenschaft in der Media Query ändern
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; }
PX: Alle Elemente neu berechnen
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.

  • Erste Ebene der ungeordenten Liste
  • Erste Ebene der ungeordenten Liste
    • Zweite Ebene der ungeordenten Liste
    • Zweite Ebene der ungeordenten Liste
      • Dritte Ebene der ungeordenten Liste
      • Dritte Ebene der ungeordenten Liste

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 ist die 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.

Elemente Ressourcen Timelines Speicher Konsole 73 ! <div class="excerpt"> <p>…</p> <p>…</p> </div> Stilattribut { } @media (min-width: 720px) font-size.html:119 .excerpt p:first-child { margin-top: 0; } @media (min-width: 720px) font-size.html:51 .entry-content p { font-size: 104%; } Geerbt von body font-size.html:32 body { padding: 0; margin: 0; line-height: 1.46; Knoten Stile Layer