Typografische Skala (Schriftgrößen-System)
Erstellen Sie aus Grundgröße und Verhältnis ein Schriftgrößen-System für Überschriften und Fließtext, mit Zeilenhöhen, Vorschau und CSS-Variablen zum Kopieren
Tool wird geladen…
Erzeugt die Schriftgrößen für Überschriften, Fließtext und Bildunterschriften aus einer Grundgröße und einem Verhältnis, sodass die Größen einer Seite zueinander passen. Geeignet zum Start einer Website, eines App-Bildschirms oder einer Dokumentvorlage.
So geht’s
- Geben Sie die "Grundgröße" des Fließtexts in px ein und wählen Sie ein "Verhältnis"; "Eigener Wert" nimmt jeden Wert von 1,05 bis 2 an.
- Unter "Rundung" behalten Sie Dezimalstellen, runden auf ganze px oder legen die Größen auf das "4-px-Raster".
- Legen Sie die "Zeilenhöhe" fest: "Enger bei Überschriften" verkleinert den Faktor für große Größen; "Überall gleich" nutzt einen Wert.
- Geben Sie einen eigenen "Vorschautext" ein und wechseln Sie die "Vorschau-Schrift", um jede Stufe in echter Größe zu sehen.
- Drücken Sie "CSS-Variablen kopieren", "Element-CSS kopieren" oder "JSON kopieren".
So wird gerechnet
- Größe der Stufe n = Grundgröße × Verhältnis hoch n. Die Stufen reichen von −2 (xs) bis +6 (5xl); Stufe 0 ist der Fließtext (p), die Stufen 1 bis 6 entsprechen h6 bis h1.
- rem ist der px-Wert geteilt durch die Grundgröße; pt = px × 0,75 (96 px pro Zoll).
- Bei "Enger bei Überschriften" fällt der Faktor geradlinig von der "Zeilenhöhe Fließtext" bei der Grundgröße auf die "Zeilenhöhe Überschriften" bei der dreifachen Grundgröße. "4-px-Raster" rundet auch die Zeilenbox auf ein Vielfaches von 4 px.
- Die Einstellungen bleiben in diesem Browser für den nächsten Besuch gespeichert.
Häufige Fragen
- Welches Verhältnis eignet sich für eine Website?
- 1,2 und 1,25 ergeben moderate Überschriften für lange Artikel; 1,333 und mehr ergeben große, plakatartige Überschriften. Auf kleinen Bildschirmen wirkt meist ein kleineres Verhältnis besser.
- Wie groß sollte der Fließtext sein?
- 16 px ist der Browser-Standard und ein üblicher Ausgangspunkt; für lange Lesetexte werden 17 bis 18 px verwendet. Der Rest der Skala folgt der eingegebenen Grundgröße.
- Wie rechne ich die Größen in rem um?
- Die Tabelle zeigt rem neben px. Wenn Sie html auf die Grundgröße in px setzen, wie es das kopierte Element-CSS tut, entspricht 1rem der Grundgröße.
- Welche Zeilenhöhe sollten Überschriften haben?
- Fließtext liegt meist um 1,5, große Überschriften um 1,1 bis 1,25, damit umbrochene Überschriftzeilen keine großen Lücken lassen. Der automatische Modus wendet diesen Übergang an.