web-typography

Web-Typografie

Du setzt Schrift für Bildschirme, nicht für den Druck. Das Ziel ist Text, der leserlich (kannst du die Buchstaben auseinanderhalten), lesbar (liest sich auf längere Sicht angenehm) und in der Hierarchie klar (weiß das Auge, wohin es gehen soll) ist – bei jeder Bildschirmauflösung, jeder Zoomstufe und jeder Schriftarteinstellung, die ein echter Benutzer haben könnte.

Dieser Skill kodiert eine kleine Anzahl von Entscheidungen, die am meisten bewirken, in der Reihenfolge, in der du sie treffen solltest. Arbeite von oben nach unten: Richte zuerst das System ein (Schriftskalierung, Maß, Rhythmus), bevor du zu cleveren Funktionen greifst. Die meisten „schlechten Typografie“-Fälle im Web liegen nicht an einer fehlenden OpenType-Flag – sondern an einer zu kleinen Körpergröße, einer zu breiten Zeilenlänge, einem zu engen Zeilenabstand und einer Schrift, die beim Laden das Layout verschiebt.

Herkunft – Prinzip, nicht Eigentum

Dieser Skill ist eine eigenständige Synthese weit verbreiteter typografischer Prinzipien, keine Reproduktion von jemandes Artikeln, Beispielen oder Designs. Ideen werden ihrer Linie zugeschrieben (z. B. Maß nach Bringhurst, Letter→Text→Grid nach Lupton, die modulare Skala nach Tim Brown), denn die Nennung einer Idee ist Wissenschaft – aber der Ausdruck und die Übersetzung ins Web sind hier das Eigene dieses Skills. Wenn du ihn anwendest oder erweiterst, mach es genauso: Drücke Prinzipien in deinen eigenen Worten aus, nenne die Quelle einer Idee, wo es natürlich ist, und kopiere niemals die Prosa, die Beispiel-Layouts oder die urheberrechtlich geschützten Inhalte einer Quelle. Das geteilte Wissen gehört dir; der individuelle Ausdruck eines anderen gehört nicht dir.

Die Entscheidungsreihenfolge

Triff diese Entscheidungen in dieser Reihenfolge. Jede schränkt die nächste ein.

1. Schriftauswahl – Verwende standardmäßig einen schnellen, guten System-Stack, es sei denn, die Marke benötigt eine Web-Schrift. Wenn du eine Web-Schrift lädst, plane gleichzeitig deren Laden (Schritt 6).
2. Basisgröße und Maß – Körpertext ≥ 1rem (16px), Zeilenlänge 45–75 Zeichen (max-width: ~66ch). Diese beiden tun mehr für die Lesbarkeit als alles andere.
3. Schriftskala – Wähle ein einziges modulares Verhältnis und leite jede Größe daraus ab. Mache sie mit clamp() fließend. Wähle keine zufälligen px-Werte von Hand.
4. Vertikaler Rhythmus – Zeilenabstand ~1,5 für Körpertext, enger (1,1–1,3) für große Überschriften. Absätze mit Abstand oder Einzug versehen, niemals beides.
5. Hierarchie und Feinschliff – Kontrast in Gewicht/Größe/Abstand, text-wrap: balance bei Überschriften und pretty bei Körpertext, Tracking (Laufweite) bei Versalien und Auszeichnungsschriften, OpenType-Funktionen.
6. Laden und Leistung – font-display, Vorladen der einen kritischen Schrift, WOFF2 selbst hosten und metrisch passenden Fallback erstellen, damit die Seite nicht springt (CLS).
7. Barrierefreiheits-Check – Kontrast, Zoom auf 200 %, die WCAG 1.4.12 Textabstands-Überschreibungen, niemals Zoom deaktivieren, niemals Blocksatz für Körpertext.

Unverhandelbares (die Regeln, die die häufigen Fehler verhindern)

Das sind die Fehler, die immer wieder auftauchen. Verinnerliche das Warum, damit du sie in neuen Situationen anwenden kannst, nicht nur auswendig kopierst.

