Die EM-Box
Die Schriftgröße gehört zu den wichtigsten Aspekten des Webdesigns. Für font-size schüttelt CSS mehr als 20 Maßeinheiten aus dem Ärmel.
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.
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 im rem und 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
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).
- 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:
1vw | 2vw | 3vw | 4vw | 5vw | |
---|---|---|---|---|---|
300px | 3px0.1875em | 6px0.375em | 9px0.5625em | 12px0.75em | 15px0.9375em |
400px | 4px0.25em | 8px0.5em | 12px0.75em | 16px1em | 20px1.25em |
600px | 6px0.375em | 12px0.75em | 18px1.125em | 24px1.5em | 30px1.875em |
800px | 8px0.5em | 16px1em | 24px1.5em | 32px2em | 40px2.5em |
1200px | 12px0.75em | 24px1.5em | 36px2.25em | 48px3em | 60px3.75em |
Damit die Schrift auch auf allen Monitoren gut lesbar bleibt, ist das Metatag für den Viewport der mobilen Geräte fundamental. Ohne richtig konfigurierten Viewport wird die Schrift auf den mobilen Geräten verkleinert.
Wenn ein Teil der Seite auf mobilen Geräten eine zu kleine Schrift aufweist, beeinträchtigt das auch das Ranking der Seite in den Suchmaschinen: Document doesn't use legible font sizes.