Typografische Skala: Schriftgrößen mit Verhältnissen

Eine typografische Skala ist ein Satz Schriftgrößen, gebaut aus einer Basisgröße und einem Verhältnis. Du startest mit deiner Textgröße, sagen wir 16 px, und multiplizierst sie mit dem Verhältnis für die nächste Größe, dann wieder für die nächste. Mit dem Verhältnis 1,25 erhältst du 16, 20, 25, 31, 39 und 49 px. Weil jede Stufe im gleichen Verhältnis wächst, wirken die Größen verwandt, und die Wahl einer Überschriftgröße ist kein Raten mehr.

Warum eine Skala Größen verwandt wirken lässt

Das Auge liest Größe als Verhältnis, nicht als Pixel. Der Sprung von 16 auf 20 fühlt sich an wie der von 39 auf 49, denn beide sind ein Viertel größer. Nach Gefühl gewählte Größen ballen sich an manchen Stellen und lassen an anderen Lücken, sodass zwei Überschriften fast gleich groß sind und wie ein Fehler aussehen. Eine Skala gibt jeder Ebene einen klaren, gleichmäßigen Schritt, das Rückgrat der visuellen Hierarchie.

Gängige Verhältnisse der Skala im Vergleich

Viele beliebte Verhältnisse haben ihre Namen von Intervallen der Musik, und eine so gebaute Skala heißt oft modulare Skala. Der Name zählt weniger als die Größe des Schritts: Je größer das Verhältnis, desto mehr Drama zwischen den Ebenen und desto weniger Ebenen passen auf eine Seite.

Skalenwerte in Pixel

Hier läuft dieselbe Basis von 16 px durch vier Verhältnisse. Sieh, wie schnell die großen Verhältnisse steigen: Bei Stufe 4 liegt eine 1,5-Skala schon bei 81 px, eine 1,2-Skala bei 33 px.

Runden ist in Ordnung. Niemand sieht den Unterschied zwischen 31,25 und 31 px, und ganze Zahlen merkt man sich leichter und richtet sie besser am Raster aus.

So baust du deine eigene Skala

1. 1

   Basisgröße wählen

   Das ist dein Fließtext. 16 bis 18 px passen für die meisten Websites; auf einer 1080 px breiten Social-Fläche startest du bei 40 px.

2. 2

   Ein Verhältnis passend zum Inhalt wählen

   Viel Text und viele Überschriftebenen wollen ein kleines Verhältnis. Wenige Wörter und eine große Headline wollen ein großes.

3. 3

   Fünf oder sechs Stufen erzeugen

   Multipliziere nach oben für Überschriften und teile einmal für kleinen Text. Die meisten Designs nutzen nie mehr als sechs Größen.

4. 4

   Runden und benennen

   Runde auf ganze Pixel und benenne die Stufen nach ihrer Rolle, etwa Caption, Body, Title und Display, nicht nach Nummer.

5. 5

   Zeilenhöhe pro Stufe festlegen

   Größere Größen brauchen engeren Zeilenabstand. Fließtext etwa 1,5, Titel etwa 1,2, Display-Schrift nahe 1.0.

6. 6

   Mit echten Wörtern testen

   Setze eine echte Headline, Unterzeile und einen Absatz. Wirken zwei Stufen zu ähnlich, lass eine aus oder erhöhe das Verhältnis.

Eine typografische Skala für Social Posts

Social Posts brauchen ein größeres Verhältnis als Webseiten, denn eine 1080 px breite Fläche schrumpft am Handy auf ein Drittel ihrer Breite, und es gibt nur zwei oder drei Textebenen. Eine Basis von 40 px mit dem Verhältnis 1,5 ergibt 40, 60, 90 und 135 px, was sauber zu den Größen in Schriftgröße für Instagram-Posts passt.

Eine Skala über alle Slides eines Karussells macht ein Set gestaltet statt zusammengestückelt. Dieselben Größen in denselben Rollen, Slide für Slide. Textlayout für Social-Media-Posts zeigt, wie du sie anordnest.

So schreibst du eine typografische Skala in CSS

Speichere die Skala als Custom Properties, damit jede Komponente daraus schöpft. Du kannst Multiplikationen mit calc() verketten oder die gerundeten Werte ausschreiben. Für eine Skala, die mit dem Bildschirm wächst, gibst du jeder Stufe einen clamp()-Bereich: ein Minimum fürs Handy, ein Maximum für breite Bildschirme und dazwischen einen fließenden Wert.

/* A 1.25 scale from a 1rem (16px) base */
:root {
  --ratio: 1.25;
  --step-0: 1rem;
  --step--1: calc(var(--step-0) / var(--ratio));
  --step-1: calc(var(--step-0) * var(--ratio));
  --step-2: calc(var(--step-1) * var(--ratio));
  --step-3: calc(var(--step-2) * var(--ratio));
  --step-4: calc(var(--step-3) * var(--ratio));
  --step-5: calc(var(--step-4) * var(--ratio));
}

/* Fluid headings: smaller ratio on phones, larger on desktop */
h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 4.25rem); line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.15; }
h3 { font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.25; }
body { font-size: var(--step-0); line-height: 1.55; }
small { font-size: var(--step--1); }

Eine Skala ist ein Teil größerer Entscheidungen über Schriften, Abstände und Rollen. Typografiesystem bringt sie zusammen, und Tracking oder Kerning behandelt die Abstandswerte, die zu jeder Stufe passen. Gestaltest du Social Content, enthält das Markenkit von Gradiently deine Überschrift- und Fließtextschriften, und der Designer wendet sie auf jede neue Größe an, wodurch sich eine einmal gewählte Skala leicht halten lässt.