rem & em – Grundlagen der Webtypografie mit relativen anstatt absoluten Einheiten
Relative Einheiten in der Webtypografie sorgen dafür, dass weniger Code entsteht und das Layout flexibler ist. Sie sind daher Standard im professionellen Webdesign und Grundlage für barrierefreie Websites.

Die Wahl der richtigen typografischen Maßeinheiten spielt eine zentrale Rolle bei der Gestaltung von Websites. Sie haben nicht nur Auswirkungen auf das Aussehen der Website, sondern auch auf Usability und Barrierefreiheit. Wir erklären die gängigen Einheiten im Zusammenhang mit Schrift im Web und zeigen Unterschiede zwischen absoluten und relativen Einheiten auf.
Absolute Einheiten
Absolute Einheiten haben feste, unveränderliche Werte und eignen sich vor allem für exakte, starre Layouts, beispielsweise für Druckerzeugnisse oder Grafiken. Sie sind jedoch nicht abhängig von der Gestaltung anderer Elemente und daher im Webdesign begrenzt sinnvoll.
Pixel (px)
Pixel ist die am häufigsten genutzte absolute Einheit im Web. Sie bietet hohe Präzision, ist aber statisch und reagiert nicht auf unterschiedliche Bildschirmgrößen oder Benutzereinstellungen. Für typografische Zwecke ist die Verwendung von Pixeln im Webdesign daher nicht empfehlenswert.
Punkt (pt)
Ein Punkt entspricht 1/72 Zoll und stammt ursprünglich aus der Drucktypografie. Angaben in Punkt entstehen meist, durch die Übertragung von Print-Informationen ins Web – z.B. aus einem Layoutprogramm wie InDesign. Im Webdesign hat die Einheit keine nennenswerte Relevanz und sollte vermieden werden.
Absolute Einheiten wie Zoll/Inch (in
), Zentimeter (cm
) oder Millimeter (mm
) sind auf physische Maße abgestimmt und passen sich nicht an die dynamischen Anforderungen digitaler Medien an. Allerdings können sie in CSS Print Layouts sinnvoll zum Einsatz kommen.
Relative Einheiten
Relative Einheiten orientieren sich an ihrer Umgebung, wie beispielsweise der Schriftgröße eines Eltern-Elements oder der Basis-Schriftgröße des Browsers. Dadurch sind sie ideal für flexible und responsive Designs und Standard für die typografische Nutzung im Web.
Die Basisschriftgröße des Browsers beträgt in der Regel 1em
, was optisch 16px entspricht. Von diesem Standardwert leiten sich alle Abstände und Schriften des typografischen Stylings ab. So hat beispielsweise ein Absatz (<p>
) eine Schriftgröße von 1em
(16px), während Überschriften-Tags wie <h1>
mit 2em
(32px) oder <h2>
mit 1.5em
(24px) ein Vielfaches der Basisgröße erhalten. Die Standardschriftgröße des Browsers bildet also den Ausgangspunkt für die typografische Hierarchie und den gesamten Aufbau der Schrift- und Abstandsgrößen einer Website.
Im Browser kann die Standard-Schriftgröße angepasst werden. 1em
entspricht dann nicht mehr 16px. Websites, die mit relativen Einheiten gestaltet wurden, passen sich automatisch diesen Änderungen an und verbessern dadurch die Usability. Für barrierefreie Websites ist diese Reaktion auf Browser-Einstellungen ein Pflichtkriterium.
Equal to m (em)
Die Einheit em
bezieht sich im CSS auf die Schriftgröße des direkten Eltern-Elements.
Beispiel: Wenn ein Element eine Schriftgröße von 1.5em
hat und in einem anderen Element liegt, dessen Schriftgröße bereits auf 1.2em
eingestellt ist, wird die Schriftgröße des inneren Elements 1.2em
× 1.5em
= 1.8em
der Basisgröße betragen.
html {
/* Schriftgröße Basis = 1em = 16px */
}
.parent {
font-size: 1.2em; /* 16 (Basis) x 1,2 = 19,2px */
}
.child {
font-size: 1.5em; /* 16 (Basis) x 1.2 (Parent) x 1,5 = 28,8px */
}
Die Maßeinheit em
bietet Skalierbarkeit innerhalb von verschachtelten HTML Elementen und ermöglicht so eine dynamische Größenanpassung innerhalb eines Containers. Wenn beispielsweise alle Texte im Footer oder alles in der Seitenleiste proportional kleiner werden soll, dann ist em
eine sinnvolle Wahl.
Diese Vererbung der Schriftgröße kann jedoch schnell unübersichtlich werden. Sie macht es schwierig, die tatsächliche Größe eines Elements vorherzusagen oder zu berechnen. Sehr sperrig ist em
daher, wenn ein vorgegebenes Design exakt umgesetzt werden soll.
Root equal to m (rem)
Die Einheit rem
bezieht sich auf die Schriftgröße des Root, also des html
-Elements, unabhängig von verschachtelten Strukturen der Datei. In den meisten Browsern ist diese auf 16px
voreingestellt, kann jedoch im Code oder im Browser individuell definiert werden.
Wird die Standardschriftgröße des Browsers bei 16px
belassen, entspricht 1rem eben diesen 16px
, 2rem
ergeben dementsprechend eine Größe von 32px
.
html {
/* Schriftgröße Root = 1rem/1em = 16px */
}
.parent {
font-size: 1.2rem; /* 16 x 1,2 = 19,2px */
}
.child {
font-size: 1.5rem; /* 16 x 1,5 = 24px */
}
Typografische Systeme für Websites erstellen
In der Gestaltung von Webseiten ist es eine bewährte Praxis, alle typografischen und layoutbezogenen Werte auf der Basis-Schriftgröße aufzubauen und Überschriften sowie kleinere Texte von dieser Basis abzuleiten. Das Ergebnis wird »Typografisches System« genannt.
Die Nutzung solcher Systeme trägt dazu bei, Webseiten leserfreundlich, barrierefrei und optisch ansprechend zu gestalten. Gleichzeitig steigert es die Effizienz von Entwicklern und Designern, da auf vordefinierte Werte zurückgegriffen werden kann und ein gemeinsames Verständnis der Design Systematik besteht. Ihr solltet darauf achten, eine klare Hierarchie zu schaffen – die Unterschiede zwischen den verschiedenen Schritten sollte gut erkennbar sein.

