Warum Branchenlisten alle dasselbe sagen
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-Serifenschrift für alles, was etabliert wirken will. Eine kontrastreiche Display-Serifenschrift 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 führt nicht mehr zu denselben drei Schriften wie bei jedem Konkurrenten in der eigenen Kategorie.
Die Branche ist ein Proxy für Vertrauensniveau und Leselast. Benennen Sie diese direkt, und das Kategorie-Label verliert an Bedeutung.
Die drei entscheidenden Achsen
| Die Frage | Was dadurch entschieden wird | |
|---|---|---|
| Leselast | Liest jemand mehr als 200 zusammenhängende Wörter? | Hohe Last erfordert eine Textschrift für längeres Lesen: großzügige x-Höhe, offene Aperturen, echte Kursivformen. Niedrige Last erlaubt es, den Charakter der Schrift zu priorisieren. |
| Vertrauensniveau | Muss die Leserschaft glauben, dass Sie etabliert und sicher sind? | Hohes Vertrauen drängt zu vertrauten, institutionellen Formen: eine Serifenschrift oder eine neutrale Grotesk. Niedriges Vertrauen lässt Raum für Experimente. |
| Interface-Dichte | Wie viel UI-Text liegt im Bereich von 12 bis 14px? | Dichte Interfaces benötigen eine Schrift, die in kleinen Größen stabil bleibt: klare Ziffern, unterscheidbare I/l/1, enges, aber nicht gequetschtes Spacing. |
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.
Der I/l/1-Test ist keine Pedanterie. In jedem Produkt mit Codes, Identifikatoren, Bestellnummern oder Passwörtern führt eine Schrift, bei der großes I, kleines l und die Ziffer 1 nicht unterscheidbar sind, zu echten Support-Tickets. Schreiben Sie diese Zeichen nebeneinander, bevor Sie sich entscheiden.
Kombinationen nach Sektor
Dies sind vertretbare Standardwerte. Die Begründungen sind aufgeführt, damit Sie diese hinterfragen können, und für jeden Sektor gibt es eine differenzierende Alternative, da der Standard bereits von Ihren Mitbewerbern genutzt wird.
Jeder unten aufgeführte Sektor enthält ein Live-Specimen statt eines Screenshots: die Überschrift-Schrift, die Text-Schrift und die Mono-Schrift, gerendert in jeder Stufe 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.
SaaS und Developer-Tools
| Kombination | Warum | |
|---|---|---|
| Standard | Durchgehend Inter, eine Gewichtungsklasse | Für Interfaces entwickelt, exzellent in kleinen Größen, variable Gewichte. Die sicherste Wahl, was gleichzeitig ihr Problem ist |
| Differenziert | Eine Grotesk mit mehr Charakter für Überschriften, Inter für das UI | Behält die Zuverlässigkeit bei kleinen Größen dort bei, wo sie wichtig ist, und setzt Persönlichkeit nur dort ein, wo der Leser nicht aktiv arbeitet |
| Vermeiden | Eine geometrische Display-Schrift für UI-Labels | Geometrische Formen verlieren bei 12px an Unterscheidbarkeit: o/e/c verschmelzen ineinander |
Für eine tiefergehende Analyse speziell für den SaaS-Fall, einschließlich einer Mono-Schrift für Daten und der Frage, wie viele Gewichte tatsächlich benötigt werden, siehe SaaS-Schriftkombinationen.
Finanzen, Versicherungen, Recht
| Kombination | Warum | |
|---|---|---|
| Standard | Eine Übergangs-Serif für Überschriften, eine neutrale Grotesk für Fließtext und UI | Die Serif übernimmt die institutionelle Signalwirkung; die Grotesk hält Formulare und Tabellen lesbar |
| Differenziert | Eine zeitgenössische Serif mit sichtbarer Konstruktion, kombiniert mit derselben Grotesk | Signalisiert Etabliertheit, ohne nach 1987 zu klingen. Die Struktur der Kombination bleibt konservativ; die Tonalität hingegen nicht |
| Vermeiden | Eine Serif für den Fließtext in einem datenintensiven Produkt | Serifen in dichten Tabellen bei 13px erzeugen visuelles Rauschen, und Finanzprodukte bestehen größtenteils aus Tabellen |
Token specimen · real values
Verdant Finance
Live renderVerdant Finance's actual tokens — the same values its exports use.
Gesundheitswesen und öffentliche Dienste
| Kombination | Warum | |
|---|---|---|
| Standard | Durchgehend eine humanistischer Sans, in großzügigen Größen | Humanistische Formen sind unter Stress, aus der Distanz und für Menschen mit Sehbehinderung am besten lesbar. Eine einzige Familie eliminiert eine potenzielle Fehlerquelle |
| Differenziert | Eine humanistischer Sans mit einer wärmeren Alternative nur für Überschriften | Wärme, ohne die Fließtext-Schrift zu beeinträchtigen. Die Änderung auf Display-Größen beschränken |
| Vermeiden | Alles mit engem Zeichenabstand, geringen Strichstärken oder geringer x-Höhe | Die Lesenden könnten nervös sein, es eilen, ein Smartphone bei schlechten Lichtverhältnissen nutzen oder alles drei gleichzeitig |
Diese Kategorie ist auch dann studienwürdig, wenn man in einem anderen Bereich arbeitet. Designsysteme für den öffentlichen Dienst veröffentlichen die Forschung hinter ihren Typografie-Entscheidungen, was fast sonst niemand tut. Eine Schrift, die sich unter den schlechtesten Bedingungen bewährt hat, ist unter normalen Bedingungen eine sichere Wahl.
E-Commerce und Consumer Retail
| Pairing | Warum | |
|---|---|---|
| Standard | Eine charakterstarke Display-Schrift für Produkt- und Kategorie-Überschriften, eine neutrale Sans für alles Transaktionale | Die Trennung ist entscheidend: Persönlichkeit verkauft, Neutralität schließt den Kauf ab |
| Differenziert | Die Display-Schrift stärker einsetzen, als es sich komfortabel anfühlt, und die transaktionale Schrift langweilig halten | Fast die gesamte Differenzierung findet in den 20 % der Typografie statt, die der Kunde liest, bevor er eine Entscheidung trifft |
| Vermeiden | Die Display-Schrift in der Nähe von Preisen, Mengen oder im Checkout-Flow | Jede Mehrdeutigkeit bei einer Zahl kostet gleichzeitig Conversion und Vertrauen |
Editorial, Medien und Verlagswesen
| Pairing | Warum | |
|---|---|---|
| Standard | Eine Serifenschrift für längere Fließtexte, eine Grotesk für strukturelle Elemente und UI | Dies ist der eine Fall, in dem eine Serifenschrift im Fließtext eindeutig richtig ist: genau dafür sind sie gemacht |
| Differenziert | Gleiche Struktur, aber die Serifenschrift im Fließtext aufgrund ihrer Kursivform wählen | Editorial-Texte nutzen ständig Kursivsetzungen, doch die meisten Pairings werden nur basierend auf der Antiqua-Form gewählt |
| Vermeiden | Eine Display-Serifenschrift als Fließtext-Schrift | Ein hoher Kontrast, der bei 48px hervorragend aussieht, wird bei 18px über tausend Wörter hinweg dünn und ermüdend |
Agenturen, Studios und Portfolios
| Pairing | Warum | |
|---|---|---|
| Standard | Eine ungewöhnliche Display-Schrift, ein unsichtbares Arbeitstier | Die Arbeit ist der Inhalt. Die Typografie sollte diesen rahmen und dann in den Hintergrund treten |
| Differenziert | Eine einzige Schriftfamilie mit extremem Größenkontrast statt zwei verschiedenen Familien | Ein Schriftschnitt in 14px und 160px setzt ein stärkeres Statement als zwei Schnitte in moderaten Größen und ist leichter konsistent zu halten |
| Vermeiden | Drei Familien | Fast jedes System mit drei Familien besteht aus zwei Familien und einem ungelösten Kompromiss |
Token specimen · real values
LimePulse Digital Agency
Live renderLimePulse Digital Agency's actual tokens — the same values its exports use.
Bildung und Non-Profit
| Kombination | Warum | |
|---|---|---|
| Standard | Durchgehend eine humanistische Sans, mit einer Serifenschrift für längere Artikel | Das Publikum variiert stark in Bezug auf Alter und Endgeräte. Humanistische Formen funktionieren über diese Bandbreite hinweg besser als geometrische |
| Differenziert | Eine Slab-Serif oder eine Serifenschrift mit geringem Kontrast für Überschriften | Wirkt warm und substanziell, ohne die institutionelle Kälte einer Übergangs-Serifenschrift |
| Vermeiden | Leichte Schriftschnitte (Light weights) an jeder Stelle | Ausgangspunkt sollten ältere Geräte, ältere Leser und Bildschirme mit reduzierter Helligkeit sein |
Immobilien, Hotellerie und Reisen
| Kombination | Warum | |
|---|---|---|
| Standard | Eine raffinierte Serifenschrift für Überschriften über Bildern, eine dezente Sans für Details und Listen | Da die Typografie auf Fotografien liegt, sind Kontrast und Strichstärke wichtiger als der individuelle Charakter |
| Differenziert | Eine einzige Sans mit extremem Kontrast in der Strichstärke, sodass die Fotografie die gesamte Wärme vermittelt | Der Look „Serif über Foto“ ist die am stärksten gesättigte Konvention in diesem Sektor |
| Vermeiden | Hochkontrastige Display-Serifen über unruhigen Bildern | Dünne Linien verschwinden in fotografischen Details, und jedes Objektfoto ist anders |
Industrie, Logistik und B2B-Fertigung
| Kombination | Warum | |
|---|---|---|
| Standard | Durchgehend eine neutrale Grotesk, mit einer Mono-Schrift für Teilenummern und Spezifikationen | Die Mono-Schrift ist hier nicht dekorativ. Sie macht lange alphanumerische Identifikatoren scannbar und vergleichbar |
| Differenziert | Eine Grotesk mit echtem Charakter in Display-Größen; die Spezifikationsschrift bleibt neutral | Dieser Sektor ist chronisch unter-designed, daher bewirkt schon eine dezente Eigenständigkeit viel |
| Vermeiden | Proportionale Schriften für Teilenummern | Der Vergleich zweier Spezifikationstabellen erfordert Ziffern, die exakt in Spalten untereinanderstehen |
Der Punkt der Tabellenziffern lässt sich weit über diesen Sektor hinaus generalisieren. Überall dort, wo Zahlen in einer Spalte erscheinen (Preise, Mengen, Metriken, Daten), macht font-variant-numeric: tabular-nums sie auf einen Blick vergleichbar. Die meisten Schriften unterstützen dies, aber fast niemand aktiviert es.
Die technische Hälfte, die niemand thematisiert
Ein Pairing, das auf dem Papier stimmt, aber im Browser falsch wirkt, ist immer noch falsch. Vier Entscheidungen bei der Auslieferung, die beeinflussen, was der Leser tatsächlich sieht.
| Die Entscheidung | Was schiefgehen kann | |
|---|---|---|
| Variable versus statische Schnitte | Eine variable Datei gegenüber mehreren statischen Schriftschnitten | Eine variable Datei ist in der Regel kleiner als drei statische und ermöglicht Zwischengewichte. Wenn ein Pairing jedoch auf einem Gewicht basiert, das nicht ausgeliefert wurde, wird dieses synthetisiert – und synthetisches Fett ist sichtbar schlechter. |
| Fallback-Metriken | Was gerendert wird, bevor die Webfont lädt | Ohne abgestimmte Metriken verschiebt sich das Layout (Reflow), sobald die Schrift geladen ist. size-adjust und die ascent-override-Familie ermöglichen es einem System-Fallback, nahezu denselben Raum einzunehmen. |
| Subsetting | Welche Zeichen ausgeliefert werden | Nur auf Latein beschränkte Subsets sind dramatisch kleiner, führen aber stillschweigend zu Fehlern, sobald ein Name, ein Währungssymbol oder eine nicht vorhergesehene Sprache auftaucht. |
| Ladestrategie | font-display-Verhalten | swap zeigt den Fallback und führt dann zum Reflow; optional zeigt die Schrift bei einer langsamen Verbindung unter Umständen gar nicht. Beides hat Nachteile: Die Wahl muss bewusst getroffen werden. |
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 komplett 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 Prozentwerte variieren je nach Schriftart und sollten gemessen statt kopiert werden. Einige Frameworks generieren diese mittlerweile automatisch, wenn Schriften über deren Font-API deklariert werden; dies ist der einfachste Weg, es korrekt umzusetzen.
Der Zehn-Minuten-Check
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
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
Il1 O0 und eine lange Zahl 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
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 ihre Zeit.
- 4
Die tatsächlich vorhandenen Gewichte prüfen
Ein Pairing, das ein Gewicht voraussetzt, welches die Webfont nicht ausliefert, wird dieses stillschweigend synthetisieren – und synthetisches Fett ist sichtbar schlechter. Bestätigen Sie, dass jedes Gewicht in Ihrer Skala als echter Schnitt existiert.
- 5
Neben zwei Wettbewerbern betrachten
Dies ist der Check auf Branchenkonventionen, korrekt angewendet: nicht um die eigene Schrift zu finden, sondern um sicherzustellen, dass man nicht versehentlich die der Konkurrenz verwendet.
Ein Pairing so dokumentieren, dass es Bestand 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: 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. Das Modell löst dies entsprechend seiner Trainingsdaten – und damit genau so wie alle anderen auch.
| Das Ergebnis | |
|---|---|
| "Überschriften: Playfair Display. Fließtext: Inter." | Korrekte Schriftfamilien, erfundene Skalierung, Gewichte bis 800, keine Laufweite und eine unterschiedliche Hierarchie auf jedem Screen |
| Schriftfamilien, eine nummerierte Skalierung, ein explizites Gewichtsband und eine Laufweiten-Rampe | Jedes Mal die gleiche Hierarchie, da kein Entscheidungsspielraum blieb |
## 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 dieser Angaben aus Verboten besteht. Eine Kombination, die nur als zwei Schriftnamen festgehalten wird, erlaubt jeden Missbrauch beider Schriften; erst die Einschränkungen machen die Kombination stabil. Mehr zum Schreiben von Richtlinien, die ein Agent befolgt.
Jedes Identity Forge Kit enthält eine präzise Kombination inklusive Skalierung, Gewichtsband, Laufweite und elementbezogenen Regeln sowie 28 semantischen Farbrollen, serialisiert in einer DESIGN.md. Kits durchstöbern, um Kombinationen im Kontext statt als reine Musterblätter zu sehen.
Was sind die besten Schriftkombinationen für meine Branche?
Die Branche ist ein schwächeres Signal, als es scheint. Entscheiden Sie zuerst über die Leselast (wie viel Fließtext), das Vertrauensregister (wie institutionell die Wirkung sein muss) und die Interface-Dichte (wie viel Text bei 12 bis 14 px steht). Diese drei Faktoren bestimmen die Kombination; das Branchenlabel wird am besten nachträglich verwendet, um zu prüfen, ob man versehentlich die Schriften eines Wettbewerbers gewählt hat.
Wie viele Schriftarten sollte eine Marke verwenden?
Zwei Familien decken fast jedes Produkt ab: eine für Display oder Überschriften, eine für Fließtext und Interface. Eine dritte wird gelegentlich durch eine echte Mono-Anforderung für Code oder Daten gerechtfertigt. Darüber hinaus sind die meisten Drei-Familien-Systeme eigentlich zwei Familien plus eine ungelöste Meinungsverschiedenheit.
Kann ich eine Serifenschrift für den Fließtext verwenden?
Ja, für redaktionelle Langtexte, für die Serifenschriften im Fließtext konzipiert sind. Nein, für dichte Interface-Arbeiten: Serifen in einer 13-px-Tabelle erzeugen visuelles Rauschen, und die meisten Produkte bestehen größtenteils aus Tabellen. Passen Sie die Wahl an die Menge an Fließtext an, mit der die Lesenden tatsächlich konfrontiert werden.
Warum verwenden alle SaaS-Produkte dieselbe Schriftart?
Weil Inter und seine nahen Verwandten die schwierigste Anforderung tatsächlich lösen: über ein gesamtes Interface hinweg bei 12 px lesbar und unterscheidbar zu bleiben. Jedes Produkt mit dieser Anforderung kommt zur gleichen Lösung. Der Ausweg ist nicht eine andere UI-Schrift, sondern die Persönlichkeit in der Display-Typografie zu platzieren, wo die Lesbarkeit bei kleinen Größen keine Rolle spielt.
Wie verhindere ich, dass ein AI-Agent meine Schriftkombination zerschießt?
Dokumentieren Sie mehr als nur die Namen der Schriftfamilien. Geben Sie die Größenskala als explizite Zahlen, das Gewichtsband als harte Grenze, die Laufweiten-Rampe und die Stellen an, an denen die jeweilige Schrift nicht verwendet werden darf. Eine Datei, die nur zwei Schriften nennt, überlässt jede Entscheidung zur Hierarchie dem Modell, welches diese auf jedem Screen anders löst.