CSS font-size – EM oder REM

CSS: font-size Minimum

Die Schriftgröße gehört zu den wichtigsten Aspekten der Benutzerschnittstelle. Für font-size schüttelt CSS mehr als 20 Maßeinheiten aus dem Ärmel.

px, % und em sind vertraut: px wird vor allem für die Maße von Layout-Element eingesetzt, em für Schriftgrößen. Darüber gibt es dann noch rem und vh, die Schriftgrößen und Layout-Elemente in komplexen Layouts in Einklang bringen.

Die EM-Box

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.

font-size EM

em wird meist als Maßeinheit für Text eingesetzt. Per se – bevor CSS irgendwelche Schriftgrößen anfasst, liegen die Schriftgrößen auf Webseiten in geregelten Verhältnissen zueinander:

Sieht man sich die Stile in der Console des Browsers an – z.B. in Chrome – sieht man, warum h1 so groß ist.

h1 {                 // user agent stylesheet
   display: block;
   font-size: 2em;
   margin-block-start: 0.67em;
   margin-block-start: 0.67em;
	…
}

Die Größe aller Elemente richtet sich an ihrem Eltern-Element aus. Wenn gar keine Schriftgrößen explizit gesetzt werden, entspricht 1em der Angabe von 16px. h1 ist 2em – 2 mal so groß, also 32px.

Hätte das body-Element eine Schriftgröße von 12px, hätte ein h1-Element, das direkt innerhalb von body sitzt, mit <h1 style="2em"> eine Schriftgröße von 24px. em wirkt also wie ein Faktor: 3em ist dreimal so groß wie die Schriftgröße des Parent-Elements, 0.5em halb so groß.

<body style="font-size: 12px">
   <h1 style="2em">

</body>

So schön dieses System auf den ersten Blick wirkt, birgt es eine Falle. Die Elemente erben die Schriftgröße nicht von body, sondern von ihrem Elternelement. Liegt das h1 nicht direkt in body, sondern z.B. in einem div mit eigener Schriftgröße

<body style="font-size: 1.2em">
   …
   <div style="font-size: 1.3em">

      <h1 style="font-size: 2em"> … </h1>
 
   </h1>
</body>

Da beginnt die wundersame Schriftgrößenvermehrung. body font-size 1.2em vergrößert die Schrift im div-Element schon um den Faktor 1.2, das div-Element steuert den Faktor 1.3 hinzu und ein unschuldig wirkendes font-size: 2em im h1-Element ist um den Faktor 3,12 größer als die Basis-Schriftgröße von 16px. h1 wird also 49,92 px groß.

Wird em nicht nur für die Schriftgröße, sondern auch für padding und margin eingesetzt, kommt ein weiterer Komplexitätsfaktor ist Spiel: padding: 1em bei einem p-Element von 1em ist ein anderer Wert als 1em bei einem h1-Element mit font-size: 2em.

h1, 
p { 
   padding-left:2em; 
   margin-left: 1em;
}

Ich bin ein h1-Element

Ich bin ein kleines p-Element

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