Schriftgrößen-Skala und Zeilenabstand, auch im Grundlinienraster

Stimmige Schriftgrößen aus Grundschrift und Verhältnis berechnen, mit dem Zeilenabstand für jede Größe, auf Wunsch aufs Grundlinienraster gerundet, und die Werte als CSS übernehmen.

GrundschriftEinheitVerhältnis

Stufen darunterStufen darüberZeilenabstand (× Größe)

Grundlinienraster

Stufe	Größe	Zeilenabstand
5	30,52 pt	42,72 pt
4	24,41 pt	34,18 pt
3	19,53 pt	27,34 pt
2	15,63 pt	21,88 pt
1	12,50 pt	17,50 pt
0	10,00 pt	14,00 pt
-1	8,00 pt	11,20 pt
-2	6,40 pt	8,96 pt

Raster und Rhythmus

CSS-Werte

:root {
  --step-5: 30.52pt;
  --leading-5: 42.72pt;
  --step-4: 24.41pt;
  --leading-4: 34.18pt;
  --step-3: 19.53pt;
  --leading-3: 27.34pt;
  --step-2: 15.63pt;
  --leading-2: 21.88pt;
  --step-1: 12.5pt;
  --leading-1: 17.5pt;
  --step-0: 10pt;
  --leading-0: 14pt;
  --step-m1: 8pt;
  --leading-m1: 11.2pt;
  --step-m2: 6.4pt;
  --leading-m2: 8.96pt;
}

So funktioniert es

Jede Stufe der Skala ist die vorige mal dem Verhältnis: Größe = Grundschrift × Verhältnis^Stufe. Negative Stufen ergeben kleinere Größen, etwa für Fußnoten und Bildunterschriften.

Die Verhältnisse stehen mit ihrem genauen Wert da, etwa 5:4 = 1,25 oder φ = (1 + √5) / 2 ≈ 1,618. Du kannst auch jedes andere Verhältnis größer als 1 eingeben.

Der Zeilenabstand ist die Größe mal dem gewählten Faktor. Mit Grundlinienraster wird jeder Zeilenabstand auf eine ganze Zahl von Linien aufgerundet, damit alle Texte im Raster bleiben. Der Link öffnet das Werkzeug „Layout-Raster erstellen“ mit diesem Grundlinienraster.

Quellen

CSS Values and Units Module Level 3, absolute lengths (1pt = 1/72 in, 1px = 1/96 in), World Wide Web Consortium (W3C) (abgerufen am 20. Oktober 2026)