CSS, HTML und Javascript mit {stil}

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

Schriftgröße, Media Querys und Layout in px oder ems

CSS bietet Schriftgrößen in einem Vielerlei 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.

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 einfach.

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

Relativ

em, ex, rem, %, 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 waren bis zum Erscheinen der mobilen Geräte und hochauflösender Monitore ein exaktes Maß. Für responsive Webseiten bevorzugen wir heute em und rem.

CSS Typografische Einheiten
EinheitBedeutung
emVertikale Größe der Schrift, relativ zur Schriftgröße des Eltern-Elements. Über den Daumen gepeilt kann 1em als 16 Pixel gerechnet werden.
exDie x-Höhe der Schrift, relativ zur Schriftgröße des Eltern-Elements
remfont-size wird immer relativ zum HTML-Element berechnet
vw1 vw = 1% der Breite des Viewports
vh1 vh = 1% der Höhe des Viewports
vmin1 vmin ist der kleinere Wert von 1vw und 1vh (der kleineren Seite)
vmax1 vmax ist der größere Wert von 1vw und 1vh (der größeren Seite)

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.

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.