Ein typografisches System verwendet meist eine einheitliche Skalierung, um die Schriftgrößen auf harmonische Weise zu vergrößern oder zu verkleinern. Die Schriftgrößen werden dabei z.B. mit dem Verhältnis 1.25, 1.33 oder 1.5 der vorherigen Schriftgröße verkleinert bzw. vergrößert. Diese Systematik ist sowohl mit rem
als auch mit em
gut abbildbar.
Zum Anlegen eines typografischen Systems empfehlen wir euch, spezielle Tools wie das von Typescale, oder für fluide Schriftgrößen den Type Scale Generator zu nutzen. Solltet ihr das System selbst erstellen wollen, ist es wichtig, immer von der Basis-Schrift auszugehen und dann von unten, beginnend bei der <h6>
, weiter hochzugehen, wie in unserem obigen Beispiel zu sehen.
Weitere Einheiten
Zeilenlänge (ch)
Die Einheit ch
(Character) basiert auf der Breite des Zeichens »0« in der gewählten Schriftart. Sie ist hilfreich für typografische Layouts und zur Definition von Breiten – beispielsweise bei maximalen Zeilenlängen oder Eingabefeldern.
Viewport-Breite (vw, vi)
Die Einheit vw
(Viewport Width) entspricht 1% der Breite des Viewports, also dem sichtbaren Bereich des Browsers. Sie wird häufig für responsive Designs und proportional skalierende Schrift oder fluide typografische Systeme genutzt.
Viewport Inline (vi
) entspricht 1% der Inline-Achse des Viewports und orientiert sich an der Schreibrichtung. Die Bestimmung von Höhen und Breiten anhand der Leserichtung und nicht anhand räumlicher Bezugspunkte ist Teil der Logical Properties von CSS.
Container-Breite (cqw, cqi)
Die Einheiten cqw
steht für 1% der Breite des umschließenden Containers (siehe Container Queries). Auch hier gibt es moderne Schreibweisen mit Logical Properies: Container Query Inline (cqi
) basiert auf der Inline-Achse des Containers.