Der clamp()-Wert für 14–16px
Bei einem Viewport-Bereich von 320px bis 1280px lautet das Ergebnis clamp(0.875rem, 0.8333rem + 0.2083vw, 1rem). Pro 100px Viewport-Breite wächst die Größe um 0,21px und erreicht etwa 14,9px auf einem 768px-Tablet und 15,5px bei 1024px, bevor sie ab 1280px bei 16px 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 14px bis 16px passt
Ein Bereich von 14 bis 16px eignet sich für sekundären Text: Bildunterschriften, Formularhinweise, Tabellenzellen, Fußnoten und dichte Navigation. Die Änderung ist dezent – auf dem Desktop wird der Text etwas angenehmer, ohne auf dem Smartphone mehr Platz zu brauchen. Kombiniere ihn mit 16–18px Fließtext für eine klare Hierarchie.
Das Maximum ist das 1,14-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 = (16 − 14) ÷ (1280 − 320) = 0,0021, also 0,2083vw. Achsenabschnitt = 14 − Steigung × 320 = 13,33px bzw. 0,8333rem 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(0.875rem,0.8333rem_+_0.2083vw,1rem)]. Brauchst du einen ganzen Satz zusammengehöriger Größen, baut der Typo-Skala-Generator Stufen um eine Basisgröße mit demselben Viewport-Bereich.