Der clamp()-Wert für 20–32px
Bei einem Viewport-Bereich von 320px bis 1280px lautet das Ergebnis clamp(1.25rem, 1rem + 1.25vw, 2rem). Pro 100px Viewport-Breite wächst die Größe um 1,25px und erreicht etwa 25,6px auf einem 768px-Tablet und 28,8px bei 1024px, bevor sie ab 1280px bei 32px 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 20px bis 32px passt
20 bis 32px ist ein typischer Bereich für h3 und Abschnittsüberschriften. Auf dem Smartphone, wo Platz knapp ist, bleibt er kompakt, und in breiten Layouts wächst er zu einer klaren Abschnittsmarke.
Das Maximum ist das 1,6-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 = (32 − 20) ÷ (1280 − 320) = 0,0125, also 1,25vw. Achsenabschnitt = 20 − Steigung × 320 = 16px bzw. 1rem 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(1.25rem,1rem_+_1.25vw,2rem)]. Brauchst du einen ganzen Satz zusammengehöriger Größen, baut der Typo-Skala-Generator Stufen um eine Basisgröße mit demselben Viewport-Bereich.