Schriftgrößen und Maße für HTML-Seiten: Pixel, EM, REM, vw, %?

Schriftgröße px, ems

CSS bietet Schriftgrößen in einem bunten Potpourri von Maßeinheiten: von em über px bis %, relativ zur Größe des Viewports als vw bzw. vh oder als Schlüsselwort wie smaller, larger oder x-small, x-large. Auch die Breite und Höhe von Layoutblöcken oder Tabellen kann absolut in Pixel oder relativ in Prozentwerten geregelt werden.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Maße für Schriftgrößen, Breiten und Höhen

Das Vielerlei kommt dem responsiven Layout von Webseiten entgegen, aber das Verhältnis zwischen der Auflösung des Viewports und den Angaben von Breite, Höhe und Schriftgröße ist alles andere als entspannt.

CSS arbeitet mit Schriftgrößen in px, %, ems oder mit Schlüsselwörtern wie small oder larger.

Relativ

em, ex, rem, %, vh, vw, vmin, vmax, smaller, larger

Absolut

px, xx-small, x-small, small, medium, large, x-large, xx-large

Dazu kommen Maßeinheiten wie cm, inch, mm, pt und pc, die sich für die Wiedergabe auf dem Monitor nicht eignen, sondern für den Druck gedacht sind.

Responsive Schriftgrößen

px, em, ex, rem und % eignen sich für die Ausgabe auf dem Monitor am besten. px war bis zum Erscheinen der mobilen Geräte und hochauflösender Monitore ein exaktes Maß. Für responsive Webseiten bevorzugen wir heute em und rem.

%
relativ
Setzt die Schriftgröße auf einen Prozentsatz der Schriftgröße des Eltern-Elements. Über den Daumen gepeilt kann 1em als 16 Pixel gerechnet werden.
ch
relativ
Die 0-Breite (Null) der Schrift, relativ zur Schriftgröße des Eltern-Elements.
em
relativ
Vertikale Größe der Schrift, relativ zur Schriftgröße des Eltern-Elements. Über den Daumen gepeilt kann 1em als 16 Pixel gerechnet werden.
ex
relativ
Die x-Höhe der Schrift, relativ zur Schriftgröße des Eltern-Elements
large
absolut
Große Schrift
larger
relativ
Im Verhältnis zur Schriftgröße des Eltern-Elements größere Schrift
medium
absolut
Mittelgroße Schrift – Vorgabewert
px
absolut
Statischer Wert: Größe der Schrift in Pixeln
rem
relativ
font-size in rem wird immer relativ zum HTML-Element berechnet
small
absolut
Kleine Schrift
smaller
relativ
Im Verhältnis zur Schriftgröße des Eltern-Elements kleinere Schrift
vh
relativ
1 vw = 1% der Höhe des Viewports
vmin
relativ
1 vmin ist der kleinere Wert von 1vw und 1vh (der kleineren Seite)
vmax
relativ
1 vmax ist der größere Wert von 1vw und 1vh (der größeren Seite)
vw
relativ
1 vw = 1% der Breite des Viewports
x-large
absolut
1 vh = 1% der Höhe des Viewports
xx-large
absolut
Sehr große Schrift
x-small
absolut
Kleine Schrift
xx-small
absolut
Sehr kleine Schrift

vw und vh

vw und vh wirken auf den ersten Blick redundant, denn wir haben ja schon width: 50%. Auf der einen Seite können wir width und height nicht auf Schriftgrößen anwenden (font-size: 50% bezieht sich auf die Größe der Schrift und ist nicht relativ zur Größe des Viewports), auf der anderen Seite hat immer schon ein stabiles Maß für die Höhe des Browserfensters gefehlt.

Gerade Überschriften und Seitentitel müssen häufig durch viele Media Queries angepasst werden. vw passt z.B. die Schriftgröße an und berücksichtigt dabei die Größe des ViewPorts oder Browserfenster.

ch – Wie breit ist die Null?

Und noch ein ziemlich neues Maß: ch ist ein Maß für die Breite des Zeichens 0 des aktuellen Fonts. Nehmen wir eine nicht proportionale Schrift (alle Zeichen gleich breit) und setzen die Breite auf 70ch – width: 70ch –, wird die Breite des Blocks 70 Zeichen der aktuellen Schrift betragen. Bei Proportionalschriften sind die Zeichen unterschiedlich breit (ein i ist nichts gegen ein m), aber mit einer Breite von 70ch kommen wir einer optimalen Breite für die Lesbarkeit des Lauftexts näher als mit Angaben in em oder px.

Mehr zu ch Kleine Diskussion der Schriftgröße ch auf meyerweb.com

cap – Wie hoch ist der Großbuchstabe?

Und noch ein neues Maß: cap ist die Höhe der Versalien – Großbuchstaben – der Schrift.

