Typografie Grundlagen: Größe, Stärke, Abstand und Rhythmus

Typografie Grundlagen laufen auf sechs Entscheidungen hinaus: die Größe jedes Textstücks, seine Stärke, den Zeilenabstand, die Laufweite, die Ausrichtung und die Zeilenlänge. Stimmen sie, sieht fast jede ordentliche Schrift professionell aus; stimmen sie nicht, wirkt selbst die beste Schrift der Welt laienhaft. Jede hat einen vernünftigen Standardwert, unten angegeben, von dem du bewusst abweichen kannst.

Größe: eine Schriftskala nutzen

Wer Größen einzeln auswählt, landet bei einer Seite voller fast gleicher Größen ohne klare Ordnung. Eine Schriftskala behebt das: Beginne mit einer Grundgröße und multipliziere für jede Stufe nach oben mit demselben Verhältnis. Das Verhältnis bestimmt den Charakter. Kleine Verhältnisse wie 1,2 wirken ruhig und dicht, große wie 1,5 dramatisch und redaktionell.

:root {
  --step--1: 0.8rem;     /* 12.8px */
  --step-0: 1rem;        /* 16px   */
  --step-1: 1.25rem;     /* 20px   */
  --step-2: 1.5625rem;   /* 25px   */
  --step-3: 1.953rem;    /* 31.25px */
  --step-4: 2.441rem;    /* 39px   */
  --step-5: 3.052rem;    /* 48.8px */
}

body { font-size: var(--step-0); }
h3   { font-size: var(--step-2); }
h2   { font-size: var(--step-3); }
h1   { font-size: var(--step-5); }

Bei Social-Media-Beiträgen ist die Fläche größer, also sind die Zahlen größer, aber die Idee bleibt dieselbe. Bei einem 1080 Pixel breiten Beitrag halten eine Überschrift von etwa 90 bis 120 Pixeln und eine Detailzeile von etwa 40 bis 56 eine klare Stufe zwischen beiden und bleiben auf dem Smartphone lesbar.

Stärke: weniger Schnitte, klarere Stufen

Die Stärke ist die Dicke der Striche, meist von 100 (Thin) bis 900 (Black) nummeriert, mit 400 als Regular und 700 als Bold. Zwei oder drei Stärken reichen für die meisten Designs. Entscheidend ist, dass benachbarte Stärken verschieden aussehen: Regular gegen Bold wirkt wie ein bewusster Kontrast, Regular gegen Medium oft wie ein Versehen.

Zeilenabstand: Raum zwischen den Zeilen

Der Zeilenabstand, im Bleisatz Durchschuss genannt, ist der Abstand von einer Zeile zur nächsten. Fließtext braucht Luft, um sich angenehm zu lesen: etwa das 1,4- bis 1,6-Fache der Schriftgröße ist ein verlässlicher Bereich. Große Überschriften brauchen weniger, etwa 1,0 bis 1,2, weil die Lücken bei großen Größen viel breiter wirken, als sie sind. Lange Zeilen brauchen etwas mehr Zeilenabstand als kurze, damit das Auge den Anfang der nächsten Zeile findet. Zeilenabstand und Zeilenlänge geht tiefer.

Laufweite: meistens in Ruhe lassen

Schriften werden von ihren Gestaltern für die vorgesehenen Größen ausgeglichen, deshalb muss Fließtext selten angepasst werden. Zwei Ausnahmen lohnen sich zu kennen. Große Überschriften sehen oft etwas enger besser aus, mit einem kleinen negativen Wert wie -0,01em bis -0,02em. Text in Großbuchstaben und kleine Labels brauchen das Gegenteil: etwas mehr Abstand, etwa 0,05em bis 0,1em, weil Großbuchstaben dafür gestaltet wurden, neben Kleinbuchstaben zu stehen. Laufweite erklärt die Details.

Ausrichtung

Linksbündiger Text mit Flatterrand rechts ist aus gutem Grund der Standard: Jede Zeile beginnt an derselben Stelle, also findet das Auge sie leicht. Zentrierter Text passt zu kurzen Stücken wie einer Überschrift, einem Zitat oder einer Einladung und wird nach wenigen Zeilen anstrengend. Blocksatz sieht im Druck ordentlich aus, wo die Software gut trennen kann, im Web reißt er aber oft ungleiche Lücken zwischen Wörtern auf.

Zeilenlänge: das Maß

Die Länge einer Zeile, die Zeilenlänge, zählt genauso viel wie ihre Größe. Zu lange Zeilen machen es schwer, die nächste zu finden; zu kurze unterbrechen den Leserhythmus mit ständigen Umbrüchen. Etwa 45 bis 75 Zeichen pro Zeile ist der Bereich, der für Fließtext am häufigsten empfohlen wird. Im Web macht die Einheit ch das einfach.

article p {
  max-width: 65ch;   /* about 65 characters per line */
  line-height: 1.55;
}

h1 {
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance; /* evens out headline lines where supported */
}

.label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--step--1);
}

Rhythmus: Abstände, die gruppieren

Abstand sagt Lesern, was zusammengehört. Eine Überschrift sollte näher an dem Absatz stehen, den sie einleitet, als an dem davor, also setze über Überschriften mehr Abstand als darunter. Halte die Absatzabstände einheitlich und nutze durchgehend eine Abstandseinheit, oft auf Basis des Zeilenabstands im Fließtext. Wird Raum einheitlich eingesetzt, bekommt die Seite einen Rhythmus, der sie ruhig wirken lässt, selbst wenn sie voll ist. Visuelle Hierarchie baut darauf auf.

1. 1

   Eine Fließtextgröße wählen

   16 Pixel oder mehr auf Bildschirmen; viel mehr bei Social-Media-Beiträgen.

2. 2

   Ein Skalenverhältnis wählen

   1,2 für ruhig und dicht, 1,25 für das meiste, 1,333 oder mehr für redaktionelle Dramatik.

3. 3

   Zwei Stärken festlegen

   Regular zum Lesen, Bold oder Semibold für Betonung und Überschriften.

4. 4

   Zeilenabstände festlegen

   Etwa 1,5 für Fließtext, etwa 1,1 für große Überschriften.

5. 5

   Die Zeilenlänge begrenzen

   Rund 65 Zeichen für Fließtext.

6. 6

   Mit einer Einheit abstanden

   Eine Abstandsstufe, immer wieder genutzt, mit mehr Raum über Überschriften als darunter.

Steht das alles, wird die Wahl der Schrift zum schönen Teil statt zur Reparatur. Beginne mit Schriftkombinationen und Serif oder Sans Serif.