Typografie-Tokens benennen (display, heading, body, caption)

Benenne Typografie-Tokens nach der Rolle, die der Text spielt — display, heading-lg, body-md, caption — niemals nach ihren Werten (font-24) oder den HTML-Elementen, die sie gestalten (h2-size). Wertnamen veralten in dem Moment, in dem die Skala neu justiert wird, und Elementnamen koppeln den visuellen Stil an das Dokument-Markup — zwei verschiedene Entscheidungen. Ein Rollenname benennt das eine, was am Token wahr bleiben soll: welche Aufgabe dieser Text erfüllt.

Die zweite Hälfte der Regel ist genauso wichtig: Ein Typografie-Token ist zusammengesetzt. Größe, Zeilenhöhe, Schriftstärke und Laufweite reisen gemeinsam unter dem Rollennamen — ein body-md, das nur eine Größe trägt, ist kein Stil, sondern eine Zahl. Dieser Artikel behandelt beide Hälften, die T-Shirt-Größen-Konvention, die Rollen-Sets klein hält, und den Export-Pfad, der die Namen in CSS, Tailwind und Figma trägt. Er ist Teil unseres Leitfadens zur Schriftgrößenskala.

Warum Tokens nicht nach Werten benennen?

Weil Werte genau der Teil des Systems sind, der sich ändern soll. Angenommen, deine Skala erzeugt eine 24px-Überschriftengröße und du nennst das Token font-24. Im nächsten Quartal wird das Verhältnis von 1,25 auf 1,333 verschoben, und dieser Schritt ergibt jetzt 25px. Deine Optionen sind beide schlecht: das Token überall umbenennen, wo es verwendet wird — eine brechende Änderung in jedem Stylesheet, jeder Komponente und jeder Design-Datei, die darauf verweist — oder ein Token namens font-24 behalten, dessen Wert 25 ist, was noch schlimmer ist, weil der Name jetzt aktiv lügt.

Ein Rollenname übersteht die Neujustierung unberührt. heading-md kann von 24px auf 25px wechseln, und jede Verwendung bleibt korrekt, weil der Name nie einen Wert beansprucht hat — er beanspruchte eine Aufgabe, und die Aufgabe hat sich nicht geändert. Das ist dieselbe Überlegung, die Farbsysteme von Namen wie blue-500 für semantische Slots wegführt: Benenne die Entscheidung, nicht die aktuelle Antwort.

Warum Tokens nicht nach Elementen benennen?

h2-size sieht harmlos aus — bis Stil und Markup auseinandergehen müssen, was in echten Produkten ständig passiert. Überschriftenebenen in HTML drücken die Dokumentstruktur aus: Ein h2 ist „ein Abschnitt eine Ebene unter einem h1”, ein Fakt, auf den sich Screenreader und Gliederungen verlassen. Der visuelle Rang ist eine separate Entscheidung. Ein Kartentitel kann auf dem Dashboard ein h3 und auf seiner eigenen Seite ein h2 sein, während er an beiden Stellen identisch aussieht; eine Rechtsseite kann sechs Strukturebenen tragen, aber nur drei Ebenen visueller Differenzierung.

Element-benannte Tokens erzwingen eine Wahl zwischen zwei Fehlermodi: das Element wegen seines Aussehens wählen (falsche Gliederung, ein Nachteil für die Barrierefreiheit) oder es wegen der Struktur wählen und den falschen Stil bekommen. Rollen-benannte Tokens lösen den Konflikt auf — jedes Element kann heading-md tragen, und die Dokumentgliederung bleibt eine unabhängige, semantische Entscheidung.

Was enthält ein Typografie-Token eigentlich?

Einen kompletten Textstil. Die Eigenschaften eines Textstils werden als Einheit abgestimmt: Eine 28px-Überschrift erhält ihre 36px-Zeilenhöhe, weil sie 28px groß ist, ihre Schriftstärke 600, weil Überschriften sich über ihre Dunkelheit abstufen, ihre Laufweite von −0,01em, weil die eingebaute Schriftlaufweite bei wachsenden Größen locker wirkt. Wende die Größe ohne den Rest an, und du hast nicht den Stil angewendet — du hast ein Fragment angewendet und die anderen drei Eigenschaften dem überlassen, was der Kontext zufällig vererbt.

Deshalb definiert das DTCG-Token-Format typography als zusammengesetzten Typ: ein Token, dessen Wert das ganze Bündel ist — Schriftfamilie, Größe, Schriftstärke, Zeilenhöhe, Laufweite — statt fünf loser Tokens, die darauf hoffen, gemeinsam verwendet zu werden.

Wie funktioniert die T-Shirt-Größe-innerhalb-der-Rolle-Konvention?

