Design / Typografie

Typografieskala-Generator (modulare Skala für CSS und Tailwind)

Erzeuge aus einer Basis-Schriftgröße und einem Verhältnis wie 1.25 oder dem goldenen Schnitt eine modulare Typografieskala, zeige jeden Schritt mit deinem eigenen Text an und kopiere die Größen als CSS Custom Properties oder als Tailwind-fontSize-Konfiguration in rem oder px.

Typografieskala-Generator (modulare Skala für CSS und Tailwind): Jede Größe ergibt sich aus der Basisgröße, multipliziert mit dem Verhältnis – einmal pro Schritt: Bei 16 px und einer großen Terz, 1.25, sind die Schritte darüber 20, 25, 31.25, 39.06 und 48.83 px, die Schritte darunter 12.8 und 10.24 px. Die Größen werden in px und rem aufgeführt und wie die Textgrößen von Tailwind benannt – von xs bis 4xl. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.

Kategorie
Entwicklerwerkzeuge
Ausführungen
In deinem Browser
Kosten
Kostenlos · ohne Anmeldung
Verfügbarkeit
Einsatzbereit
Schriftgrößen-Skalen-GeneratorLokale Verarbeitung

Läuft vollständig in deinem Browser

4xl48,83 px · 3.0518 remThe quick brown fox
3xl39,06 px · 2.4414 remThe quick brown fox
2xl31,25 px · 1.9531 remThe quick brown fox
xl25 px · 1.5625 remThe quick brown fox
lg20 px · 1.25 remThe quick brown fox
base16 px · 1 remThe quick brown fox
sm12,8 px · 0.8 remThe quick brown fox
xs10,24 px · 0.64 remThe quick brown fox
:root {
  --step-5: 3.0518rem;
  --step-4: 2.4414rem;
  --step-3: 1.9531rem;
  --step-2: 1.5625rem;
  --step-1: 1.25rem;
  --step-0: 1rem;
  --step--1: 0.8rem;
  --step--2: 0.64rem;
}

Jede Stufe ergibt sich aus der darunterliegenden Stufe multipliziert mit dem Verhältnis: Bei einer Grundgröße von 16 px und einem Verhältnis von 1.25 betragen die Größen darüber 20, 25 und 31.25 px und darunter 12.8 und 10.24 px. Kleine Verhältnisse wie 1.125 eignen sich für dichte Benutzeroberflächen; größere wie 1.5 verleihen Überschriften mehr Kontrast. Bei rem-Werten wird die standardmäßige Stammgröße des Browsers von 16 px angenommen.

Woher die Namen der Verhältnisse stammen

Die Namen bezeichnen musikalische Intervalle: Eine reine Quinte hat ein Frequenzverhältnis von 3 : 2. Eine auf 1,5 basierende Typoskala wächst also im gleichen Verhältnis wie Töne im Abstand einer Quinte. Tim Browns modulare Skala machte diese Idee im Web populär.

Der Goldene Schnitt, 1,618, erzeugt sehr große Sprünge. Er wird im Goldener-Schnitt-Rechner erklärt.

Rundung

Browser stellen auch Pixelgrößen mit Nachkommastellen dar, daher ist 31,25 px problemlos. Wenn ein Designsystem ganze Pixel benötigt, runde jeden Schritt und behalte die rem-Werte mit vier Nachkommastellen bei, wie es dieses Tool macht. Andere Werte kannst du mit dem px-zu-rem-Konverter umrechnen.

So benutzt du es

  1. Gib die Basisgröße ein und wähle ein Verhältnis.
  2. Lege fest, wie viele Schritte nach oben und unten angezeigt werden sollen, und sieh sie dir mit deinem Text an.
  3. Kopiere die CSS-Variablen oder die Tailwind-Konfiguration.

Datenschutz & Einschränkungen

Alles läuft in deinem Browser.

Ähnliche Tools

CSS clamp()CSS Einheiten-UmrechnerGoldener Schnitt

Häufige Fragen

Welches Verhältnis sollte ich verwenden?

Für Benutzeroberflächen mit viel Text und kleine Bildschirme eignen sich moderate Verhältnisse wie 1.125 oder 1.2. Editorial-Seiten und Landingpages können für markantere Überschriften 1.333 bis 1.618 verwenden.

Warum sollte ich rem verwenden?

rem-Größen richten sich nach der im Browser festgelegten Schriftgröße der lesenden Person. Dadurch wird der Text für Menschen größer, die ihn größer benötigen. Die Umrechnung geht von einer standardmäßigen Root-Größe von 16 px aus.

Kann ich die Größen dynamisch machen?

Ja: Nimm für einen Schritt die kleinste und die größte gewünschte Größe und wandle sie mit dem CSS-clamp-Generator in einen clamp()-Ausdruck um.

Kostenloses Tool · läuft in deinem browser · kein Konto nötig