Design Tools
Typografie-Skala-Generator
Generieren Sie harmonische Typografie-Skalen
16px
Vorschau
6xl
4.768rem
The quick brown fox jumps over the lazy dog
5xl
3.815rem
The quick brown fox jumps over the lazy dog
4xl
3.052rem
The quick brown fox jumps over the lazy dog
3xl
2.441rem
The quick brown fox jumps over the lazy dog
2xl
1.953rem
The quick brown fox jumps over the lazy dog
xl
1.563rem
The quick brown fox jumps over the lazy dog
lg
1.25rem
The quick brown fox jumps over the lazy dog
base
1rem
The quick brown fox jumps over the lazy dog
sm
0.8rem
The quick brown fox jumps over the lazy dog
xs
0.64rem
The quick brown fox jumps over the lazy dog
Skalentabelle
| Name | Größe | Zeilenhöhe | Zeichenabstand | Gewicht |
|---|---|---|---|---|
| xs | 0.64rem | 1.6 | normal | 400 |
| sm | 0.8rem | 1.55 | normal | 400 |
| base | 1rem | 1.5 | normal | 400 |
| lg | 1.25rem | 1.45 | -0.01em | 400 |
| xl | 1.563rem | 1.4 | -0.01em | 600 |
| 2xl | 1.953rem | 1.35 | -0.02em | 600 |
| 3xl | 2.441rem | 1.3 | -0.02em | 700 |
| 4xl | 3.052rem | 1.25 | -0.02em | 700 |
| 5xl | 3.815rem | 1.2 | -0.02em | 700 |
| 6xl | 4.768rem | 1.15 | -0.02em | 700 |
:root {
/* Base size: 16px, Scale ratio: 1.25 */
--font-size-xs: 0.64rem;
--font-size-sm: 0.8rem;
--font-size-base: 1rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.563rem;
--font-size-2xl: 1.953rem;
--font-size-3xl: 2.441rem;
--font-size-4xl: 3.052rem;
--font-size-5xl: 3.815rem;
--font-size-6xl: 4.768rem;
/* Font family */
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Typography classes */
.text-xs {
font-size: var(--font-size-xs);
line-height: 1.6;
}
.text-sm {
font-size: var(--font-size-sm);
line-height: 1.55;
}
.text-base {
font-size: var(--font-size-base);
line-height: 1.5;
}
.text-lg {
font-size: var(--font-size-lg);
line-height: 1.45;
letter-spacing: -0.01em;
}
.text-xl {
font-size: var(--font-size-xl);
line-height: 1.4;
letter-spacing: -0.01em;
}
.text-2xl {
font-size: var(--font-size-2xl);
line-height: 1.35;
letter-spacing: -0.02em;
}
.text-3xl {
font-size: var(--font-size-3xl);
line-height: 1.3;
letter-spacing: -0.02em;
}
.text-4xl {
font-size: var(--font-size-4xl);
line-height: 1.25;
letter-spacing: -0.02em;
}
.text-5xl {
font-size: var(--font-size-5xl);
line-height: 1.2;
letter-spacing: -0.02em;
}
.text-6xl {
font-size: var(--font-size-6xl);
line-height: 1.15;
letter-spacing: -0.02em;
}
Warum Typografie-Skala-Generator verwenden?
- ✓100% Kostenlos - Keine versteckten Kosten oder Premium-Funktionen
- ✓Keine Anmeldung erforderlich - Sofort nutzbar ohne Kontoerstellung
- ✓Datenschutz zuerst - Alle Verarbeitung erfolgt in Ihrem Browser. Ihre Daten verlassen nie Ihr Gerät
- ✓Blitzschnell - Sofortige Ergebnisse ohne Server-Verzögerungen
Anleitung
- Geben Sie Ihren Text im Eingabebereich oben ein oder fügen Sie ihn ein
- Das Tool verarbeitet Ihre Eingabe automatisch
- Kopieren Sie das Ergebnis oder laden Sie es als Datei herunter
Funktionen
- ✓Multiple scale ratios (golden, minor third, etc.)
- ✓Base size customization
- ✓Preview all heading levels
- ✓CSS, SCSS, and Tailwind export
- ✓Responsive scaling options
- ✓Line height recommendations
Häufig gestellte Fragen
What is a typography scale?
A typography scale is a series of harmoniously related font sizes based on a mathematical ratio.