← Design Rules

Typografie

Betone mit einem Mittel, nicht mit zweien

Geltung
universal · web, react-native

Warum

Größe und Gewicht lenken beide den Blick auf eine Stelle. Setzt Du beides zugleich ein, wird die Betonung nicht stärker. Eine große Zahl im fetten Schnitt wirkt nur schwerer. Die Innenräume der 8, der 0 und der 6 laufen zu, und die Ziffern rücken zusammen. Auf großen Graden ist genau das der sichtbarste Nebeneffekt von Fettung.

Eine kleine Überschrift hat das umgekehrte Problem. Sie kann sich über die Größe kaum vom Fließtext lösen, weil der Unterschied zu klein wäre, um zu wirken. Dort ist das Gewicht das richtige Mittel.

Daraus folgt die Aufteilung: klein und schwer für Überschriften, groß und normal für Kennzahlen. Beides betont gleich stark, nur mit verschiedenen Mitteln.

Ein häufiger Widerspruch löst sich damit auf. Ein Token-Export nennt für Zahlen oft ein leichteres Gewicht als für Überschriften. Das ist kein Fehler im Export, das ist diese Unterscheidung.

Hart und weich

Status
Ein Element wird nicht gleichzeitig über Größe und Gewicht betont, außer Titelstufen hart
Eine alleinstehende große Zahl läuft im normalen Schnitt hart
Gewichte kommen aus der Skala, nicht aus der Ansicht hart
Welche Gewichte und Größen das sind weich

Woran Du den Verstoß erkennst

Richtig / falsch

        RICHTIG                             FALSCH

  Runway                              Runway
  14,2 Monate                         14,2 Monate
  ^^^^^^^^^^^                         ^^^^^^^^^^^
  Titel klein und schwer              beides groß und schwer
  Zahl groß und normal                Zahl wirkt gedrungen

Grenzen

Eine Zahl im Fließtext ist keine alleinstehende Zahl und folgt dem Text.

Titelstufen dürfen Größe und Gewicht zusammen nutzen. Dort betonen sie keinen Wert. Sie machen jede Titelstufe der Gliederung sichtbar. Das regelt Die Titel bilden eine Gliederung.

Marketing- und Titelseiten dürfen mit ihren eigenen Display-Stufen arbeiten. Dort ist Schrift Bild, und ein Bild darf laut sein.

Verwandt