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

[Canonical HTML page](https://gradiently.design/de/guide/typography-basics)

Das meiste, was Schrift professionell aussehen lässt, ist nicht die Schriftart. Es sind sechs Entscheidungen über Größe, Stärke und Raum, und jede hat einen vernünftigen Standardwert.

## The short version

- Typografie beruht auf sechs Entscheidungen: Größe, Stärke, Zeilenabstand, Laufweite, Ausrichtung und Zeilenlänge.
- Eine Schriftskala, bei der jede Größe um ein festes Verhältnis größer ist als die vorige, gibt einem Design eine klare und einheitliche Hierarchie.
- Fließtext liest sich angenehm mit einem Zeilenabstand vom etwa 1,4- bis 1,6-Fachen der Schriftgröße, große Überschriften brauchen weniger, etwa 1,0 bis 1,2.
- Zeilen mit etwa 45 bis 75 Zeichen sind der Bereich, der für angenehmes Lesen am häufigsten empfohlen wird.
- Zwei oder drei Schriftstärken reichen für die meisten Designs, und sie sollten sich deutlich unterscheiden, etwa Regular und Bold statt Regular und Medium.

**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.

| Stufe | Verhältnis 1,25 ab 16 px | Typische Nutzung |
| --- | --- | --- |
| Klein | 12,8 px | Bildunterschriften, Labels |
| Basis | 16 px | Fließtext |
| Stufe 1 | 20 px | Einleitung, großer Fließtext |
| Stufe 2 | 25 px | Zwischenüberschriften |
| Stufe 3 | 31,25 px | Abschnittsüberschriften |
| Stufe 4 | 39 px | Seitentitel |
| Stufe 5 | 48,8 px | Hero-Überschriften |

Eine Skala mit 1,25 ab einer Basis von 16 Pixeln. Runde die Zahlen nach Belieben; entscheidend ist, dass jede Größe mit den anderen zusammenhängt.

```css
: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); }
```

Dieselbe Skala als CSS Custom Properties, mit einer Grundgröße von 16 Pixeln. Nutze nur die Stufen der Skala.

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.

### Durcheinander

- Fünf Stärken auf einer Seite
- Regular 400 gegen Medium 500 zur Betonung
- Light oder Thin für kleinen Fließtext
- Bold für ganze Absätze

### Klar

- Zwei oder drei Stärken, jede mit einer Aufgabe
- Regular 400 gegen Bold 700 oder Semibold 600
- Regular oder Medium für kleinen Fließtext
- Bold für ein paar Wörter, die herausstechen müssen

## 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](https://gradiently.design/de/guide/line-height-and-line-length) 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](https://gradiently.design/de/guide/letter-spacing) 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.

Ein Hochformat-Beitrag mit einer großen Überschrift, einem kleinen gesperrten Label darüber und einer Begleitzeile darunter

Drei Größen aus einer Skala, zwei Stärken, enger Zeilenabstand bei der Überschrift und etwas mehr Laufweite beim kleinen Label darüber.

## 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.

```css
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);
}
```

Zeilenlänge, Zeilenabstand und Laufweite in einem kleinen Stylesheet. `text-wrap: balance` wird dort, wo es nicht unterstützt wird, gefahrlos ignoriert.

## 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](https://gradiently.design/de/guide/visual-hierarchy) baut darauf auf.

1. **Eine Fließtextgröße wählen** 16 Pixel oder mehr auf Bildschirmen; viel mehr bei Social-Media-Beiträgen.
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. **Zwei Stärken festlegen** Regular zum Lesen, Bold oder Semibold für Betonung und Überschriften.
4. **Zeilenabstände festlegen** Etwa 1,5 für Fließtext, etwa 1,1 für große Überschriften.
5. **Die Zeilenlänge begrenzen** Rund 65 Zeichen für Fließtext.
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](https://gradiently.design/de/guide/font-pairing) und [Serif oder Sans Serif](https://gradiently.design/de/guide/serif-vs-sans-serif).

## FAQ

### Was sind die Grundregeln der Typografie?

Nutze eine einheitliche Schriftskala, zwei oder drei deutlich verschiedene Stärken, einen Zeilenabstand von etwa 1,4 bis 1,6 für Fließtext, Zeilen mit etwa 45 bis 75 Zeichen, linksbündigen Satz für lange Texte und einheitliche Abstände.

### Welche Schriftgröße ist gut für Fließtext auf Websites?

16 Pixel sind ein gängiges Minimum für Fließtext auf Bildschirmen, und viele Websites nutzen etwas mehr.

### Welchen Zeilenabstand sollte ich nutzen?

Etwa das 1,4- bis 1,6-Fache der Schriftgröße für Fließtext und etwa 1,0 bis 1,2 für große Überschriften.

### Was ist eine Schriftskala?

Eine Reihe von Schriftgrößen, bei der jede um ein festes Verhältnis größer ist als die vorige, etwa 1,25, sodass jede Größe mit den anderen zusammenhängt und die Hierarchie einheitlich bleibt.