Typografische Skala
Methode // Konstruieren
13, 14, 15, 17, 19, 22, 23, 28
Sehen Sie den Unterschied zwischen 22 und 23?
Wenige Größen, festes Verhältnis.
Dann ist die Frage nicht mehr: Wie groß? Sondern: Welche Stufe?
Grundgröße 16, Faktor 1,25
Eine Skala in vier Schritten
1. Grundgröße festlegen: die Größe des Fließtexts, im Web meist 16 px
2. Faktor wählen: kleiner für dichte Oberflächen, größer für Inhaltsseiten
3. Berechnen und runden: Grundgröße mal Faktor, immer wieder
4. Zuweisen: Jede Lesestufe bekommt eine Größe
Drei Faktoren
Von links: 1,125 (dicht), 1,25 (ausgewogen), 1,5 (deutlich)
Dieselbe Skala im Code
:root {
--text-base: 1rem; /* 16 px, Fließtext */
--text-m: 1.25rem; /* 20 px, Lead */
--text-l: 1.5625rem; /* 25 px, Zwischentitel */
--text-xl: 1.9375rem; /* 31 px, Headline klein */
--text-2xl: 2.4375rem; /* 39 px, Headline groß */
}rem statt px.
So greift die im Browser eingestellte Schriftgröße. Wer größere Schrift braucht, bekommt sie.
Typische Fehler
Zu viele Stufen: Zwei, die man nicht unterscheiden kann, sind eine zu viel
Krumme Werte stehen lassen: 15,63 px braucht niemand
Skala definieren und dann doch frei Größen eintippen
Nur am Desktop testen: Auf dem Handy ist 39 px schnell zu groß
Wo die Methode wiederkommt
Im Projekt: als Text Styles in Figma
In der Übergabe an die Entwicklung: als Variablen
Zusammen mit dem Spacing-System: dieselbe Idee für Abstände
Merksatz
Wenige Größen, festes Verhältnis. Wer zwei Stufen nicht unterscheiden kann, braucht nur eine.
Danke für's Mitmachen