Typografie

Die Skala ist eine Entscheidung über die Dichte und die Typen sind eine Entscheidung über die Schriftarten: Diese Seite zeigt, wie eine Form gelesen wird, nicht was sie heute wert ist. Wechsle die Schriftarten-Achse im Debug-Bereich und alles darunter wird in einer anderen Schriftart gesetzt, ohne dass sich eine Regel ändert.

Familien

Drei, denn das ist es, was eine Seite unterscheidet: in welcher Schrift es geschrieben ist, in welcher es betitelt ist und was als getippt und nicht als gesagt gelesen werden soll. Ein Set kann allen dreien die gleiche Schriftart geben – das System tut dies.

--font-family-base

Der schnelle braune Fuchs springt über den faulen Hund — 0123456789

--font-family-heading

Der schnelle braune Fuchs springt über den faulen Hund — 0123456789

--font-family-mono

Der schnelle braune Fuchs springt über den faulen Hund — 0123456789

Gewichte

Benannt nach dem Maß, wie sehr sie bestehen, niemals nach Zahlen. Eine Schriftart, deren 500 nicht existiert, mappt sie auf das, was sie hat, und die Formen, die nach einem Medium fragen, fragen weiterhin nach einem Medium.

--font-weight-normal — Der schnelle braune Fuchs springt über den faulen Hund — 0123456789

--font-weight-medium — Der schnelle braune Fuchs springt über den faulen Hund — 0123456789

--font-weight-strong — Der schnelle braune Fuchs springt über den faulen Hund — 0123456789

--font-weight-bold — Der schnelle braune Fuchs springt über den faulen Hund — 0123456789

Schriftgröße

Design-System — Bausteine für großartige Benutzeroberflächen

Einmal pro Seite verwendet. Setzt den primären Kontext. Kombiniert mit einem kurzen einleitenden Absatz.

Typografie etabliert Hierarchie und Rhythmus

Überschrift auf Abschnittsebene. Gruppiert verwandte Inhalte. Wird normalerweise von Fließtext oder Unterabschnitten gefolgt.

Abstand und Proportionen formen die Lesbarkeit

Überschrift für Unterabschnitte. Führt ein fokussiertes Thema innerhalb eines Abschnitts ein.

Farbe und Kontrast führen das Auge

Verwendet für Kartentitel, Sidebar-Abschnitte oder kleinere Gruppierungen.

Interaktive Zustände müssen offensichtlich sein

Labels, Metadatenüberschriften, kleine Gruppierungen. Subtil, aber deutlich vom Fließtext unterschieden.

Barrierefreiheit ist ein Merkmal, kein Nachgedanke

Die kleinste Überschriftsebene. Sparsam verwenden — für Fußnoten, rechtliche Blöcke oder Hilfslabels.