Typografie der Schnittstelle

1) Die Rolle der Typografie im Produkt

• beschleunigt das Scannen und reduziert die kognitive Belastung,
• bildet eine Hierarchie und hilft, den Zustand zu navigieren,
• erhöht die Konversion (CTA, Formulare) und reduziert Fehler,
• macht die Schnittstelle zugänglich und resistent gegen Lokalisierung.

2) Grundparameter

Kögl (Haupttext): 16-18 px auf dem Desktop, 15-16 px auf dem Handy.
Zeilenabstand (Zeilenabstand): 1. 45–1. 6 für den Text, 1. 2–1. 35 für Überschriften.
Zeilenlänge (Maß): 45-80 Zeichen; in Sidebars - 36-60.
Zeichenabstand (Tracking): 0-1% für Klartext; für kapsa - + 2-4%.
Kontrast (WCAG): Klartext ≥ 4. 5:1, groß/fett ≥ 3: 1.
Register: Vermeiden Sie dauerhafte ALL CAPS; Verwenden Sie für Tags/Chips, kompensieren Sie Tracking.

3) Hierarchie und Größenskala

Wir empfehlen den modularen Ansatz: 8-pt Raster + typografische Skala.

• Display: 40/48 (LH 1. 15)
• H1: 32/40 (1. 25)
• H2: 24/32 (1. 25)
• H3: 20/28 (1. 3)
• H4: 18/26 (1. 4)
• Body/L: 18/28 (1. 55)
• Body/M: 16/26 (1. 55)
• Body/S: 14/22 (1. 5)
• Caption: 12/18 (1. 5)
• Mono/UI: 12–14/18–20

• Zwischen benachbarten Ebenen - ein bemerkenswerter Schritt (mindestens 12-16%).
• Die Hierarchie wird durch eine Kombination aus Größe, Gewicht, Zeilenabstand, Farbe (unter Berücksichtigung des Kontrastes) und Abständen zu benachbarten Blöcken aufgebaut.

4) Höhe, Grundlinie und Optik

Richten Sie die Elemente an der Höhe der Überschriften aus (praktisch für Symbole).
Pflegen Sie die Grundlinie des Textes mit einem 4/8-pt-Schritt - gleichmäßige Rhythmen erleichtern das Lesen.
Optische Einzüge: Überschriften über dem Block - größer als darunter (z.B. + 4-8 px oben).

5) Beschriftungen und variable Schriften

Mindestsatz: Regular, Medium, SemiBold (Bold optional).
Verwenden Sie Ultra-Light/Thin nicht in der Benutzeroberfläche.

• Körper: 420-470 (optisch gleichmäßiger als 400).
• UI labels: 500–550.
• Headers/CTA: 600–650.
• Wenn Sie den Stift reduzieren - erhöhen Sie das Gewicht leicht (Ausgleich).
• Deaktivieren Sie dekorative Ligaturen in UI-Zahlen; halten Sie die Standardligaturen für kyrillisch/lateinisch.

6) Zahlen, Tabellen und Datavis

Aktivieren Sie Tabularfiguren (Monospan-Ziffern) für Summen, Koeffizienten, Timer, Bewertungen.
+/ − Zeichen - immer sichtbar und mit ausreichendem Kontrast; negative Werte nicht nur farblich hervorheben (Icon/Pfeil/Fett).
Verwenden Sie für Geldwerte ein schmales Leerzeichen als dünnes Bit-Trennzeichen (oder lokales Format).
In Tabellen an Dezimalstellen ausrichten; für Mono-Lautsprecher - Mono-Breitschrift.
In den Diagrammen ≥ die Signaturen der Achsen 12 px (mobil) und ≥ 13-14 px (Desktop), LH 1. 3; Legenden ≥ 4. 5:1 zum Hintergrund.

7) Formulare, Inputs, Nachrichten

Etiketten 12-14 px, LH 1. 3–1. 4, Regulator oder Medium.
Placeholder sollte keine „graue Luft“ sein - Ziel 3:1 zum Hintergrund, optisch vom Text zu unterscheiden.
Fehler/Erfolg/Helptext 12-14 px; Verlassen Sie sich nicht nur auf die Farbe (Icon/Text).

8) Dunkle/helle Themen

Vermeiden Sie in einem dunklen Thema # FFF auf # 000: Heben Sie den Hintergrund zum L≈0. 14–0. 18, und reduzieren Sie den Text auf L≈0. 9 - weniger Blendung.
Der Zeilenabstand im Dunkeln kann bei + 0 liegen. 05 höher für Komfort.
Links/Akzente im Dunkeln - Reduzieren Sie die Sättigung und erhöhen Sie die Helligkeit um 0. 02–0. 04.

9) Lokalisierung und Mehrsprachigkeit

Wählen Sie Familien mit voller Unterstützung für kyrillische/lateinische/griechische, Akzentzeichen und Währungen.
RTL: Icons/Ausrichtung spiegeln, aber nicht Zahlen und Latein; Testen Sie die Übertragungen.
Automatische Transporte („hyphens: auto“) nur in langen Inhaltsbereichen enthalten; in UI-Buttons - Übertragung verbieten.
Überprüfen Sie für Türkisch/Aserbaidschanisch die „İ/ı“ -Formulare.
Für Georgisch und Thai erhöhen Sie den Basiskegel um 1 px (Merkmale des Zeichens).

