Der clamp()-Wert für 48–96px
Bei einem Viewport-Bereich von 320px bis 1280px lautet das Ergebnis clamp(3rem, 2rem + 5vw, 6rem). Pro 100px Viewport-Breite wächst die Größe um 5px und erreicht etwa 70,4px auf einem 768px-Tablet und 83,2px bei 1024px, bevor sie ab 1280px bei 96px bleibt.
Der bevorzugte Wert kombiniert einen festen rem-Anteil mit einem vw-Anteil. Der rem-Anteil hält den Text an die Browser-Schriftgröße der Leser gebunden, der vw-Anteil liefert das Wachstum. Ändere die Viewport-Felder oben, wenn dein Layout-Container früher oder später aufhört zu wachsen.
Wann 48px bis 96px passt
48 bis 96px ist Display-Typografie: riesige Hero-Titel, große Zahlen und plakative Statements. Setze sie sparsam ein, mit einer engen Zeilenhöhe um 1–1,1, und stelle sicher, dass dein längstes Wort auch in der kleinsten Größe passt.
Das Maximum ist das 2-Fache des Minimums und liegt damit innerhalb der 2,5×-Richtlinie, die oft für WCAG 1.4.4 Textgröße ändern herangezogen wird. Browser-Zoom vergrößert diese Größe also weiterhin vorhersehbar.
So entstehen die Zahlen
Steigung = (96 − 48) ÷ (1280 − 320) = 0,05, also 5vw. Achsenabschnitt = 48 − Steigung × 320 = 32px bzw. 2rem bei 16px Root-Schriftgröße. Diese beiden Zahlen bilden das mittlere Argument von clamp(); das erste und letzte Argument sind dein Minimum und Maximum, umgerechnet in rem.
Im eigenen Projekt verwenden
Füge den Wert in eine font-size-Deklaration ein, speichere ihn in einer Custom Property wie --fluid-size oder nutze die Tailwind-Klasse text-[clamp(3rem,2rem_+_5vw,6rem)]. Brauchst du einen ganzen Satz zusammengehöriger Größen, baut der Typo-Skala-Generator Stufen um eine Basisgröße mit demselben Viewport-Bereich.