Verbindung fehlgeschlagen. Bitte versuchen Sie es erneut.

Zum Inhalt springen
SEO Tools
Hilfe und Dokumentation
UX / UI Geringe Auswirkung Mittel 30–60 Min.

Relative Schrifteinheiten (rem/em vs. px)

Bevorzuge rem/em vor festen px bei Schriftgrößen.

Was es ist

Die Schriftgröße lässt sich fest in px oder relativ in rem/em angeben. Rem geht von der Grundgröße des Dokuments aus und reagiert daher auf die Schriftgrößeneinstellung des Nutzers im Browser.

Warum es wichtig ist

Feste px ignorieren es, wenn der Nutzer im Browser die Standardschrift vergrößert (häufig bei Menschen mit schwächerem Sehvermögen). Rem/em respektieren diese Einstellung — sie sind zugänglicher und lassen sich leichter konsistent skalieren.

So geht's

  1. 1Setze die Grundgröße am <html> (typischerweise 100% = 16px).
  2. 2Gib Schriftgrößen in rem an (z. B. 1rem, 1.25rem, 0.875rem).
  3. 3Verwende em dort, wo die Größe vom Elternelement ausgehen soll.
  4. 4Belasse feste px nur für Details, bei denen Skalierung keinen Sinn ergibt (z. B. 1px-Linien).

Beispiel

Falsch
h1 { font-size: 32px; }
p  { font-size: 14px; }
Richtig
html { font-size: 100%; }
h1 { font-size: 2rem; }
p  { font-size: 0.95rem; }

Fazit

Relative Einheiten sind zugänglicher und wartbarer. Es ist kein Notfall wie ein blockierter Zoom, aber bei einer neuen Website lohnt es sich, es gleich richtig über rem zu machen. Das respektiert Nutzer, die sich die Schrift vergrößern.

Verwandte Themen