# Typografiesystem: Rollen für jede Schrift festlegen

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

Schriften zu wählen ist der leichte Teil. Genau festzulegen, wie sie sich verhalten, in welcher Größe, welchem Schnitt, für welche Aufgabe, macht eine Marke überall konsistent.

## The short version

- Ein Typografiesystem ist ein kleiner Satz benannter Rollen wie Display, Überschrift, Text und Label, jede mit fester Schrift, festem Schnitt, fester Größe, Zeilenhöhe und Schreibweise.
- Größen in einem Typografiesystem stammen aus einer Skala, einer Basisgröße multipliziert mit einem konstanten Verhältnis, sodass jede Stufe zu den anderen in Beziehung steht.
- Die meisten Marken brauchen nur ein oder zwei Schriften; das System erzeugt Vielfalt durch Rollen, Schnitte und Größen.
- Design-Tokens speichern jede Rolle als benannten Wert, sodass Websites, Apps und Designdateien dieselben Typografie-Entscheidungen nutzen.
- Social-Posts, Folien und Websites brauchen für dieselben Rollen unterschiedliche Größen, ein gutes System listet deshalb jede Rolle pro Kanal auf.

Ein **Typografiesystem** ist der Regelsatz, der festlegt, wie sich Schrift in einer Marke verhält: wenige benannte Rollen (Display, Überschrift, Text, Label), jede mit einer Schrift, einem Schnitt, einer Größe, Zeilenhöhe und Schreibweise, alle aus einer einzigen Skala bemessen und als Tokens gespeichert, damit jede Designerin und jeder Entwickler dieselben Werte nutzt. Schriften geben einer Marke ihre Stimme. Das System macht diese Stimme konsistent, sodass eine Schlagzeile auf einem Poster, einer Website und einer Story alle aus demselben Haus zu kommen scheinen. So baust du eines.

## Die Rollen in einem Typografiesystem

Beginne mit Aufgaben, nicht mit Schriften. Jeder Text, den eine Marke veröffentlicht, erfüllt eine von wenigen Aufgaben, und jede Aufgabe wird zu einer Rolle. Die meisten Marken brauchen fünf bis sieben.

| Rolle | Aufgabe | Typische Einstellung |
| --- | --- | --- |
| Display | Die größten Wörter: Kampagnenzeilen, Cover, Hero-Titel | Überschriftschrift, Bold, enge Zeilenhöhe, wenige Wörter |
| Überschrift | Abschnittstitel und Post-Schlagzeilen | Überschriftschrift, Semibold oder Bold, Satzschreibweise |
| Zwischenüberschrift | Leitet in einen Abschnitt ein, Vorspann | Textschrift, Medium, eine Stufe über dem Text |
| Text | Lesetext | Textschrift, Regular 400, Zeilenhöhe um 1,5 |
| Label und Eyebrow | Kleiner Text über Schlagzeilen, Tags, Buttons | Textschrift, Semibold, oft Versalien mit zusätzlicher Laufweite |
| Bildunterschrift | Nachweise, Fußnoten, Kleingedrucktes | Textschrift, Regular, kleinste Stufe |
| Zahlen | Preise, Statistiken, Tabellen | Tabellenziffern, damit Ziffern bündig stehen |

Sieben Rollen decken fast jede Marke ab. Kannst du nicht sagen, welche Aufgabe ein Stil erfüllt, ist er keine Rolle, sondern eine Ausnahme.

Ein Hochformat-Post im Newsletter-Stil mit kleiner Eyebrow, großer Schlagzeile und kurzer Begleitzeile

Drei Rollen in einem Post: ein Eyebrow-Label, eine Überschrift und eine Textzeile. Jede ist sofort unterscheidbar, sodass das Auge weiß, wo es beginnt.

## Wie viele Schriften ein Markentypografiesystem braucht

