Typografie-Skala-Generator

Was ist Typografie-Skala-Generator?

Der Typografie-Skala-Generator verwandelt eine Basisgröße und ein modulares Verhältnis in eine vollständige, mathematisch konsistente Typo-Skala mit so vielen größeren Überschriftenstufen und kleineren Beschriftungsstufen, wie du brauchst. Neben den reinen Schriftgrößen leitet er für jede Stufe eine passende Zeilenhöhe und Laufweite ab, dazu einen optionalen fluiden clamp()-Ausdruck, der mithilfe eines separaten Mobil-Verhältnisses zwischen einem mobilen und einem Desktop-Viewport interpoliert. Designer und Frontend-Entwickler nutzen ihn, um Typo-Tokens eines Designsystems aufzubauen, Größen konsistent zu halten und fertiges CSS, Sass, Tailwind oder JSON einzufügen. Gib ein beliebiges eigenes Verhältnis ein oder wähle ein klassisches, lege Basisgröße und Einheit (px oder rem) fest, sieh es in deiner eigenen font-family in der Vorschau und kopiere das benötigte Format.

So verwendest du Typografie-Skala-Generator

1. Gib ein beliebiges eigenes Verhältnis im Verhältnisfeld ein oder wähle ein klassisches wie reine Quarte (1.333) aus dem Voreinstellungs-Dropdown in den Einstellungen.
2. Lege die Basisgröße fest; sie wird zur Fließtextgröße und zum Anker der Skala.
3. Wähle in den Einstellungen, wie viele größere und kleinere Stufen erzeugt werden; kleinere Stufen liegen unter der Basis für Beschriftungen und Kleingedrucktes.
4. Passe die Basis- und die enge Zeilenhöhe sowie die Laufweite bei großen Größen an und gib eine font-family ein, um die Skala in deiner eigenen Schrift vorzuschauen.
5. Für responsive Schrift lege die minimale und maximale Viewport-Breite und ein Mobil-Verhältnis fest, um eine fluide clamp()-Skala zu bauen.
6. Wechsle das Ausgabeformat zwischen CSS-Variablen, fluidem clamp(), Sass, Tailwind-Konfiguration und JSON und kopiere dann den Code oder die Größe einer einzelnen Stufe.

Beispiele

Verhältnis 1.333, Basis 16px, 5 hoch / 1 runter

--font-size-2xl: 37.897px; --line-height-2xl: 1.27; --letter-spacing-2xl: -0.017em;

Basis 16px, Verhältnis 1.333, Mobil-Verhältnis 1.2, 320-1240px

--font-size-2xl: clamp(27.648px, 24.083px + 1.114vw, 37.897px);

beliebige Skala, Tailwind-Export

fontSize: { base: ['16px', { lineHeight: '1.5', letterSpacing: '0em' }] }

Häufig gestellte Fragen

Kann ich ein eigenes Verhältnis nutzen, nicht nur die Voreinstellungen?

Ja. Gib eine beliebige Zahl ins Verhältnisfeld ein, etwa 1.2, 1.5, 1.618 oder einen nicht standardmäßigen Wert wie 1.45. Das Voreinstellungs-Dropdown in den Einstellungen ist nur eine Abkürzung, die dasselbe Feld füllt, und ein Wert, der keiner Voreinstellung entspricht, zeigt schlicht Benutzerdefiniert.

Wie funktionieren die kleineren (negativen) Stufen?

Die Skala ist an der Basisgröße (Stufe 0) verankert. Größere Stufen multiplizieren die Basis mit dem Verhältnis, kleinere teilen durch es und erzeugen so Beschriftungs- und Kleingedruckt-Größen unter der Basis wie sm und xs. Lege in den Einstellungen fest, wie viele größere und kleinere Stufen du möchtest.

Wie werden Zeilenhöhe und Laufweite berechnet?

Die Zeilenhöhe geht von deinem Basiswert bei der Fließtextgröße zu einem engeren Wert über, je größer der Text wird, und die Laufweite geht von null an der Basis zu deinem Wert für große Größen über, sodass große Anzeigetexte etwas enger und kleine Texte etwas weiter sind. Beide Kurven sind in den Einstellungen anpassbar.

Was ist die fluide clamp()-Skala?

Sie baut für jede Stufe ein font-size: clamp(), das sanft zwischen einer minimalen und einer maximalen Viewport-Breite wächst, mit deinem Hauptverhältnis bei der Maximalbreite und einem separaten Mobil-Verhältnis bei der Minimalbreite. Wähle das Ausgabeformat CSS clamp(), um sie zu exportieren.

Werden Daten von mir an einen Server gesendet?

Nein. Die gesamte Skala, einschließlich Größen, Zeilenhöhe, Laufweite und der fluiden clamp()-Werte, wird lokal in deinem Browser mit einfacher Mathematik berechnet. Nichts wird hochgeladen, sodass das Tool offline funktioniert und deine Einstellungen privat bleiben.