rem & em – Grundlagen der Webtypografie mit relativen anstatt absoluten Einheiten

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.

Beispiel eines typografischen Systems mit verschiedenen Schriftgrößen in rem definiert.
Beispielbild eines typografischen Systems, erstellt über http://www.typescale.com

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.

Geschrieben von:

Jonas Hellwig

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Charleen Warkentin

Benutzerbild

Charleen absolviert bei kulturbanause ein Praktikum im Rahmen Ihrer Ausbildung zur Mediengestalterin. Sie begeistert sich für die Verbindung von kreativer Gestaltung und technischer Umsetzung und entwickelt ihre Fähigkeiten kontinuierlich weiter, um moderne und benutzerfreundliche Weblösungen zu gestalten. Sie sammelt u.a. praktische Erfahrungen im Team, arbeitet an Projekten mit und schreibt Inhalte für die Website.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Design + Code

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Schulung + Beratung