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 + b*vw)`) zwischen **min** und **max**.

Beispiel:

„`css
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: ``` preferred_px(W) = a_px + b * (W / 100) // da 1vw = W/100 px ``` Bedingungen: ``` preferred_px(Wmin) = Min preferred_px(Wmax) = Max ``` Daraus folgt: ``` b = 100 * (Max − Min) / (Wmax − Wmin) a_px = Min − b * (Wmin / 100) ``` **In CSS** setzen wir: ``` preferred = calc(a_rem + b * 1vw) a_rem = a_px / 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 a_px = 36 − 1.111 * (360 / 100) ≈ 36 − 4 ≈ 32px → a_rem = 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.111*3.6 ≈ 36px` ✓ * bei **1440px**: `32px + 1.111*14.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:**

„`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:**

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

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

„`css
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)

„`css
: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 `a_px/RootPx = a_rem` entsprechend um (z. B. bei 18px Root: `a_rem = a_px / 18`).

—

## 8) Quick‑Checkliste für Team

1. Lege Wunschwerte fest: `Wmin/Min`, `Wmax/Max`.
2. Rechne `b` und `a_px` aus (Formeln siehe §4), dann `a_rem = a_px / RootPx`.
3. Setze `font-size: clamp(MINrem, calc(a_rem + 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)

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

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

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

### „Mit Sicherheitsnetz für sehr kleine Screens“

„`css
@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.