Eine Type Scale ist ein System aufeinander abgestimmter Schriftgrößen, die durch einen festen Faktor miteinander verbunden sind. Je größer der Faktor, desto dramatischer der Größenunterschied zwischen den Stufen.
CSS-Variablen werden im :root-Selektor definiert und stehen
im gesamten Dokument zur Verfügung. In Kombination mit calc()
lässt sich so eine vollständig variable Type Scale aufbauen.
Ändert man nur --base oder --ratio,
passen sich alle Schriftgrößen automatisch an.
Große Überschriften wirken kompakter mit line-height nahe 1.0
und leicht negativem letter-spacing. Fließtext benötigt
mindestens 1.4–1.6 für komfortable Lesbarkeit.
Das Verhältnis 1.25 (Major Third) erzeugt deutlich sichtbare, aber nicht übertriebene Größenunterschiede – ideal für Webprojekte.