Codekeks

Typo‑Guide: Fluid Headings

Typo‑Guide: Fluid Headings mit clamp() (Kurz‑Doku)

Diese Mini‑Doku erklärt, wie clamp() für flüssig skalierende Überschriften funktioniert, wie man Werte berechnet, und wie man Headlines auf dem Handy gezielt größer bekommt. Alle Beispiele sind in px/rem und vw gehalten (1 rem = 16 px, sofern nicht anders konfiguriert).

1) Was macht clamp(min, preferred, max)?

clamp() begrenzt einen dynamischen preferred‑Wert (z. B. calc(a + bvw)) zwischen min und max.

Beispiel:

h1 { font-size: clamp(2rem, 1.2rem + 2vw, 3rem); }
  • min = 2rem (32 px): darunter fällt die Größe nie
  • preferred = 1.2rem + 2vw: wächst mit der Viewport‑Breite
  • max = 3rem (48 px): darüber wächst die Größe nicht mehr

Auf kleinen Screens greift häufig min, auf sehr großen max; dazwischen wirkt die preferred‑Formel.

2) Einheiten‑Basics

  • rem: relativ zur Root‑Schriftgröße (oft 16 px) → stabiler, gut für Mindest/Max‑Werte.
  • vw: 1 vw = 1 % der Viewport‑Breite. Auf 360 px Breite sind 1 vw = 3.6 px; auf 1440 px Breite sind 1 vw = 14.4 px.

3) Warum ist die H1 auf dem Handy „zu klein“?

Wenn der preferred‑Term (z. B. 1.2rem + 2vw) auf kleinen Viewports rechnerisch unter min liegt, greift immer der min‑Wert. Beispiel bei 360 px Breite:

  • 1.2rem + 2vw → 19.2px + 7.2px = 26.4px < 32px → Ergebnis = 32px (min) Lösung: Entweder min anheben oder den preferred‑Term steiler machen (größere vw‑Komponente / anderer Offset) – siehe Rezepte unten. — ## 4) Die „saubere Mathematik“ für flüssige Skalen Ziel: Wir wollen, dass die Schrift von Min px bei Wmin px Viewport auf Max px bei Wmax px Viewport linear wächst. Wir suchen eine Formel der Form: „ preferredpx(W) = apx + b (W / 100) // da 1vw = W/100 px ` Bedingungen: ` preferredpx(Wmin) = Min preferredpx(Wmax) = Max ` Daraus folgt: ` b = 100 (Max − Min) / (Wmax − Wmin) apx = Min − b (Wmin / 100) ` In CSS setzen wir: ` preferred = calc(arem + b 1vw) arem = apx / 16 // wenn 1rem = 16px ` ### Beispiel‑Herleitung Wähle: Wmin = 360px, Min = 36px (2.25rem) Wmax = 1440px, Max = 48px (3rem) Berechnung: ` b = 100 (48 − 36) / (1440 − 360) = 100 12 / 1080 ≈ 1.111vw apx = 36 − 1.111 (360 / 100) ≈ 36 − 4 ≈ 32px → arem = 2rem ` Ergebnis (preferred‑Term): calc(2rem + 1.111vw) Komplette Regel mit Klammer: `css h1 { font-size: clamp(2.25rem, calc(2rem + 1.111vw), 3rem); } ` Prüfung: bei 360px: 32px + 1.1113.6 ≈ 36px ✓ bei 1440px: 32px + 1.11114.4 ≈ 48px ✓ > Tipp: Nutze deine realen Breakpoints (z. B. 320/375/390/768/1280/1440) und Wunschgrößen, um b und a` exakt zu bestimmen.

5) Rezepte

A) Mobile spürbar größer (ohne Media Query)

Wunsch: Auf 360 px schon 40px statt 36px, Deckel bleibt 48px bei 1440 px.

Wmin=360, Min=40, Wmax=1440, Max=48
b = 100*(48-40)/(1440-360) = 800/1080 ≈ 0.741vw
a_px = 40 − 0.741*(360/100) ≈ 40 − 2.668 = 37.332px → a_rem ≈ 2.333rem

