← Design Rules

Typografie

Betone mit einem Mittel, nicht mit zweien

Geltung
universal · web, react-native

Warum

Größe und Gewicht sagen dasselbe: schau hierhin. Setzt Du beides zugleich ein, verstärken sie sich nicht, sie verstopfen sich. Eine große Zahl im fetten Schnitt wirkt nicht wichtiger, nur schwer — 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 von selbst: 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 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.

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

Verwandt