Was ist eine typografische Skala?

Eine typografische Skala ist die geordnete Menge der Schriftgrößen, die ein Designsystem zulässt, meist erzeugt durch Multiplikation einer Basisgröße mit einem festen Verhältnis. Text auf diese Stufen zu beschränken hält die Typografie einer von vielen Menschen gebauten Oberfläche konsistent.

Wie eine Skala entsteht

Wähle eine Basisgröße, üblicherweise 16px, weil das die Browser-Voreinstellung ist und die Größe, die Fließtext im Allgemeinen haben sollte. Wähle ein Verhältnis. Multipliziere nach oben und nach unten.

Ein Verhältnis von 1,25 (eine große Terz) ab einer Basis von 16px ergibt ungefähr:

12px  ← 16 / 1,25 / 1,067
14px
16px  ← Basis
20px
25px
31px
39px

Anschließend werden die Werte auf etwas Sinnvolles gerundet. Übliche Verhältnisse reichen von 1,125 (zurückhaltend, gut für dichte Oberflächen) bis 1,5 (dramatisch, eher für Marketingseiten als für Anwendungen).

Warum Größen überhaupt beschränken

Ohne Skala werden Größen einzeln gewählt, und eine Anwendung sammelt Text in 13px, 14px und 15px an, den niemand unterschiedlich haben wollte. Das liest sich leicht unfertig, ohne dass ein einzelnes Element erkennbar falsch wäre.

Eine Skala macht außerdem den vertikalen Rhythmus beherrschbar. Wenn Größen über ein bekanntes Verhältnis zusammenhängen, können Zeilenhöhen und Abstände sich vorhersagbar darauf beziehen, statt pro Komponente justiert zu werden.

Was eine Größe allein nicht abdeckt

Eine Größe ist nur ein Teil einer typografischen Entscheidung. Ein vollständiger Token-Satz koppelt an jede Stufe:

  • Zeilenhöhe: enger bei Überschriften, luftiger bei Fließtext. Grob 1,2 für Display-Größen und 1,5 für Fließtext ist eine vernünftige Voreinstellung.
  • Schnitt: welche Schnitte in welchen Größen verfügbar sind
  • Laufweite: großer Display-Text braucht meist leicht negatives Tracking, kleiner Text oft leicht positives

Systeme, die nur die Größe tokenisieren, überlassen die anderen drei jeder Komponente zur Neuentscheidung - und genau dort kehrt die Inkonsistenz zurück.

Semantische Benennung

Stufen nach ihrer Rolle statt nach ihrer Größe zu benennen lohnt sich aus demselben Grund wie bei Farbe:

--font-size-body: 16px;
--font-size-heading-2: 25px;

--text-lg beschreibt eine Größe. --font-size-heading-2 beschreibt eine Entscheidung, und zu ändern, worauf es zeigt, erfordert nicht, jede Überschrift zu finden.

Die Schriftwahl

Die übliche Paarung ist eine Display-Schrift mit Charakter für Überschriften und eine sehr gut lesbare Arbeitsschrift für den Fließtext. Der Fehlerfall ist, zwei Schriften zu wählen, die einander ähneln, ohne identisch zu sein - das liest sich als Versehen statt als Entscheidung. Kontrastiere oder gleiche an; bleibe nicht im Fast-gleich.

Wo Flash DSM hier steht

Erzeugte Systeme enthalten eine Schriftpaarung und eine vollständige Skala mit Tokens für Größe, Schnitt, Zeilenhöhe und Laufweite auf jeder Stufe, passend zu dem im Prompt beschriebenen Produkt gewählt.