READ THE MANUAL LUKE
READ THE MANUAL!
OBI WEB KENOBI

Das ist eine Maßeinheit für alle, die den Text in Spalten bündig an der oberen Kante halten wollen.

Ganz oben und ganz schön groß
Am oberen Rand, aber niedlich und klein
nebel-3-490

Absolute Einheiten

Absolute Größen in Zentimetern oder Millimetern sind für den Druck gedacht, denn CSS steuert auch den Druck der Webseite.

cm
Zentimeter
Absolut
Als Maßeinheit geeignet für den Druck.
in
Inch (2,54 Zentimeter)
Absolut
Als Maßeinheit geeignet für den Druck.
mm
Millimeter
Absolut
Als Maßeinheit geeignet für den Druck.
pt
Punkt (1/72 Inch)
Absolut
Typografische Maßeinheit, geeignet für den Druck.
pc
Pica. Ein Pica entspricht 12 Punkt.
Absolut
Typografische Maßeinheit, geeignet für den Druck.

Auflösung und Größe des Monitors

Da Auflösung und Größe der Monitore vom Smartphone über das Tablett bis zum 30"-Monitor immer weiter spannt, ist ein konsistentes Layout mit der Wahl der Schriftgrößen auf Media Querys angewiesen.

Media Querys basieren fast immer entweder auf Pixelbasis oder auf Basis von em. Die modernen Browser machen keinen Unterschied zwischen em-basierten and Pixel-basierten Media Queries – beide Techniken zoomen korrekt und beide Techniken verarbeiten Media Querys gleich schnell.

Die Angabe von em für die Abmessung von Layout-Elementen ist allerdings besonders flexibel. Wird ein Block in em angelegt, reicht schon eine CSS-Regel in der Media Query, um den Block proportional zu vergrößern.

header h1 {
  font-size: 1.2em;
  width: 9em;
  background-color: red;
  color:white; 
  padding: 0.5ex 1ex;
  box-sizing: border-box;
  line-height: 1.3em;
}

@media (min-width: 40em) {
  header h1 {
    font-size: 2.4em
  }
}

Der h1-Block wird immer proportional skaliert – d.h., in beiden Breakpoints wird der Text gleich weit laufen und an derselben Stelle umbrechen. Selbst wenn der Benutzer die Schriftgröße ändert, behält der Block die Proportionen und der Text wird nicht an einer anderen Stelle umbrechen.

Wenn die Schriftgröße des Elements in Pixeln angegeben würde, müsste der Block für jeden Breakpoint neu eingerichtet werden, gleich ob er in em oder Pixel notiert wäre.

Wollt ihr em oder wollt ihr Pixel?
AbkürzungAbsolut
Relativ
Typische Anwendung
px
Pixel
Absolut / Relativ
Ein Pixel beschreibt die kleinste Ausgabeeinheit eines Monitors und ist relativ von Ausgabegerät zu Ausgabegerät. Auf den einzelnen Monitor bezogen ist die Angabe von Pixeln ein absolutes Maß. Pixel sind ein geeignetes Maß, um Schriftgrößen und die Abmessungen von Elementen für den Monitor festzulegen.
Pixel sind unabhängig von der CSS-Kaskade.
em
EMS
Relativ
bezieht sich auf die Schriftgröße eines Elements. Für ein flexibles Layout, dass sich anpasst, wenn der Benutzer die Schriftgröße im Browserfenster ändert, ist em als Maßeinheit für Schriften und Layout-Boxen besser geeignet als Pixel.
em reagiert auf die CSS-Kaskade.
ex
EX
Relativ
wie EMS, aber ex steht für die Größe des Kleinbuchstabens in einem Element – i.d.R. also etwa die Hälfte von em.
%
Prozent
Relativ
Prozentangaben eignen sich besonders gut für die Ausgabe auf dem Monitor, wenn Layoutelemente an verschiedene Monitorgrößen angepaßt werden sollen.

Tatsächliche Größen prüfen

Elemente untersuchen ist heute eine Funktion in allen Browsern. Wenn wir also wissen wollen, wie groß, wie hoch oder breit ein Element ist, gibt die Konsole des Browsers nicht nur die aktuellen Maße heraus, sondern zeigt auch, wie Vererbung und CSS-Cascade zur aktuellen Größe geführt haben.

font-size: 1.2em;
width: 9em;
background-color: hsl(357, 70%, 60%);
color: white;
padding: 0.5ex 1ex;
box-sizing: border-box;
line-height: 1.3em;
margin: 1em auto;

Das Element hat einige Eigenschaften vom body-Element überschrieben und zusätzliche CSS-Eigenschaften vom body-Element geerbt

padding: 0;
margin: 0;
line-height: 1.46;
color: #5a5a5a;
font-size: 108%;
font-family: "Open Sans", sans-serif;
font-weight: 300