Typografische Skala generieren mit CSS-Variablen
Erzeuge eine harmonische typografische Skala aus Basisgröße und Verhältnis. Wähle aus acht benannten Verhältnissen und exportiere CSS-Custom-Properties. Kostenlos, ohne Upload.
So verwendest du dieses Werkzeug
- Geben Sie Ihre Basisschriftgröße in Pixeln ein.
- Wählen Sie ein Skalenverhältnis aus dem Dropdown-Menü.
- Kopieren Sie die CSS-Custom-Properties-Ausgabe.
| Step | px | rem |
|---|---|---|
| xs | 10.2 | 0.640 |
| sm | 12.8 | 0.800 |
| base | 16 | 1.000 |
| lg | 20 | 1.250 |
| xl | 25 | 1.563 |
| 2xl | 31.3 | 1.953 |
| 3xl | 39.1 | 2.441 |
| 4xl | 48.8 | 3.052 |
| 5xl | 61 | 3.815 |
:root {
--text-xs: 0.640rem; /* 10px */
--text-sm: 0.800rem; /* 13px */
--text-base: 1.000rem; /* 16px */
--text-lg: 1.250rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31px */
--text-3xl: 2.441rem; /* 39px */
--text-4xl: 3.052rem; /* 49px */
--text-5xl: 3.815rem; /* 61px */
}Ratio: 1.25 | Base: 16px. All calculations run in your browser.
Über Typografische Skala
Der Generator für typografische Skalen erzeugt aus einer einzigen Basisgröße und einem Verhältnis eine modulare Schriftskala. Eine modulare Skala bildet jede Stufe, indem die Basis mit einem festen Verhältnis multipliziert oder dividiert wird, sodass die Größen harmonisch zueinander stehen statt willkürlich gewählt zu sein. Das Werkzeug erzeugt neun Stufen, von xs bis 5xl, mit der Basisstufe in der Mitte, und zeigt für jede den Pixel- und rem-Wert in einer Tabelle mit einer Live-Vorschau der Buchstabenform.
Du wählst aus acht klassischen Verhältnissen, von der dezenten kleinen Sekunde bei 1,067 bis zum Goldenen Schnitt bei 1,618, mit großer Terz, reiner Quarte und reiner Quinte als Optionen dazwischen. Ein kleineres Verhältnis hält die Stufen dicht beieinander, was für dichte, textlastige Oberflächen passt, während ein größeres Verhältnis kräftige Sprünge erzeugt, die zu Marketingseiten und markanten Überschriften passen. Die Basisgröße, einstellbar von 8 bis 32 Pixel, verankert die gesamte Skala; alles ober- und unterhalb der Basisstufe wird daraus abgeleitet.
Die Mathematik ist konsistent: Jede Stufe potenziert das Verhältnis mit einem Exponenten, der sich aus ihrem Abstand zur Basis ergibt, sodass lg die Basis mal dem Verhältnis ist, xl die Basis mal dem Verhältnis im Quadrat und sm die Basis geteilt durch das Verhältnis. Die rem-Werte werden gegen einen 16px-Wurzelwert berechnet, den üblichen Browser-Standard, sodass sie ohne weitere Anpassung in ein typisches Stylesheet passen. Die Vorschauspalte rendert ein „Aa“ in jeder Größe, damit der visuelle Rhythmus der Skala leicht zu beurteilen ist.
Die Ausgabe ist ein Block aus CSS-Custom-Properties, eine Variable pro Stufe, benannt von --text-xs bis --text-5xl, jeweils mit dem rem-Wert und einem Pixel-Kommentar. Fügst du diesen Block in dein :root ein, steht die gesamte Skala als Variablen im ganzen Stylesheet zur Verfügung, was Überschriften und Fließtext konsistent hält. Eine Kopier-Schaltfläche legt den Block in die Zwischenablage. Der Generator läuft vollständig in deinem Browser, ohne Upload und ohne Konto.
Häufig gestellte Fragen
- Was ist eine modulare Schriftskala?
- Eine Menge von Schriftgrößen, bei der jede Stufe die Basisgröße multipliziert oder dividiert durch ein festes Verhältnis ist. Dadurch stehen die Größen proportional zueinander und ergeben eine harmonischere Hierarchie, als wenn man Zahlen von Hand wählt.
- Aus welchen Verhältnissen kann ich wählen?
- Acht benannte Verhältnisse: kleine Sekunde (1,067), große Sekunde (1,125), kleine Terz (1,2), große Terz (1,25), reine Quarte (1,333), übermäßige Quarte (1,414), reine Quinte (1,5) und der Goldene Schnitt (1,618).
- Wie viele Stufen werden erzeugt?
- Neun, benannt xs, sm, base, lg, xl, 2xl, 3xl, 4xl und 5xl. Die Basisstufe liegt in der Mitte; Größen darunter werden durch das Verhältnis dividiert, Größen darüber damit multipliziert.
- Sollte ich ein kleines oder großes Verhältnis nehmen?
- Ein kleineres Verhältnis hält die Stufen dicht beieinander, was zu dichten, textlastigen Oberflächen passt. Ein größeres Verhältnis wie der Goldene Schnitt erzeugt größere Sprünge, die gut für ausdrucksstarke Überschriften auf Landing- und Marketingseiten funktionieren.
- Wie werden die rem-Werte berechnet?
- Die Pixelgröße jeder Stufe wird durch 16 geteilt, die übliche Browser-Wurzelschriftgröße, um einen rem-Wert zu erhalten. So passen die Variablen ohne zusätzliche Umrechnung direkt in ein typisches Stylesheet.
- Wie sieht das exportierte CSS aus?
- Ein :root-Block aus Custom-Properties, benannt von --text-xs bis --text-5xl, jeweils auf einen rem-Wert gesetzt mit der entsprechenden Pixelgröße als Kommentar. Beim Einfügen steht die gesamte Skala als Variablen in deinen Styles zur Verfügung.
- Welche Basisgröße sollte ich wählen?
- Üblicherweise 16px, was der Standard-Fließtextgröße der meisten Browser entspricht. Du kannst zwischen 8 und 32px einstellen; die gesamte Skala wird aus der gewählten Basis neu berechnet.
- Wird die Skala auf einem Server erzeugt?
- Nein. Die Berechnungen und die CSS-Ausgabe passieren vollständig in deinem Browser. Es wird nichts hochgeladen und kein Konto benötigt.