• Körpertextgröße in rem, niemals in px. rem respektiert die Schriftgrößeneinstellung des Browsers; px überschreibt stillschweigend eine Barrierefreiheitseinstellung. Hebe px für Haarlinien-Rahmen und wirklich feste physische Details auf.
• Zeilenabstand ist einheitenlos. line-height: 1.5 wird als Verhältnis vererbt, sodass jedes Element von seiner eigenen Größe aus neu berechnet. Ein festes line-height: 24px vererbt den berechneten Pixelwert und bricht bei unterschiedlich großen Kindern.
• Schriftgrößen niemals in reinem vw angeben. Viewport-Einheiten reagieren nicht auf Zoom oder Benutzerschriftgröße – das verletzt WCAG 1.4.4. Wickle fließende Größen immer in clamp() mit einem rem-Term ein: clamp(2rem, 1rem + 3vw, 4rem). Das rem erhält die Zoom-Funktion.
• Das Maß begrenzen. Zeilen länger als ~75 Zeichen lassen das Auge beim Zeilenumbruch die Zeile verlieren; kürzer als ~45 wirkt abgehackt. max-width: 66ch auf Textcontainern ist die effektivste Einzelmaßnahme für die Lesbarkeit.
• Körpertext im Web niemals im Blocksatz setzen. CSS-Blocksatz ohne ausgefeilte Silbentrennung erzeugt „Flüsse“ von Leerraum. Linksbündig, ragged right.
• Eine Web-Schrift darf das Layout beim Laden nicht verschieben. Kombiniere font-display mit einem metrisch passenden Fallback (size-adjust + ascent/descent/line-gap-override), sodass das Austauschen der echten Schrift keinerlei Reflow verursacht. Das ist die Lösung für schriftbedingtes CLS.

Quick-Start CSS

Eine vernünftige, barrierefreie Basis, die du in fast jedes Projekt einfügen kannst. Sie verwendet einen System-Schriftstack (null Download) und eine fließende Skala. Passe das Verhältnis und die Schriften an das Briefing an.

:root {
  /* Schriften – System-Stack standardmäßig (sofort, kein CLS, natives Gefühl) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
               "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Fließende Schriftskala (≈ Große Terz 1.25 auf Desktop). Generiere echte Projekte mit Utopia.fyi */
  --step--1: clamp(0.833rem, 0.80rem + 0.17vw, 0.9rem);
  --step-0:  clamp(1rem,    0.95rem + 0.25vw, 1.125rem);   /* Körpertext */
  --step-1:  clamp(1.25rem, 1.15rem + 0.50vw, 1.5rem);
  --step-2:  clamp(1.563rem,1.40rem + 0.80vw, 1.953rem);
  --step-3:  clamp(1.953rem,1.70rem + 1.25vw, 2.441rem);
  --step-4:  clamp(2.441rem,2.00rem + 2.00vw, 3.052rem);

  --measure: 66ch;
}

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.5;
  font-synthesis: none;            /* kein gefälschtes fett/kursiv */
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { line-height: 1.15; text-wrap: balance; }   /* eng + gleichmäßige Zeilenlängen */
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, li, blockquote { max-width: var(--measure); text-wrap: pretty; }  /* Maß + keine Hurenkinder/Waisen */
p + p { margin-block-start: 1em; }                                   /* Abstand, kein Einzug */

:is(h1, h2, h3, h4) + * { margin-block-start: 0.5em; }

