CSS font-size – EM oder REM

CSS: font-size Minimum

Für font-size schüttelt CSS mehr als 20 Maßeinheiten aus dem Ärmel. px, % und em sind vertraut, aber rem und vh vereinfachen Schriftgrößen in komplexen Layouts.

font-size EM

Die Charakteristik der verschiedenen Fonts drückt sich anhand der EM-Box aus: Die Box jeder Letter ist 1em hoch und 1em breit. Dieser Raum wird in Einheiten pro EM unterteilt und die Geometrie dieser Einteilung in der Font-Datei gespeichert.

Die wichtigsten Maße einer Schrift sind die Höhe der Unterlänge (z.B. für p und y), die x-Höhe (für das kleine x) und die Oberlänge, die sich an der Höhe des großen Buchstabens H orientiert.

EM-Box fontsize 1em

Per Vorgabe ist die voreingestellte Schriftgröße 1EM, und 1EM entspricht 16 Pixeln. EM ist heute die bevorzugte Einheit für font-size, denn die Elemente erben ihre Schriftgröße vom jeweiligen Elternelement und so lassen sich die Schriftgrößen für Überschriften, Absätze, Listen und Tabellenzellen einfach in Relation zueinander setzen und direkt mit nur einer Änderung im CSS ändern.

Schriftgröße REM

Genauso wie em entspricht 1rem ungefähr 16px und funktioniert wie em, aber bleibt relativ zum root-Element (html) der Seite statt relativ zum Eltern-Element.

REM wird i.d.R. nicht sehr oft eingesetzt, seine Aufgabe ist eher ein RESET, z.B. um konsistente Abstände ohne zusätzliches Markup zu erreichen.

Wenn z.B. Text in farbig unterlegten Boxen hervorgehoben wird, würde der Margin der Box mit der kleineren Schriftgröße entsprechend font-size: 0.75 ebenfalls kleiner ausfallen (margin und line-height stehen in Relation zur Schriftgröße).

html { font-size: 1.125em }
.box { 
    background: wheat;
    margin: 1.3em -1.3em 0 -1.3em;
    padding: 1em;
} 

.box.small { font-size: 0.75 }

Für konsistente Abstände könnten margin und padding ebenso gut in PX festgelegt werden, allerdings skalieren Pixel nicht automatisch mit den Media Queries wie EM und REM. Pixel müssten mit jedem Breakpoint überschrieben werden.

Ein anderes Beispiel für den Einsatz von REM vs EM: Die Falle für %- und EM-Angaben mit den schrumpfenden (oder wachsenden) Schriftgrößen durch die CSS-Kaskade könnten wir durch die Angabe vom REM vermeiden.

Mit font-size: 0.9em erbt jedes li die Verkleinerung von seinem umfassenden Element:

li {
  font-size: 0.9em
}
  • Rasanti flooter
  • Giganti maiscolbus
    • Goto Start
    • Goto to End
      • Craft labore wes photonicum
      • Ad vegan photografeur vice lomography

Mit font-size: 0.9rem wird das li ebenfalls kleiner, erbt aber direkt vom Root-Element:

li {
  font-size: 0.9rem
}
  • Rasanti flooter
  • Giganti maiscolbus
    • Goto Start
    • Goto to End
      • Craft labore wes photonicum
      • Ad vegan photografeur vice lomography

Für (sehr sehr) alte Browser wurde noch ein Fallback durch Pixel angelegt:

p, li { 
    font-size: 12px; 
    font-size: 0.9rem;
}

font-size mit Viewport-Units: vw, vh, vmin, vmax

Die Unwägbarkeiten der Schriftgrößen potenzieren sich mit dem responsiven Webdesign. Von einem großen Monitor halten wir einen größeren Abstand als von einem iPhone. CSS trägt dem Rechnung durch neue Werte für die Schriftgröße: vw, vh und vmin bzw. vmax. Eine Einheit vw bedeutet 1% der Viewport-Achse (Breite – vw oder Höhe – vh).

Schriftgröße mit vw an den Viewport anpassen Reprehenderit, enim high life mainus goethe ad squid. Reprehenderit, enim high life mainus goethe ad squid. Reprehenderit, enim high life mainus goethe ad squid. Reprehenderit, enim high life mainus goethe ad squid.
  • 1vw = 1% der Breite des Viewports
  • 1vh = 1% der Höhe des Viewports
  • 1vmin = 1vw oder 1vh, je nachdem, welcher Wert der kleinere ist
  • 1vmax = 1vw oder 1vh, je nachdem, welcher Wert der größere ist

Um einen Textblock ohne Zeilenumbruch an den Viewport anzupassen:

Reprehenderit, enim eiusmod high life mainus goethe ad squid.
1vw2vw 3vw 4vw 5vw
300px3px0.1875em6px0.375em 9px0.5625em12px0.75em15px0.9375em
400px4px0.25em8px0.5em 12px0.75em16px1em20px1.25em
600px6px0.375em12px0.75em18px1.125em24px1.5em30px1.875em
800px8px0.5em16px1em24px1.5em32px2em40px2.5em
1200px12px0.75em24px1.5em36px2.25em48px3em60px3.75em

Gut lesbare Schriftgrößen für alle Geräte: Use legible font sizes

H-Linie (Majuskelhöhe) x-Linie (x-Höhe) Grundline (Baseline) p-Linie line-height M Oberlänge Mittellänge Unterlänge