Warum B2B Typography mehr ist als Schriftwahl
Im B2B-Kontext treffen Einkäufer, Entscheider und technische Evaluatoren auf eine Website — oft mehrfach, über verschiedene Geräte und Kontexte hinweg. Typografie erfüllt dabei drei Funktionen gleichzeitig: Sie strukturiert Information, signalisiert Positionierung und beeinflusst die Lesbarkeit unter realen Bedingungen.
Eine schlecht gewählte Schriftkombination erzeugt kognitive Reibung. Zu viele Schriftgewichte, inkonsistente Größenverhältnisse oder ein Display-Font, der auf mobilen Geräten nicht skaliert — all das kostet Vertrauen. Studien zur Lesbarkeit (u.a. von der Baymard Institute Research Group zu E-Commerce-UX) zeigen konsistent, dass typografische Klarheit direkt mit wahrgenommener Professionalität korreliert.
Typografie ist dabei kein isoliertes Element. Sie arbeitet mit dem Farbsystem, der Bildsprache und dem gesamten visuellen System zusammen. Wer Schriften wählt, ohne diese Zusammenhänge zu berücksichtigen, riskiert ein inkohärentes Gesamtbild.
Display vs. Body Fonts — was den Unterschied macht
Die Unterscheidung zwischen Display- und Body-Schriften ist fundamental für jedes Schriftsystem.
Display Fonts
Display-Schriften sind für große Größen optimiert — Überschriften, Hero-Texte, Sektions-Titel. Sie haben ausgeprägte Charakteristika: markante Serifen, starke Kontraste zwischen Haarstrich und Grundstrich, oder expressive Formen. Bei kleinen Größen verlieren sie ihre Wirkung oder werden unleserlich.
Im B2B-Kontext übernehmen Display-Schriften die Aufgabe, Persönlichkeit und Positionierung zu transportieren. Eine Kanzlei wählt andere Display-Fonts als ein SaaS-Unternehmen — und das ist richtig so.
Body Fonts
Body-Schriften sind für Fließtext bei 14–18px optimiert. Ihre Aufgabe ist Neutralität und Ausdauer: Sie müssen über lange Absätze hinweg lesbar bleiben, auf verschiedenen Bildschirmen funktionieren und keine Aufmerksamkeit auf sich ziehen. Gute Body-Schriften werden nicht bewusst wahrgenommen — schlechte schon.
Wichtige Kriterien für Body-Fonts im B2B:
- Offene Gegenformen (Counter) für Lesbarkeit bei kleinen Größen
- Ausreichende x-Höhe für Bildschirmdarstellung
- Mindestens Regular, Medium und Bold als Gewichte verfügbar
- Gute Hinting-Qualität für Windows-Rendering
- Verfügbarkeit als Webfont mit akzeptabler Lizenz
Pairing-Prinzipien für B2B-Schriftsysteme
Schriftpaarungen funktionieren nach klaren Prinzipien. Im B2B-Kontext gelten dabei spezifische Einschränkungen: Zu experimentelle Kombinationen wirken unprofessionell, zu generische Kombinationen hinterlassen keinen Eindruck.
Kontrast als Grundprinzip
Erfolgreiche Paarungen basieren auf Kontrast — nicht auf Ähnlichkeit. Kombiniert man zwei Serifenschriften, entsteht Konkurrenz. Kombiniert man eine Serifenschrift mit einer serifenlosen, entsteht Spannung und Hierarchie.
Die häufigsten funktionierenden Kontrast-Achsen:
- Serif + Sans-Serif: Klassisch, bewährt, gut skalierbar
- Geometric Sans + Humanist Sans: Modern, technisch, aber mit Wärme
- Slab Serif + Neutral Sans: Autorität + Klarheit
Superfamilies als sichere Wahl
Eine unterschätzte Strategie: Schriftfamilien verwenden, die explizit als Paar entworfen wurden — sogenannte Superfamilies. IBM Plex (Serif + Sans + Mono), Source (Serif + Sans + Code) oder Alegreya (Serif + Sans) bieten aufeinander abgestimmte Proportionen und Stimmung ohne Kompatibilitätsrisiko.
Für B2B-Websites, die schnell ein konsistentes System brauchen, sind Superfamilies oft die pragmatischste Wahl.
Konkrete Schriftpaarungen für B2B-Websites
Folgende Kombinationen haben sich in B2B-Kontexten bewährt — mit unterschiedlichen Positionierungssignalen:
Autorität und Vertrauen
- Display: Playfair Display (Serif, hoher Kontrast) — Body: Source Sans Pro
- Display: Freight Display (elegant, editorial) — Body: Freight Text
- Display: Tiempos Headline — Body: Inter
Diese Kombinationen eignen sich für Beratungsunternehmen, Kanzleien, Finanzdienstleister — überall wo Seriosität und Tradition Vertrauen erzeugen.
Technisch und modern
- Display: IBM Plex Sans (Bold/ExtraBold) — Body: IBM Plex Sans (Regular)
- Display: DM Sans — Body: DM Sans
- Display: Neue Haas Grotesk — Body: Neue Haas Grotesk Text
Für SaaS-Unternehmen, Technologieanbieter und Plattformen, die Klarheit und Effizienz signalisieren wollen.
Hybrid und differenziert
- Display: Sohne (Klim Type) — Body: Söhne Buch
- Display: Canela — Body: Graphik
- Display: Domaine Display — Body: Aktiv Grotesk
Diese Paarungen eignen sich für B2B-Marken, die sich bewusst vom Mainstream abheben wollen — etwa in kreativen Dienstleistungen, Premium-Consulting oder Design-nahen Branchen.
Typografische Hierarchie aufbauen
Eine Schriftpaarung allein ist kein System. Erst die definierten Größen, Gewichte und Abstände machen daraus ein funktionierendes Werkzeug. Für B2B-Websites empfiehlt sich eine Hierarchie mit mindestens fünf Ebenen:
- Display / Hero: 48–72px, Display Font, Bold oder ExtraBold
- H1: 36–48px, Display oder Body Font, Bold
- H2: 24–32px, Body Font, SemiBold oder Bold
- H3: 18–22px, Body Font, Medium oder SemiBold
- Body: 15–18px, Body Font, Regular
Dazu kommen optionale Ebenen: Caption (12–13px), Label (11–12px, oft in Caps), und Pullquote (20–24px, kursiv oder leicht).
Wichtig: Die Hierarchie muss auf mobilen Geräten separat definiert werden. Display-Größen von 64px auf Desktop werden auf 375px Viewport-Breite auf 36–40px reduziert — sonst bricht das Layout.
Zeilenlänge und Zeilenabstand
Zwei technische Parameter, die oft vernachlässigt werden:
- Zeilenlänge (Measure): 60–75 Zeichen pro Zeile für Body-Text. Breitere Spalten erhöhen die kognitive Last beim Zeilensprung.
- Zeilenabstand (Line-Height): 1.5–1.65 für Body-Text, 1.1–1.25 für große Überschriften. Zu enger Abstand bei Fließtext ermüdet schnell.
Technische Implementierung — was im Code zählt
Schriftentscheidungen müssen in CSS sauber umgesetzt werden. Häufige Fehler sind fehlende Fallback-Stacks, zu viele geladene Gewichte und fehlendes Font-Display-Handling.
Ein sauberer Font-Stack für eine B2B-Website könnte so aussehen:
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;Für Display-Fonts:
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;Für Performance gilt: Nur die tatsächlich genutzten Gewichte laden. Wer Regular, Medium und Bold braucht, lädt genau diese drei — nicht die gesamte Familie. Google Fonts erlaubt das über den text-Parameter oder durch selektive Gewichtsauswahl. Für kritische Schriften empfiehlt sich font-display: swap, um Layout-Shifts zu minimieren.
Variable Fonts sind eine zunehmend attraktive Option: Eine einzige Datei deckt alle Gewichte ab und reduziert HTTP-Requests. Inter, Recursive und Fraunces sind als Variable Fonts verfügbar und für Web-Einsatz optimiert.
Typografie in Brand Guidelines dokumentieren
Ein Schriftsystem entfaltet seinen Wert erst, wenn es dokumentiert und konsistent angewendet wird. In Brand Guidelines gehören folgende Elemente zur Typografie-Sektion:
- Primäre und sekundäre Schriftfamilien mit Lizenzhinweis
- Alle verwendeten Gewichte mit Verwendungszweck
- Größenraster für Desktop und Mobile
- Zeilenabstand und Zeilenlänge als Richtwerte
- Verbotene Kombinationen (z.B. kein Italic in Überschriften)
- Fallback-Schriften für Offline-Dokumente (Word, PowerPoint)
Dieser letzte Punkt ist im B2B-Kontext besonders relevant: Wenn Vertriebsmitarbeiter Angebote in Word erstellen oder Präsentationen in PowerPoint bauen, muss das Schriftsystem auch dort funktionieren. Georgia und Calibri sind keine idealen Marken-Schriften — aber sie sind besser als Arial in 11pt ohne Hierarchie. Die Brand Templates sollten diese Anforderungen von Anfang an berücksichtigen.
Wer ein umfassendes Markensystem aufbaut, findet im vollständigen Brand Identity Guide den übergeordneten Rahmen, in den Typografie eingebettet ist.
Häufige Fehler in der B2B-Typografie
Abschließend die Fehler, die in der Praxis am häufigsten auftreten:
- Zu viele Schriften: Mehr als zwei Familien (plus optional eine Mono-Schrift für Code) erzeugen Chaos, keine Persönlichkeit.
- Gewicht statt Größe für Hierarchie: Hierarchie entsteht primär durch Größe, nicht durch Fettdruck. Bold überall ist kein System.
- Display-Fonts im Body: Playfair Display bei 16px ist unleserlich. Display-Fonts gehören in Display-Größen.
- Fehlende Mobile-Anpassung: Desktop-Typografie 1:1 auf Mobile zu übertragen ist ein häufiger Fehler mit sichtbaren Konsequenzen.
- Keine Lizenzprüfung: Nicht alle Google Fonts sind für alle Verwendungszwecke frei. Kommerzielle Fonts von Foundries wie Klim, Commercial Type oder Schriftwerk erfordern Lizenzen — auch für Web-Embedding.
Typografie ist ein System, kein Dekorationselement. Wer sie systematisch angeht — mit klarer Paarungslogik, definierten Hierarchien und sauberer technischer Umsetzung — schafft eine Grundlage, auf der alle anderen visuellen Entscheidungen aufbauen können.