Einheitliche, lesbare Titelgrößen – mit rem perfekt für alle Geräte
So optimierst du deine Blog-Typografie für Desktop, Tablet und Smartphone
Wer viele Blogbeiträge veröffentlicht, kennt das Problem: Auf einem Gerät sehen die Titel perfekt aus, auf einem anderen sind sie zu groß oder zu klein. Die Lösung: Schriftgrößen mit rem statt px definieren. Das skaliert sauber mit der Basis-Schriftgröße, ist barrierefreundlich und responsive.
Warum rem?
- Konsistenz über alle Geräte, Zoomstufen und Browser hinweg.
- Barrierefreiheit: Nutzerpräferenzen (z. B. größere Basis-Schrift) greifen sofort.
- Einfachheit: Einmal die Basisgröße festlegen, alles andere skaliert mit.
Empfohlene Schriftgrößen & Zeilenhöhen
Richtwerte für Blogs, Landingpages und Standard-Artikel.
| Element | Desktop | Tablet | Mobil | Zeilenhöhe |
|---|---|---|---|---|
| H1 | 2.8–3rem | 2.2–2.5rem | 1.7–2rem | 1.1–1.2 |
| H2 | 2.2–2.4rem | 1.7–2rem | 1.3–1.5rem | 1.2 |
| H3 | 1.6–1.8rem | 1.3–1.5rem | 1.1–1.2rem | 1.3 |
| H4 | 1.3–1.4rem | 1.1–1.2rem | 1rem | 1.3 |
| H5 | 1.1–1.2rem | 1rem | 0.95rem | 1.4 |
| Text | 1.1–1.15rem | 1rem | 0.95rem | 1.6–1.7 |
Abstände (Spacing)
- Absätze (
p):margin-bottom: 1.2–1.5em; - Überschriften oben (
margin-top):1.5em - Überschriften unten (
margin-bottom):0.7em(H1–H4), H5 etwas weniger
Divi-Tipp
Im Divi Builder hat jedes Typo-Feld ein kleines Geräte-Symbol. Damit legst du Desktop/Tablet/Mobil getrennt fest – ideal für feines Tuning ohne Custom CSS. :contentReference[oaicite:1]{index=1}
Option A: Global per CSS (Customizer → „Zusätzliches CSS“)
h1 { font-size: 2.8rem; line-height: 1.1; margin-top: 1.5em; margin-bottom: 0.7em; letter-spacing: 0em; color: #232323; }
h2 { font-size: 2.2rem; line-height: 1.2; margin-top: 1.5em; margin-bottom: 0.7em; }
h3 { font-size: 1.6rem; line-height: 1.3; margin-top: 1.5em; margin-bottom: 0.7em; }
h4 { font-size: 1.3rem; line-height: 1.3; margin-top: 1.5em; margin-bottom: 0.7em; }
h5 { font-size: 1.1rem; line-height: 1.4; margin-top: 1.5em; margin-bottom: 0.5em; }
body, p { font-size: 1.1rem; line-height: 1.7; color: #222; margin-bottom: 1.2em; }
a { color: #0077b6; }
a:hover { color: #023e8a; }Hinweis: Werte sind Richtwerte; feinjustiere je nach Schriftart/Layout. :contentReference[oaicite:2]{index=2}
Option B: Direkt im Divi Builder
- Modul öffnen → Design → Text/Heading.
- Schriftgröße auf die oben genannten
rem-Werte setzen (pro Gerät). - Zeilenhöhe, Letter-Spacing und Abstände einstellen.
- Speichern und im Frontend gegenprüfen.
Lesbarkeit & SEO – kurze Checkliste
- Nur ein H1 pro Seite.
- H2–H4 für klare Struktur & bessere Auffindbarkeit.
- Absätze nicht zu lang: ca. max. 80 Zeichen pro Zeile.
- Fettungen sparsam, gezielt einsetzen.
- Genügend Kontrast zwischen Text- und Hintergrundfarbe.
- Mobile/Tablet/Desktop getrennt kontrollieren.
Farbharmonien (Beispiel für Playfair Display)
- Klassisch: Text
#222, Akzent#A0522D, Links#0077b6(Hover#023e8a), Hintergrund#fff/#f8f8f8. - Modern: Text
#232323, Akzent#D4A373, Links#009688(Hover#00695c).
0 Kommentare