Schriftkombinationen nach Branche – und warum Kategorien eine Falle sind

Liest man vier „Schriften für X“-Guides aus vier völlig unterschiedlichen Sektoren, ist die Überschneidung frappierend. Eine geometrische Sans für alles Technologie-nahe. Eine Übergangs-Serife für alles, was etabliert wirken will. Eine kontrastreiche Display-Serife für Luxus. Eine abgerundete Sans für alles, was freundlich wirken soll.

Diese Konvergenz geschieht, weil die Branche eine Proxy-Variable ist. Was der Autor mit „Fintech“ meint, ist *muss institutionelles Vertrauen signalisieren*, und was mit „Kreativagentur“ gemeint ist, ist *muss Individualität über Lesbarkeit priorisieren*. Das sind die eigentlichen Parameter. Sobald man diese direkt benennt, liefert das Sektor-Label keinen Mehrwert mehr – und man landet nicht bei denselben drei Schriften wie jeder Konkurrent in der eigenen Kategorie.

Die dritte Achse ist die, die Designer oft überspringen und Entwickler dann entdecken. Eine Schrift, die in einer 48px-Überschrift wunderschön aussieht, kann in einem 12px-Tabellenlabel unbrauchbar sein – und die meiste Interface-Arbeit findet im kleinen Bereich statt. Testen Sie bei 12px, bevor Sie sich in 48px verlieben.

Dies sind vertretbare Standardwerte, inklusive Begründung, damit Sie diese hinterfragen können, sowie eine differenzierende Alternative für jeden Sektor, da der Standard bereits von Ihren Mitbewerbern genutzt wird.

Jeder Sektor unten enthält ein Live-Specimen statt eines Screenshots: die Überschrift-Schrift, die Text-Schrift und die Mono-Schrift, gerendert in jedem Schritt einer realen Skala, direkt in Ihrem Browser. Eine Kombination als Bild sagt nichts darüber aus, wie sie in Bildunterschrift-Größe wirkt – und genau dort scheitern die meisten Kombinationen.

Für eine tiefergehende Behandlung speziell des SaaS-Falls, einschließlich einer Mono-Schrift für Daten und der Frage, wie viele Gewichte tatsächlich benötigt werden, siehe SaaS-Schriftkombinationen.

Ein Pairing, das auf dem Papier stimmt, aber im Browser falsch wirkt, ist immer noch falsch. Vier Delivery-Entscheidungen, die beeinflussen, was der Leser tatsächlich sieht.

Die Zeile zu den Fallback-Metriken bietet den höchsten Mehrwert und ist am wenigsten bekannt. Ein Layout-Shift bei jedem ersten Besuch ist ein deutliches Qualitätssignal für Nutzer und Page-Experience-Metriken – und lässt sich mit einigen wenigen CSS-Deskriptoren beheben, statt die Schrift zu wechseln.

/* A metric-matched fallback: same footprint, no reflow on load. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

body { font-family: "Inter", "Inter Fallback", sans-serif; }

Die exakten Prozentsätze variieren je nach Schriftart und sollten gemessen statt kopiert werden. Einige Frameworks generieren diese mittlerweile automatisch, wenn Schriften über deren Font-API deklariert werden, was der einfachste Weg ist, dies korrekt umzusetzen.

Bevor ein Pairing final festgelegt wird, folgen fünf Tests. Jeder deckt eine andere Fehlerquelle ab, und alle sind schneller, als das Problem erst im Build zu entdecken.

1. 1

   Echte Headlines verwenden, keine Platzhalter

   Lorem ipsum hat keine Großbuchstaben an ungewöhnlichen Stellen, keine Zahlen und keine langen Komposita. Ihr tatsächlicher Produktname und Ihr Value Proposition werden alle drei enthalten.

2. 2

   Il1 O0 und eine lange Zahlenfolge tippen

   Großes I, kleines l, Ziffer 1; großes O, Ziffer 0. Dann eine realistische Bestellnummer oder ein Währungsbetrag. Wenn ein Paar mehrdeutig ist, ist die Schrift für transaktionale Inhalte ungeeignet.

3. 3

   Fließtext in 14px rendern und einen ganzen Absatz lesen

   Nicht nur eine Zeile. Einen Absatz. Ermüdungserscheinungen und Rhythmusprobleme treten erst über eine gewisse Distanz auf, und im Fließtext verbringen die Leser die meiste Zeit.

4. 4

   Die tatsächlich vorhandenen Gewichte prüfen

   Ein Pairing, das auf einem Gewicht basiert, das die Webfont nicht ausliefert, wird dieses im Stillen synthetisieren, und synthetisiertes Fett ist sichtbar schlechter. Bestätigen Sie, dass jedes Gewicht in Ihrer Skala als echter Schnitt existiert.

5. 5

   Im Vergleich zu zwei Wettbewerbern betrachten

   Dies ist der Check auf Branchenkonventionen, korrekt angewendet: nicht um die eigene Schrift zu finden, sondern um sicherzustellen, dass man nicht die der Konkurrenz verwendet hat.

Die Wahl des Pairings ist die halbe Arbeit. Die andere Hälfte besteht darin, es präzise genug festzuhalten, damit es reproduziert werden kann – sei es durch einen neuen Engineer oder durch einen Coding-Agent, der Screens schreibt, die Sie niemals Zeile für Zeile prüfen.

Wir haben 299 DESIGN.md-Dateien analysiert, die für AI-Agenten veröffentlicht wurden. 83 % erwähnen Typografie, und 44 % enthalten an keiner Stelle konkrete Größenwerte. Es wird lediglich eine Schriftart genannt; alle Entscheidungen zu Größe, Gewicht und Laufweite werden somit dem Modell überlassen – und das Modell löst dies so, wie es in seinen Trainingsdaten vorkommt, also genau so wie bei allen anderen auch.

## Typography

Display: Playfair Display — headings 32px and above only.
UI and body: Inter (variable) — everything else.

Scale: 12 / 14 / 16 / 20 / 24 / 32 / 48.
Weights: 400 and 600 only. Never above 600.
Tracking: -0.02em at 32px+, 0 from 14-24px, +0.02em on 12px caps.

Never set Playfair below 32px.
Never use Playfair for UI labels, buttons or table content.
Numerals are always Inter, always tabular in tables.

Beachten Sie, dass die Hälfte davon aus Verboten besteht. Eine Kombination, die nur als zwei Schriftnamen festgehalten wird, erlaubt jeden Missbrauch beider Schriften; erst die Einschränkungen sorgen dafür, dass die Kombination funktioniert. Mehr zum Schreiben von Richtlinien, die ein Agent befolgt.