CSS clamp generator für fluide Typografie
Dieser CSS clamp generator macht aus fünf Zahlen einen Block CSS-Variablen, eine pro Schriftgröße, jeweils als clamp() mit rem- und vw-Anteil. Sie tragen den Viewport-Bereich, die Basisgröße an beiden Enden und einen Skalierungsfaktor ein, und jede Stufe von --text-xs bis --text-4xl wächst stufenlos mit der Bildschirmbreite, ganz ohne Media Queries. Nichts wird hochgeladen: Das CSS entsteht in Ihrem Browser.
Fluid type scale erzeugen: So gehen Sie vor
Oben stehen fünf Felder. Min. Viewport (Standard 320) und Max. Viewport (Standard 1200) sind die Bildschirmbreiten in Pixeln, bei denen die Schrift am kleinsten und am größten ist. Min. Basisgröße (16) und Max. Basisgröße (20) geben die Größe des Fließtexts an diesen beiden Breiten an. Der Skalierungsfaktor (1,25) legt fest, wie stark jede Stufe gegenüber der darunterliegenden wächst. Jedes Feld hat ein Zahlenfeld und einen Schieberegler.
- Tragen Sie den Viewport-Bereich ein.
- Tragen Sie die Basisgrößen für schmale und breite Bildschirme ein.
- Wählen Sie den Skalierungsfaktor.
- Das CSS-Feld darunter aktualisiert sich beim Tippen, einen Absenden-Knopf gibt es nicht. Sieht das Ergebnis richtig aus, klicken Sie auf CSS kopieren und fügen den :root-Block in Ihr Stylesheet ein.
Ist ein Feld unbrauchbar, erscheint an seiner Stelle eine Meldung: Der maximale Viewport muss größer sein als der minimale, die maximale Basisgröße größer als die minimale, der Faktor mindestens 1 und jede Zahl größer als 0. Eine Stufe verwenden Sie dann überall, wo Sie eine Größe setzen, zum Beispiel so: h1 { font-size: var(--text-3xl); }
Vorschau bei jeder Bildschirmbreite
Unter Vorschau ziehen Sie den Regler Vorschaubreite zwischen dem minimalen und dem maximalen Viewport. Jede Stufe erscheint als Beispielzeile „Schrift, die sanft mitwächst“ in der Größe, die sie bei dieser Breite annimmt, dazu der Variablenname und die Größe in Pixeln, die größte Stufe oben.
So beurteilen Sie den Abstand zwischen Fließtext und Überschriften auf einem kleinen Smartphone ebenso wie auf einem breiten Desktop-Monitor, bevor Sie irgendetwas kopieren.
So berechnet der Generator die clamp()-Werte
Für jede Stufe ermittelt das Tool die Größe am schmalen Ende (Min. Basisgröße mal Faktor hoch Stufe) und am breiten Ende (Max. Basisgröße mal dieselbe Potenz). Durch beide Punkte legt es eine Gerade: Die Steigung ist die Größenänderung geteilt durch die Änderung der Viewport-Breite, der Achsenabschnitt die Mindestgröße minus Min. Viewport mal Steigung. Die Steigung wird zum vw-Anteil, der Achsenabschnitt zum rem-Anteil, und die beiden Endgrößen sind Minimum und Maximum von clamp(). Alle Werte sind auf 4 Nachkommastellen gerundet.
Mit den Standardwerten ergeben sich bei 320, 760 und 1200 px diese Größen:
- --text-sm: 12,8 / 14,4 / 16 px
- --text-base: 16 / 18 / 20 px
- --text-lg: 20 / 22,5 / 25 px
- --text-xl: 25 / 28,13 / 31,25 px
Warum rem und vw statt px?
Eine Größe, die nur in vw angegeben ist, ignoriert die Schriftgröße, die Besucher im Browser eingestellt haben, und wächst beim Zoomen nicht mit. Weil jede Zahl hier in einen rem-Anteil und einen vw-Anteil aufgeteilt wird, folgt die Schrift weiterhin der Basisschriftgröße des Nutzers und lässt sich zoomen. Das hilft Menschen, die größere Schrift brauchen. Das Tool gibt nie px aus.
Setzt Ihre Website html { font-size: 62.5% } oder eine andere Wurzelgröße als 16 px, öffnen Sie Erweitert und passen die Root-Schriftgröße an, damit 1rem stimmt.
Viewports, Basisgrößen und Skalierungsfaktor wählen
Der Standardbereich von 320 bis 1200 reicht vom kleinen Smartphone bis zum Laptop. Wählen Sie als Max. Viewport die größte Breite, bei der die Schrift noch wachsen soll, denn darüber bleibt sie auf dem Maximum. Für Fließtext ist die Paarung 16 px und 20 px üblich. Der Faktor bestimmt den Charakter der Skala:
- 1,2 (kleine Terz): sanfte, enge Stufen
- 1,25 (große Terz): ausgewogener Standard
- 1,333 (Quarte): deutlicher Kontrast
- 1,5 (Quinte): dramatische Überschriften
- 1,618 (Goldener Schnitt): sehr große Sprünge
Bei einem Faktor von 1 sind alle Stufen gleich groß. Der Faktor gilt an beiden Enden, die Skala hat also bei 320 px und bei 1200 px dieselben Proportionen; nur die Basisgröße ändert sich.
Unter Erweitert legt der Variablen-Präfix (Standard --text) den Namen aller Eigenschaften fest. Stufennamen wechselt zwischen sm, lg, xl (--text-sm, --text-base, --text-lg und so weiter) und -1, 1, 2 (--text--1, --text-0, --text-1 und so weiter). Kleinere Stufen (0 bis 4, Standard 2) und Größere Stufen (0 bis 8, Standard 5) bestimmen, wie viele Größen unter und über der Basis liegen.
Was dieser Generator nicht kann
Er erzeugt nur die Schriftskala. Es gibt keinen Export für Tailwind oder andere Formate, keine Überschreibungen pro Stufe, keinen getrennten Faktor für das schmale und das breite Ende und keine Ausgabe in px.
Häufige Fragen
Was ist eine fluid type scale?
Eine fluid type scale ist eine Reihe von Schriftgrößen, die gleichmäßig mit der Bildschirmbreite wachsen, statt an Breakpoints zu springen. Jede Stufe, etwa klein, Basis, groß und extragroß, bekommt eine Mindestgröße für schmale und eine Höchstgröße für breite Bildschirme, dazwischen folgt die Größe einer Geraden. Der Generator schreibt jede Stufe als CSS-Variable, die Sie auf der ganzen Website wiederverwenden können.
Wie verwende ich clamp() in CSS für die Schrift?
clamp(min, ideal, max) nimmt drei Werte. Der Browser verwendet den idealen Wert, geht aber nie unter das Minimum oder über das Maximum. Bei Schrift besteht der ideale Wert aus einem rem- und einem vw-Anteil, zum Beispiel clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem). Legen Sie das in einer Variablen ab und schreiben Sie dann überall font-size: var(--text-base).
Wie mache ich die Schriftgröße in CSS responsiv?
Legen Sie die Größen einmal als clamp()-Variablen fest, dann passt sich die Schrift beim Ändern der Fenstergröße stufenlos an, ganz ohne Media Queries. Stellen Sie „Min. Viewport“ und „Max. Viewport“ auf die Breiten für kleinste und größte Schrift, setzen Sie „Min. Basisgröße“ und „Max. Basisgröße“ und kopieren Sie das CSS. Unterhalb des minimalen Viewports bleibt die Schrift auf der kleinsten Größe, oberhalb des maximalen auf der größten.
Warum funktioniert meine clamp()-Schriftgröße nicht?
Meist fehlt bei einem Wert die Einheit, es fehlen Leerzeichen um das Pluszeichen in clamp(), das Minimum ist größer als das Maximum, oder der ideale Wert steht nur in vw und ignoriert damit die Schrifteinstellung des Nutzers. Die erzeugten Zeilen vermeiden alle vier Fehler: Jeder Wert hat eine Einheit, das Pluszeichen ist von Leerzeichen umgeben, und das Minimum ist immer kleiner als das Maximum.
Arbeitet der Generator wie der Utopia fluid type scale calculator?
Er nutzt dieselbe Idee: Die Größen werden zwischen einem schmalen und einem breiten Viewport linear interpoliert, und jede Stufe ist ein Vielfaches der Basisgröße nach dem Faktor. Unterschiede: Hier gibt es einen Skalierungsfaktor für beide Enden, keine Überschreibungen pro Stufe und ausschließlich einfache CSS-Variablen ohne Tailwind- oder anderen Export. Er eignet sich, wenn Sie schnell den :root-Block brauchen.
Große Terz oder Quarte: Welchen Skalierungsfaktor soll ich wählen?
Die große Terz (1,25) ist ein guter Standard für textlastige Seiten, weil die Stufen so dicht liegen, dass Überschriften den Text nicht erdrücken. Die Quarte (1,333) bringt mehr Kontrast zwischen den Stufen und passt zu Werbeseiten und großen Überschriften. Die kleine Terz (1,2) ist noch sanfter. Tragen Sie den Wert bei „Skalierungsfaktor“ ein und prüfen Sie die „Vorschau“, bevor Sie kopieren.
Funktioniert clamp() in allen Browsern?
clamp() funktioniert in jeder aktuellen Version von Chrome, Edge, Firefox und Safari, und zwar seit 2020. Sehr alte Browser ignorieren Angaben, die sie nicht verstehen. Müssen Sie einen davon unterstützen, setzen Sie vor die clamp()-Zeile eine Zeile mit fester font-size als Rückfall.
Werden meine Eingaben an einen Server gesendet?
Nein. Ihr Browser macht die Zahlen direkt auf der Seite zu CSS, nichts wird hochgeladen oder gespeichert. Es gibt kein Konto und keine Anmeldung.
Empfohlen
-
UX/UI-Wireframe-SkizzenbuchSkizziere die Hierarchie von Überschriften und Fließtext auf Papier, bevor du die Skala festlegst.
-
KYY Tragbarer Monitor 15,6"Prüfe deine clamp()-Größen auf einem zweiten Bildschirm in Handy- und Desktopbreite.
-
Rain Design mStand LaptopständerStell dein Notebook auf Augenhöhe, wenn du lange am CSS deines Designsystems sitzt.
Hilft, die Tools kostenlos zu halten. ✨
Symbolbilder. Als Amazon-Partner verdiene ich an qualifizierten Verkäufen.
