Typografiesystem: Rollen für jede Schrift festlegen

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.

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 und Markenschriften helfen bei der Wahl.

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 erklärt die Verhältnisse genauer.

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 behandelt die weitere Idee.

: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; }

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.

So baust du dein Typografiesystem

1. 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. 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. 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. 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 hilft.

5. 5

   Als Tokens und einseitiges Blatt veröffentlichen

   Tokens für Code und Designdateien, ein einzelnes visuelles Blatt in deinem Marken-Styleguide 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.