Type-Scale-Generator mit fluidem clamp()-CSS | We.Inc
Erstelle eine modulare Typoskala aus einer Basisgröße und einem Verhältnis, mit fluiden clamp()-Werten für jede Stufe, einer Live-Vorschau und CSS- oder Tailwind-Variablen zum Kopieren.
Type-Scale-Generator
Eine Typoskala multipliziert eine Basisschriftgröße immer wieder mit demselben Verhältnis, sodass jede Überschriftengröße in Beziehung zum Fließtext steht. Wähle eine Basis und ein Verhältnis für Smartphones und ein weiteres Paar für Desktops. Dieser Generator macht aus jeder Stufe einen clamp()-Wert in rem und vw, der zwischen den beiden Breiten gleichmäßig wächst.
Gängige Verhältnisse und wofür sie passen
Verhältnis
Wert
Wirkung
Kleine Sekunde
Dichte Apps, Dashboards
Große Sekunde
Dichte Apps, Dashboards
Kleine Terz
Artikel, Marketingseiten
Große Terz
Artikel, Marketingseiten
Reine Quarte
Artikel, Marketingseiten
Übermäßige Quarte
Poster, auffällige Landingpages
Reine Quinte
Poster, auffällige Landingpages
Goldener Schnitt
Poster, auffällige Landingpages
Die meisten Typoskala-Tools liefern einen festen Satz an Größen. Dieses liefert zwei, eine Skala für kleine und eine für große Bildschirme, und verbindet sie mit clamp(). So lieferst du eine einzige Regel pro Stufe statt eines Stapels von Media Queries.
Warum zwei Verhältnisse
Ein Verhältnis, das auf einem 1440 Pixel breiten Monitor großzügig aussieht, lässt Überschriften auf dem Smartphone über vier Zeilen umbrechen. Mit einem engeren Verhältnis auf kleinen Bildschirmen, etwa 1.2, und einem weiteren auf großen, etwa 1.25 oder 1.333, bleiben Überschriften auf dem Desktop kräftig und auf dem Handy lesbar.
Stufen unter null funktionieren genauso, nur umgekehrt: Die Basis wird durch das Verhältnis geteilt. Das ergibt Größen für Bildunterschriften und Kleingedrucktes, die im Verhältnis bleiben.
Wie die clamp()-Werte berechnet werden
Für jede Stufe kennt das Tool die Größe bei der kleinen und bei der großen Breite. Es zieht eine Gerade zwischen diesen beiden Punkten: Die Steigung wird zum vw-Anteil, der Startversatz zum rem-Anteil des bevorzugten Werts.
clamp(min, preferred, max) hält die Größe dann unterhalb der kleinen Breite beim Minimum und oberhalb der großen Breite beim Maximum. Den rem-Anteil im bevorzugten Wert beizumischen ist wichtig: Eine reine vw-Größe ignoriert den Browser-Zoom, während der rem-Anteil beim Hineinzoomen weiter wächst.
MDN empfiehlt, dass beim Setzen der Textgröße mit clamp() das Maximum mindestens doppelt so groß wie das Minimum sein sollte, damit Text 200 Prozent Zoom erreichen kann, die Vergrößerungsstufe aus WCAG 1.4.4. Ein moderater fluider Bereich schafft das allein nicht, also teste deine größten Stufen mit Browser-Zoom auf 200 Prozent.
Lege die Root-Schriftgröße fest (16, sofern dein CSS die Größe von html nicht ändert) sowie die schmale und die breite Viewport-Breite.
Wähle für jedes Ende eine Basisgröße und ein Verhältnis. Gleiche Werte ergeben eine feste Skala, unterschiedliche Werte eine fluide.
Lege fest, wie viele Stufen über und unter der Basis du brauchst. Die meisten Websites nutzen vier oder fünf darüber und eine oder zwei darunter.
Zieh den Regler für die Vorschaubreite, um jede Stufe bei jeder Bildschirmgröße zu sehen, und kopiere dann die CSS-Variablen oder den Tailwind-Theme-Block.
Beginne beim Fließtext mit 16 bis 18 Pixeln. Kleiner erschwert längeres Lesen auf Smartphones.
Verringere die Zeilenhöhe mit wachsender Größe: etwa 1.5 für Fließtext und 1.1 bis 1.2 für große Überschriften wirkt ausgewogen.
Mehr als sechs Stufen brauchst du selten. Wenn zwei Stufen in der Vorschau fast gleich aussehen, streich eine.
Benenne Variablen nach Stufe, nicht nach Element (step-3 statt h2), damit ein Kartentitel ohne Verwirrung eine Überschriftengröße übernehmen kann.
Häufige Fragen
Welches Verhältnis ist gut für eine Typoskala?
Für textlastige Websites sind 1.2 (kleine Terz) oder 1.25 (große Terz) sichere Wahlen. 1.333 (reine Quarte) passt zu Marketingseiten mit kurzen, kräftigen Überschriften. Verhältnisse ab 1.5 erzeugen große Sprünge, die für Poster funktionieren, aber schnell riesige Überschriften ergeben.
Eignet sich der Goldene Schnitt für Typografie?
Mit etwa 1.618 ist er sehr steil: Fünf Stufen über 16px liegen bereits über 170px. Für eine Display-Skala mit zwei oder drei Stufen kann er funktionieren, die meisten Oberflächen lesen sich mit einem kleineren Verhältnis aber besser.
Warum rem plus vw statt nur vw?
Text, der nur in vw angegeben ist, reagiert nicht auf den Textzoom des Browsers, und das lässt Menschen im Stich, die Text vergrößern. Der rem-Anteil im bevorzugten Wert hält den Zoom funktionsfähig, während vw das gleichmäßige Wachstum zwischen den Breiten übernimmt.
Kann ich die Ausgabe mit Tailwind CSS nutzen?
Ja. Tailwind v4 erzeugt aus jeder --text-*-Variable innerhalb eines @theme-Blocks eine text-*-Utility. Wenn du die Tailwind-Ausgabe einfügst, bekommst du also Klassen wie text-step-2 für dein Markup.
Die Skala in deinem CSS verwenden
Ein durchgerechnetes Beispiel: Basis 16px bei 375px, steigend auf 18px bei 1280px, Verhältnis 1.2 steigend auf 1.25.
Stufen als Custom Properties
Jede Stufe ist ein einziges clamp(). Wende sie auf Elemente oder Utility-Klassen an, mit eigener Zeilenhöhe pro Stufe.
Live-Ergebnis
Dieselben Variablen in einer kleinen Seite. Bearbeite den Code, um andere Werte auszuprobieren. Der Rahmen ist schmal, daher siehst du das Ende für kleine Bildschirme.
Namen der Verhältnisse und exakte Werte
Die musikalischen Namen stammen von den Frequenzverhältnissen der Intervalle. Jeder Wert hier ist der exakte Bruch, auf drei Stellen gerundet.
Benannte Verhältnisse
Name
Bruch
Wert
Fünf Stufen über 16px
Kleine Sekunde
Große Sekunde
Kleine Terz
Große Terz
Reine Quarte
Übermäßige Quarte
Reine Quinte
Goldener Schnitt
Erstelle deine Skala
Lege eine Basisgröße und ein Verhältnis für einen kleinen und für einen breiten Bildschirm fest. Jede Stufe erhält einen clamp()-Wert, der zwischen den beiden Breiten gleichmäßig wächst, dazu eine Live-Vorschau und CSS zum Kopieren.