CSS:

h1 { font-size: clamp(2.5rem, calc(2.333rem + 0.741vw), 3rem); }

(Min auf 2.5rem ≈ 40px leicht aufrunden, wirkt sauberer.)

B) Gleiches Minimum, steiler ansteigen

Behalte 36px bei 360 px, aber steilere Kurve bis 56px bei 1920 px.

Wmin=360, Min=36, Wmax=1920, Max=56
b = 100*(56-36)/(1920-360) = 2000/1560 ≈ 1.282vw
a_px = 36 − 1.282*(360/100) ≈ 36 − 4.615 = 31.385px → a_rem ≈ 1.961rem

CSS:

h1 { font-size: clamp(2.25rem, calc(1.961rem + 1.282vw), 3.5rem); }

C) Mit Media Query feintunen (harte Mobil‑Vorgabe)

h1 { font-size: clamp(2.25rem, calc(2rem + 1.111vw), 3rem); }
@media (max-width: 480px) {
h1 { font-size: 2.75rem; } /* ~44px erzwingen */
}

6) Projekt‑Vorlage (mit Variablen)

:root {
/* Viewport-Ankerpunkte */
--vw-min: 360; /* px */
--vw-max: 1440; /* px */

/* H1 Zielgrößen */
--h1-min-px: 36; /* px */
--h1-max-px: 48; /* px */

/* abgeleitete Werte (manuell berechnet/gesetzt) */
--h1-b: 1.111vw; /* Steigung b */
--h1-a-rem: 2rem; /* Achsenabschnitt a als rem */
--h1-min: 2.25rem; /* Klammer-Min */
--h1-max: 3rem; /* Klammer-Max */
}

h1 { font-size: clamp(var(--h1-min), calc(var(--h1-a-rem) + var(--h1-b)), var(--h1-max)); }

> Für andere Headings (H2/H3 …) wiederhole die Herleitung mit neuen Zielwerten.

7) Troubleshooting

  • „Auf Mobile zu klein“ → --h1-min erhöhen oder die Kurve steiler machen (größeres b), oder Media Query ergänzen.
  • „Skaliert zu früh auf Max“ → Entweder Max anheben oder Wmax vergrößern und b/a neu berechnen.
  • „Text wirkt zu wuchtig“ → line-height leicht erhöhen (z. B. 1.25–1.3) und Seitenabstand (margin) prüfen.
  • „Root‑rem nicht 16px“ → Rechne apx/RootPx = arem entsprechend um (z. B. bei 18px Root: arem = apx / 18).

8) Quick‑Checkliste für Team

  1. Lege Wunschwerte fest: Wmin/Min, Wmax/Max.
  2. Rechne b und apx aus (Formeln siehe §4), dann arem = apx / RootPx.
  3. Setze font-size: clamp(MINrem, calc(arem + b*1vw), MAXrem).
  4. Teste bei echten Breakpoints (360, 390/393, 768, 1280, 1440, 1920).
  5. Falls Mobile zu klein: MIN erhöhen oder Media Query.

9) Copy‑&‑Paste Standardsnippets

„Solide Default‑H1“ (36 → 48px über 360 → 1440px)

h1 { font-size: clamp(2.25rem, calc(2rem + 1.111vw), 3rem); }

„Mobile‑freundliche H1“ (40 → 48px über 360 → 1440px)

h1 { font-size: clamp(2.5rem, calc(2.333rem + 0.741vw), 3rem); }

„Mit Sicherheitsnetz für sehr kleine Screens“

@media (max-width: 340px) {
h1 { font-size: 2.5rem; }
}

Hinweis: Dieselbe Methode gilt für H2/H3/Body – skaliere einfach die Zielwerte. Für Body‑Text empfiehlt sich meist weniger vw (z. B. nur 0.2–0.4 vw) oder komplett feste rem‑Werte.