Meist eine oder zwei. Eine Familie in drei Schnitten kann ein ganzes System tragen. Zwei Schriften, eine für Überschriften und eine für Text, geben Charakter. Eine dritte ist nur für eine besondere Aufgabe wie Code oder Daten gerechtfertigt. Die Vielfalt kommt aus Rollen, Größen und Schnitten, nicht aus mehr Schriften. [Google-Fonts-Kombinationen](https://gradiently.design/de/guide/google-fonts-pairings) und [Markenschriften](https://gradiently.design/de/guide/brand-fonts) helfen bei der Wahl.

### Vermeiden

- Eine neue Schrift für jede Kampagne
- Größen, die bei jedem Design nach Augenmaß gewählt werden
- Neun Schnitte geladen, drei genutzt
- Verschiedene Schreibweise-Regeln in verschiedenen Teams
- Ein Styleguide, der Schriften auflistet, aber keine Rollen

### Besser so

- Eine oder zwei Familien für alles
- Jede Größe aus einer Skala
- Nur die Schnitte, die die Rollen brauchen
- Eine schriftliche Schreibweise-Regel für Überschriften und Buttons
- Rollen mit Schrift, Schnitt, Größe, Zeilenhöhe und Schreibweise

## Eine Typografie-Skala aufbauen

Eine Typografie-Skala wählt eine Basisgröße und multipliziert sie für jede Stufe nach oben mit demselben Verhältnis. Die Stufen stehen in Beziehung zueinander, sodass je zwei Größen im System zusammen bewusst wirken. Ein Verhältnis von 1,25 passt zu Oberflächen und dichten Seiten; 1,333 oder 1,5 bringt mehr Dramatik für Editorial und Marketing. [Typografische Skala](https://gradiently.design/de/guide/typographic-scale) erklärt die Verhältnisse genauer.

| Stufe | Größe bei 1,25 ab 16 px | Rolle |
| --- | --- | --- |
| Stufe 0 | 16 px | Text |
| Stufe 1 | 20 px | Zwischenüberschrift, großer Text |
| Stufe 2 | 25 px | Kleine Überschrift |
| Stufe 3 | 31 px | Überschrift |
| Stufe 4 | 39 px | Große Überschrift |
| Stufe 5 | 49 px | Display auf dem Handy |
| Stufe 6 | 61 px | Display am Desktop |
| Stufe minus 1 | 13 px | Bildunterschrift, Label |

Eine Web-Skala aus 16 px Basis bei einem Verhältnis von 1,25, auf ganze Pixel gerundet. Jede Rolle nimmt eine Stufe und behält sie.

## Das System als Tokens speichern

Ein System, das nur in einer PDF lebt, driftet. Tokens sind benannte Werte, die Code und Designdateien beide lesen, sodass eine Änderung an einem Wert alles aktualisiert. Benenne Tokens nach Rolle, nie nach Größe: `--type-heading` übersteht ein Redesign, `--type-31` nicht. [Design-Tokens](https://gradiently.design/de/guide/design-tokens) behandelt die weitere Idee.

```css
:root {
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;

  --type-display: 600 clamp(3.0625rem, 6vw, 3.8125rem) / 1.05 var(--font-heading);
  --type-heading: 600 1.9375rem / 1.15 var(--font-heading);
  --type-subheading: 500 1.25rem / 1.4 var(--font-body);
  --type-body: 400 1rem / 1.5 var(--font-body);
  --type-label: 600 0.8125rem / 1.2 var(--font-body);
}

h1 { font: var(--type-display); }
h2 { font: var(--type-heading); }
p { font: var(--type-body); }
.eyebrow { font: var(--type-label); text-transform: uppercase; letter-spacing: 0.08em; }
.price { font-variant-numeric: tabular-nums; }
```

Jede Rolle ist ein Font-Shorthand-Token, sodass Schnitt, Größe, Zeilenhöhe und Familie immer zusammen reisen. Die Werte entsprechen der obigen Skala in rem.

## Eine Rolle, unterschiedliche Größen je Kanal

Eine Überschrift auf einer Website und eine Überschrift auf einem Instagram-Post erfüllen dieselbe Aufgabe in sehr verschiedenen Größen, weil die eine auf einem großen Bildschirm in Armeslänge gelesen wird und die andere in einem Handy-Feed schrumpft. Halte die Rollen identisch und gib jedem Kanal eigene Größen.

| Rolle | Website | Social-Post 1080×1350 | Folien 1920×1080 |
| --- | --- | --- | --- |
| Display | 49 bis 61 px | 140 bis 200 px | 120 bis 160 px |
| Überschrift | 31 px | 90 bis 120 px | 88 bis 112 px |
| Text | 16 px | 40 bis 48 px | 48 bis 64 px |
| Label und Eyebrow | 13 px | 28 bis 32 px | 36 bis 44 px |

Dieselben Rollen, dieselben Schriften, dieselben Schnitte, andere Größen. [Schriftgröße für Instagram-Posts](https://gradiently.design/de/guide/font-size-for-social-media) und [Präsentationsschriften](https://gradiently.design/de/guide/typography-for-presentations) erklären die Zahlen für Social und Folien.

## So baust du dein Typografiesystem

1. **Sammle, was du schon veröffentlichst** Mache Screenshots von deiner Website, Posts, E-Mails und Folien. Umkreise jeden eigenständigen Textstil. Die meisten Marken finden weit mehr, als sie wollten.
2. **Stile zu Rollen gruppieren** Führe Beinahe-Duplikate zusammen. Ziele auf fünf bis sieben Rollen, die alles abdecken, was du umkreist hast.
3. **Schriften für die Rollen wählen** Meist eine Überschriftschrift und eine Textschrift. Prüfe, ob die Lizenz Web, Apps und jede Logonutzung abdeckt.
4. **Skala und Details festlegen** Wähle Basis und Verhältnis und lege dann Schnitt, Zeilenhöhe, Schreibweise und Abstand jeder Rolle fest. Entscheide die Schreibweise der Überschriften einmal; [Satzschreibweise oder Title Case](https://gradiently.design/de/guide/title-case-vs-sentence-case) hilft.
5. **Als Tokens und einseitiges Blatt veröffentlichen** Tokens für Code und Designdateien, ein einzelnes visuelles Blatt in deinem [Marken-Styleguide](https://gradiently.design/de/guide/brand-style-guide) für alle anderen.

Für alltägliche Social-Posts und Decks hält ein Gradiently-Markenkit (im Pro-Plan) die Überschrift- und Textschrift deines Systems, auch hochgeladene Schriftdateien, neben deinen Logos, Farben und deiner Stimme. Neue Designs starten mit diesen zwei Schriften, und der Designer wendet das Kit an, wenn er ein Design aufbaut, sodass die Trennung von Überschrift und Text hält, ohne dass jemand daran denken muss.

## FAQ

### Was ist ein Typografiesystem?

Ein Satz benannter Schriftrollen wie Display, Überschrift, Text und Label, jede mit fester Schrift, festem Schnitt, fester Größe, Zeilenhöhe und Schreibweise, meist als Design-Tokens gespeichert.

### Wie viele Schriften sollte eine Marke nutzen?

Für die meisten Marken eine oder zwei: eine für Überschriften und eine für Text. Eine dritte lohnt sich nur für eine besondere Aufgabe wie Code oder Daten.

### Was ist eine Typografie-Skala?

Eine Folge von Schriftgrößen, die entsteht, indem eine Basisgröße mit einem konstanten Verhältnis wie 1,25 multipliziert wird, sodass jede Größe im System zu den anderen in Beziehung steht.

### Wie sollten Typografie-Tokens benannt werden?

Nach Rolle, etwa type-heading oder type-body, nicht nach Größe. Rollennamen bleiben sinnvoll, wenn sich die Größen ändern.

### Sollten Social-Posts dieselben Schriftgrößen wie eine Website nutzen?

Nein. Behalte dieselben Rollen und Schriften, nutze aber auf Posts viel größere Größen, weil sie in einem Handy-Feed klein betrachtet werden.