🔤 Schriftgrößen im Webdesign: px, rem, em & Co. einfach erklärt
Wenn du Webseiten mit DIVI oder einem anderen Page Builder erstellst, begegnen dir schnell verschiedene Einheiten wie px, em, rem oder vw. Was bedeuten sie – und wann solltest du welche Einheit verwenden?
📏 Absolute Einheiten
- px (Pixel): Feste Einheit, z. B.
16px. Gut für präzise Designs, aber wenig flexibel auf Mobilgeräten. - pt / cm / mm / in: Aus dem Printbereich – im Webdesign kaum relevant.
📐 Relative Einheiten
| Einheit | Bedeutung | Beispiel | Vorteil |
|---|---|---|---|
em |
Relativ zur Schriftgröße des Elternelements | 1.5em = 150 % |
Skaliert mit dem umgebenden Text |
rem |
Relativ zur Basisgröße des HTML-Dokuments | 1rem = 16px |
Ideal für konsistentes, responsives Design |
% |
Prozentwert, z. B. für Breiten oder Abstände | 50% |
Relativ zum übergeordneten Element |
vw / vh |
Viewport-Breite/-Höhe | 5vw = 5 % der Fensterbreite |
Spannend für große Texte, aber vorsichtig einsetzen |
✅ Empfehlung
- Nutze rem für Schriftgrößen – leicht skalierbar und gut kontrollierbar.
- em eignet sich gut für Abstände, da sie sich an den Kontext anpassen.
- Vermeide px für Texte, wenn du ein responsives Design möchtest.
- Für große, dynamische Überschriften kannst du experimentell vw nutzen.
💡 Beispiel für responsives CSS
h2 {
font-size: 2rem; /* Skaliert mit Basisgröße */
line-height: 1.4em; /* Passt sich dem Text an */
margin-bottom: 1rem;
}
🔧 In DIVI verwenden
In DIVI kannst du diese Einheiten direkt im Design-Tab eingeben. Klicke auf das Dropdown neben dem Eingabefeld (z. B. bei „Schriftgröße“) und wähle rem, em, etc.
Fazit: Wer moderne, responsive und barrierefreie Webseiten gestalten will, sollte auf relative Einheiten wie rem und em setzen. Sie machen dein Design flexibler – und deine Besucher werden es dir danken.
0 Kommentare