10) Verfügbarkeit (A11y)

Textkontrast: siehe § 2.
Fokusstile - ohne Farbe sichtbar: Unterlinie, Rahmen, Schatten, Versatz.
Die Schriftgröße wird systematisch skaliert (Unterstützung für OS-Textgröße).
Codieren Sie die Bedeutung nicht nur durch Farbe/Gewicht - fügen Sie explizite Beschriftungen und Symbole hinzu.

11) Schriftarten und Performance-Downloads

Die Ziele: Blockaden minimieren, vorhersehbares FOUT und stabiles CLS gewährleisten.

Teilmengen (Subset): Lateinisch, Kyrillisch, Zahlen/Zeichen - einzelne Dateien.
Formate: 'woff2' (primär), 'woff' als Fallback.
'font-display: swap' (oder 'optional' für kleinere Familien).

html
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/Inter-UI-subset. woff2">

Variable Schrift statt 3-4 Statik - oft günstiger im Gewicht.
Budget: ≤ 150-200 KB insgesamt auf den kritischen Weg (nach gzip/brotli).
Render: Vermeiden Sie mehrere Schatten/Masken auf dem Text; Nutzen Sie Systemeffekte sparsam.

12) Typografie-Token (Design-System)

type. scale.{role}     # h1, h2, body, caption, mono type. weight.{role}    # regular, medium, semibold type. leading.{role}    # line-height type. tracking.{role}   # letter-spacing type. feature. numeric   # tabular, lining

json
{
"type": {
"family": { "ui": "InterVariable", "mono": "JetBrainsMonoVariable" },
"scale": { "h1": 32, "h2": 24, "h3": 20, "body": 16, "caption": 12 },
"leading": { "h1": 40, "h2": 32, "h3": 28, "body": 26, "caption": 18 },
"weight": { "body": 450, "label": 520, "cta": 620 },
"numeric": { "figures": "tabular", "zeros": "slashed" }
}
}

css
:root {
--font-ui: "InterVariable", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-mono: "JetBrainsMonoVariable", ui-monospace, SFMono-Regular, Menlo, monospace;

--fs-h1: 32px; --lh-h1: 40px; --w-h1: 600;
--fs-h2: 24px; --lh-h2: 32px; --w-h2: 600;
--fs-h3: 20px; --lh-h3: 28px; --w-h3: 550;
--fs-body: 16px; --lh-body: 26px; --w-body: 450;
--fs-caption: 12px; --lh-caption: 18px; --w-caption: 450;

--tracking-caps: 0. 04em;
--tracking-default: 0em;
}
.u-num {
font-variant-numeric: tabular-nums lining-nums slashed-zero;
}

13) Layout und Rhythmus

8-pt vertikales Modul; Abstand zwischen Absätzen = 1 × Grundschritt.
Listen: Der Markierungseinzug ist an der Grundlinie des Textes ausgerichtet.
Schaltflächen und Felder - Die Höhe ist ein Vielfaches der Grundgitterlinie (z. B. 40/48/56 px).

14) Besonderheiten von iGaming (Workshop)

Quoten/Quoten, Salden, Timer - verwenden Sie Tabularzahlen, Monobreite in kritischen Spalten.
Führer/Ratings: Ausrichtung nach Kategorie, einheitliches Währungsformat, explizite „↑/↓“.
Verantwortungsvolle Benachrichtigungen (18 +, Limits, Risiken) - Minimum AAA im Kontrast, verwenden Sie keine ALL CAPS.
Werbebanner: Text nur auf Plaques/Overlays mit Kontrastkontrolle.

15) Anti-Muster

Licht/Thin auf kleinen Stiften.
Grauer Text auf farbigem Hintergrund ohne Kontrastprüfung.
Zwei oder mehr Headsets „für die Schönheit“.
Lange Zeilen (> 90 Zeichen) und enge Zeilenhöhe <1. 35.
Zahlen der proportionalen Breite in Tabellen/„ springende “Summen.
Erzwungene Transfers in Buttons/Labels.

16) Checkliste Revue

Leserlichkeit

• Body 16-18 px; LH ≥ 1. 45.
• Die Länge der Zeile beträgt 45-80 Zeichen.

Hierarchie

• Skala in Schritten ≥ 12%; Die Einzüge sind an das Raster angepasst.

Zahlen/Tabellen

• Tabular-nums für Summen/Koeffizienten; Dezimalausrichtung.

Fassbarkeit

• Der WCAG-Kontrast ist erreicht; Fokusstile sind ohne Farbe sichtbar.

Performance

• Subset/woff2; `font-display: swap`; Budget ≤ 200 KB.

Lokalisation

• Unterstützung für kyrillische/lateinische/RTL; Transporte/Diakritik überprüft.

17) A/B und Metriken

Testen Sie: Body ± 1 px-Kegel, Header-Skalenstufe, CTA-Gewicht, Zeilenabstand.
Messen Sie: Lesezeit, Scrolltiefe, CTR CTA, Formfehler, CLS (Textstabilität).

Kurze Zusammenfassung

Typografie ist das Skelett der Schnittstelle. Legen Sie eine vorhersehbare Skala fest, halten Sie Kontrast und Rhythmus, verwenden Sie variable Schriftarten und Tabularzahlen, optimieren Sie den Download. Dann wird die Benutzeroberfläche schnell gelesen, stabil laufen und für Themen und Sprachen skaliert.