Form · T-12
Fluide Typoskala
Wählen Sie eine Grundgröße und ein Verhältnis für einen kleinen und einen großen Bildschirm. Kleurstaal rechnet die Stufen als clamp(), zeigt sie in der gewünschten Breite und warnt, wenn Zoomen nicht mehr reicht.
Ihre Dateien bleiben auf Ihrem Gerät
Fragen
Gut zu wissen
Was macht clamp() hier genau?
Es setzt eine kleinste Größe, eine größte Größe und dazwischen eine Gerade, die mit der Bildschirmbreite wächst. Unter der kleinen Breite bleibt der Text am kleinsten, über der großen am größten.
Warum ein rem-Anteil neben dem vw?
vw allein wächst beim Zoomen nicht mit, und WCAG 1.4.4 verlangt das. Der rem-Anteil sorgt dafür, dass Zoomen den Text weiter vergrößert. Wächst eine Stufe zwischen beiden Bildschirmen mehr als 2,5-fach, reicht Zoomen auf 200 Prozent nicht überall, und Kleurstaal warnt.
Welches Verhältnis wähle ich?
Auf dem Handy passt ein kleineres Verhältnis, etwa 1,2, weil große Titel schnell den Bildschirm füllen. Auf einem breiten Bildschirm darf es großzügiger sein, etwa 1,25 oder 1,333. Darum wählen Sie sie getrennt.
So funktioniert es
Fluide Typoskala in drei Schritten
Zwei Bildschirme
Wählen Sie Breite, Größe des Fließtexts und das Verhältnis zwischen den Stufen, für ein Handy und für einen breiten Bildschirm.
Breite verschieben
Die Vorschau zeigt jede Stufe in der gewählten Breite, wie sie auf so einem Bildschirm stünde.
Code mitnehmen
CSS-Variablen, ein Tailwind-4-Theme oder Design-Tokens in JSON, bereit zum Einfügen.