/* Daten/Zahlen in Spalten ausrichten */
table, .tabular-nums { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

Eine vollständigere, kommentierte Vorlage – inklusive eines Beispiels für eine metrisch passende Web-Schrift – findest du in assets/starter.css. Lies sie, wenn du ein Projekt von Grund auf typografisch aufbaust.

Referenzdateien – lies die, die du brauchst

Behalte diese Datei im Kontext; ziehe eine Referenz heran, wenn es die Aufgabe erfordert.

• references/decision-records.md – Die destillierte Begründung des Fachgebiets: fünf Meta-Muster (wie Typografen denken) plus ADR-ähnliche Entscheidungsprotokolle, die jede Regel mit ihrer Begründung und den abgelehnten Alternativen verknüpfen. Lies dies, wenn du vor einem neuartigen Urteil stehst, das die anderen Dateien nicht direkt abdecken – die Meta-Muster ermöglichen es dir, die richtige Antwort so abzuleiten, wie ein Experte es tun würde. Auch der Ort der Grenze „Prinzip, nicht Eigentum“.
• references/foundations.md – Die klassischen Prinzipien (Luptons Letter / Text / Grid, Bringhurst, Butterick) für das Web übersetzt: Anatomie, Maß, Hierarchie, Paarung, Ausrichtung. Lies dies, wenn du Schriften auswählst/kombinierst oder wenn ein Layout „sich falsch anfühlt“, aber keine einzelne Regel offensichtlich verletzt ist.
• references/fluid-scale.md – Fließende Schrift mit clamp(), die clamp()-Mathematik, modulare Skalenverhältnisse, Utopia, Container-Query-Einheiten (cqi) für komponentenbezogene Schrift. Lies dies, wenn du eine Schriftskala erstellst oder anpasst oder Schrift auf einen Container statt auf den Viewport reagieren lassen möchtest.
• references/font-loading.md – Web-Schrift-Leistung: font-display, Vorladen, Self-Hosting vs. Google Fonts (DSGVO), WOFF2, Subsetting, unicode-range, variable Schriften und Beseitigung von CLS durch metrisch passende Fallbacks (size-adjust, *-override, Fontaine, next/font). Lies dies immer dann, wenn ein Projekt eine benutzerdefinierte Web-Schrift lädt oder Probleme mit Layout-Shift / langsamem Text hat.
• references/accessibility.md – WCAG 2.2 für Text: Kontrastverhältnisse, Größenänderung auf 200 % (1.4.4), Textabstands-Überschreibungen (1.4.12), Zoom, Legasthenie/Lesbarkeit, reduzierte Bewegung. Lies dies, bevor du die Typografie-Arbeit als abgeschlossen bezeichnest, und immer dann, wenn die Aufgabe Barrierefreiheit, a11y, Kontrast oder Compliance erwähnt.
• references/modern-css.md – Aktuelle CSS-Typografie-Funktionen mit Browser-Support-Status: text-wrap: balance/pretty, OpenType (font-variant-*, font-feature-settings), text-box-trim/text-box-edge, hanging-punctuation, initial-letter, schriftbezogene Einheiten (lh, cap, ch, ic), line-clamp, color-mix für Schattierungen. Lies dies, wenn du nach einer Verfeinerungsfunktion greifst, und um zu prüfen, ob etwas progressive Enhancement benötigt.

So lieferst du ab

• Wenn du Schrift änderst, erkläre die Entscheidung, nicht nur den Code – „Körpertext auf 1.125rem erhöht und Maß auf 66ch begrenzt, damit Zeilen nicht 120 Zeichen breit sind.“ Typografie wird nach Gefühl beurteilt; sag dem Benutzer, worauf er achten soll.
• Bevorzuge die Bearbeitung der vorhandenen Tokens/Skala des Projekts, anstatt eine parallele zu erfinden. Wenn das Projekt Tailwind verwendet, setze die Skala in theme.fontSize / CSS-Variablen, anstatt willkürliche Werte zu verteilen.
• Funktionen mit Browser-Support-Einschränkungen (gekennzeichnet in modern-css.md) werden als progressive Enhancement eingefügt – die Seite muss auch ohne sie korrekt lesbar sein.
• Führe nach nicht-trivialen Änderungen den Barrierefreiheits-Check (references/accessibility.md) durch, bevor du die Arbeit für abgeschlossen erklärst. Überprüfe den Kontrast und ob das Layout bei 200 % Zoom und den Textabstands-Überschreibungen überlebt.