Die meisten Systeme einigen sich auf einen zweiteiligen Namen: zuerst die Rollenfamilie, dann eine T-Shirt-Größe innerhalb der Rolle — body-sm, body-md, body-lg. Die Familien sind wenige und stabil: display ganz oben, eine Reihe von heading-Größen, eine Reihe von body-Größen und die kleinen Hilfsrollen — caption und overline — ganz unten. Das T-Shirt-Suffix fängt Wachstum ab: Wenn ein Design tatsächlich einen größeren body-Stil braucht, erscheint body-lg, ohne dass etwas Bestehendes umbenannt wird.

Zwei Konventionen halten die Sets ehrlich. Rollen, die nur einmal vorkommen, bekommen kein Suffix — caption statt caption-md — bis tatsächlich eine zweite Variante existiert. Und display steht über der Heading-Reihe als eigene Familie statt als heading-xl, weil seine Aufgabe (eine Hero-Aussage, die man auf einen Blick erfasst) sich von der Aufgabe einer Überschrift (Wegweisung) unterscheidet, und weil seine Eigenschaften — engere Zeilenhöhe, engere Laufweite — das Heading-Muster brechen statt es zu erweitern.

Wie sieht ein vollständiges Rollen-Set aus?

Hier ist ein ausgearbeitetes Set, erzeugt aus einer 16px-Basis mit Verhältnis 1,333 mit zwei Noten pro Intervall, wobei die Zeilenhöhen auf das 8px-Grundlinienraster (die Hälfte der Basis) eingerastet sind und die Schriftfamilie der Kürze halber weggelassen wurde:

{
  "type": {
    "display":    { "$type": "typography", "$value":
      { "fontSize": "51px", "lineHeight": "56px", "fontWeight": 700, "letterSpacing": "-0.02em" } },
    "heading-lg": { "$type": "typography", "$value":
      { "fontSize": "38px", "lineHeight": "48px", "fontWeight": 700, "letterSpacing": "-0.015em" } },
    "heading-md": { "$type": "typography", "$value":
      { "fontSize": "28px", "lineHeight": "36px", "fontWeight": 600, "letterSpacing": "-0.01em" } },
    "heading-sm": { "$type": "typography", "$value":
      { "fontSize": "21px", "lineHeight": "28px", "fontWeight": 600, "letterSpacing": "0em" } },
    "body-lg":    { "$type": "typography", "$value":
      { "fontSize": "18px", "lineHeight": "28px", "fontWeight": 400, "letterSpacing": "0em" } },
    "body-md":    { "$type": "typography", "$value":
      { "fontSize": "16px", "lineHeight": "24px", "fontWeight": 400, "letterSpacing": "0em" } },
    "body-sm":    { "$type": "typography", "$value":
      { "fontSize": "14px", "lineHeight": "20px", "fontWeight": 400, "letterSpacing": "0em" } },
    "caption":    { "$type": "typography", "$value":
      { "fontSize": "12px", "lineHeight": "16px", "fontWeight": 400, "letterSpacing": "0.02em" } },
    "overline":   { "$type": "typography", "$value":
      { "fontSize": "12px", "lineHeight": "16px", "fontWeight": 500, "letterSpacing": "0.08em" } }
  }
}

Jede Größe sitzt auf der Skala, jede Zeilenhöhe ist ein Vielfaches des 8px-Grundlinienrasters, und jedes Token liest sich als vollständiger Stil — die prüfende Person sieht auf einen Blick, dass kleine Größen an Schriftstärke und Laufweite gewinnen, während große Größen beides abwerfen.

Das ist die Form, die Scale Composer zusammensetzt, während du Skalenschritte den Rollen zuweist: öffne den Token-Export für diese Skala — die semantischen Ebenen von caption bis display, jede mit ihrer Größe, Zeilenhöhe, Schriftstärke und Laufweite unter ihrem Rollennamen versammelt.

Wie gelangen Rollen-Tokens in Code- und Design-Tools?

Die Rollennamen sind der Vertrag; die Formate sind die Transportmittel. Aus einer DTCG-Quelle exportiert dasselbe Set als CSS Custom Properties, als Tailwind-v4-@theme-Block und als Figma Variables — sodass das body-md, das eine Designerin in Figma anwendet, und das body-md, auf das eine Entwicklerin in einem Stylesheet verweist, dasselbe Token sind, nicht zwei Konventionen, die sich zufällig reimen. Dieses gemeinsame Vokabular ist der eigentliche Gewinn der Rollen-Benennung: „Mach es zu heading-sm” ist eine Anweisung, die beide Seiten ohne Übersetzungstabelle ausführen können, und eine Neujustierung der Skala pflanzt sich auf jede Oberfläche fort, indem die Exporte neu erzeugt werden, statt irgendetwas umzubenennen.

Benenne dein eigenes Set

Benennen gelingt am leichtesten, solange die Werte noch live sind: öffne dasselbe Rollen-Set als Tailwind-v4-@theme-Ausgabe, benenne eine Ebene um und prüfe den entscheidenden Instinkt — wäre dieser Name morgen noch wahr, wenn sich jeder Pixelwert in der Datei änderte? Wenn ja, ist es eine Rolle. Wenn nein, ist es ein Wert mit einem Namensschild.