Typografie ist das Rückgrat jedes Corporate Designs. Sie prägt Tonalität, Lesbarkeit und Wiedererkennung – online wie offline. In diesem Leitfaden zeigen wir Schritt für Schritt, wie Sie Typografie strategisch auswählen, sauber anwenden und in Ihrem Styleguide verbindlich dokumentieren.
Sie erfahren, wie Schriftwahl, Hierarchie, Zeilenabstand, Kontrast und responsive Regeln zusammenspielen. Zudem erhalten Sie praxisnahe Beispiele, Checklisten und Vorlagen, die Sie direkt übernehmen können – für konsistente Ergebnisse in Website, Social Media, Print und Präsentationen.
Typografie im Corporate Design
Definition: Typografie im Corporate Design bezeichnet die planvolle Auswahl und Anwendung von Schriftarten, Grössen, Abständen und Hierarchien, um die Markenpersönlichkeit konsistent zu vermitteln. Sie sorgt für Lesbarkeit, Professionalität und klare Benutzerführung über alle Touchpoints – vom Logo bis zur App.
Warum ist Typografie so wichtig?
Typografie schafft Vertrauen und Struktur. Konsistente Headlines, klare Lauftexte und definierte Mikrotypografie (Abstände, Listen, Zitate) machen Inhalte schneller erfassbar. Zudem wirkt Typografie wie ein akustischer Tonfall: seriös, verspielt oder technisch – je nach Schriftwahl.
Praxisbeispiel: Ein KMU aktualisiert sein Corporate Design. Durch vereinheitlichte Typografie sinkt die Produktionszeit für Social-Posts um 30 %, weil Headline- und Textstile fix definiert sind.
Schriftwahl und Hausschrift festlegen
Wählen Sie eine Primärschrift für Headlines und eine gut lesbare Sekundärschrift für Fliesstext. Serifenlose Schriften performen digital oft besser; Serifen können in Print überzeugen. Prüfen Sie Lizenzierung (Web/Print/App), verfügbare Schriftschnitte sowie Unterstützung für Sonderzeichen und Zahlenstil.
- Markenfit klären (Werte, Tonalität, Zielpublikum)
- Lesbarkeit testen (Desktop/Mobil, 14–18 px Basisgrösse)
- Schriftschnitte definieren (Regular/Bold/Italic vermeiden wir, Kursiv nicht als Stilregel)
- Fallback-Fonts festlegen (Systemschriften)
- Lizenz & Performance prüfen (Dateigrösse, Variable Fonts)
So vermeiden Sie spätere Brüche. Variable Fonts reduzieren Ladezeit und erlauben feine Gewichtsstufen – ideal für modulare Systeme.
Praxisbeispiel: Ein SaaS-Anbieter kombiniert eine serifenlose Primärschrift für UI (z. B. Inter) mit einer charakterstarken Display-Schrift für Kampagnen. Durch konsistente Gewichte (500/700) wirken CTAs prägnant, während Fliesstext ruhig bleibt.
Typografische Hierarchie & Skalen
Definieren Sie eine modulare Skala auf Basis der Body-Grösse (z. B. 16 px) und eines Faktors (z. B. 1.25). Damit entstehen reproduzierbare Stufen für H1–H6, UI-Labels und Meta-Infos. Ergänzen Sie Zeilenabstände (1.4–1.6), Absatzabstände und maximale Zeilenlänge (45–80 Zeichen) für klare Lesbarkeit.
Welche Schriftgrössen funktionieren im Web?
Für Standardtexte sind 16–18 px ein guter Startwert. Headlines steigern Sie über die Skala (z. B. 20/25/31/39/49 px). Wichtig: Testen Sie reale Inhalte auf Mobile. Wenn Buttons und Labels zu klein sind, leidet die Klickrate – auch bei schönem Design.
| Ebene | Web (px) | Print (pt) | Verwendung |
|---|---|---|---|
| H1 | 49 | 24 | Seitentitel, Hero |
| H2 | 39 | 18 | Abschnittstitel |
| H3 | 31 | 14 | Unterthemen |
| Body | 16–18 | 10–11 | Fliesstext |
| Kleingedrucktes | 14 | 9 | Meta, Labels |
Nutzen Sie die Skala als verbindliche Vorgabe. So bleiben Abstände und Proportionen konsistent, auch wenn mehrere Personen gestalten.
Praxisbeispiel: Eine Landingpage erhält eine feste Skala. Headlines springen um genau eine Stufe, Absätze nutzen 1.5 Zeilenhöhe. Das Auge findet schneller Orientierung – die Verweildauer steigt messbar.
Lesbarkeit & Barrierefreiheit
Lesbarkeit entscheidet über Performance. Achten Sie auf ausreichenden Kontrast, klare Grösse und verständliche Hierarchie. Für digitalen Text gelten Mindestkontraste gemäss WCAG 2.1 AA: Normaltext ≥ 4.5:1, grosser Text (ab ~24 px Regular / ~19 px Bold) ≥ 3:1. Halten Sie Zeilenlänge und Zeilenabstand stabil.
Wie teste ich Kontrast schnell?
Nutzen Sie Systemtests im Design-Tool oder Browser-Extensions. Prüfen Sie jeweils Hintergrundfarbe und Textfarbe pro Zustand (Normal, Hover, Disabled). Dokumentieren Sie erlaubte Kombinationen im Styleguide, damit Teams keine unsicheren Grautöne verwenden.
Farbschema für lesbare Buttons
- Primär: Blau #0B5ED7 (RGB 11,94,215)
- Text: Weiss #FFFFFF (Kontrast erfüllt WCAG 2.1 AA)
- Hover: #0948A8 (RGB 9,72,168)
Mit dunkler Primärfarbe und weissem Text erreichen Sie stabilen Kontrast. Dokumentieren Sie zusätzlich Focus-Ringe (z. B. 2 px Outline in #FFBF47) für bessere Tastaturbedienung.
Praxisbeispiel: Ein Versicherer prüft Formulare: Body-Text auf #F7F7F7-Hintergrund wirkt zu blass. Nach Umstellung auf #222222 und klare Focus-Stile sinken Abbrüche spürbar.
Typografie in digitalen Kanälen
Digital muss Typografie flexibel reagieren. Setzen Sie auf responsive Regeln (z. B. Skalierung zwischen 16–18 px Body, H1 clamp-basiert). Definieren Sie Zeilenlängen für Mobile (35–60 Zeichen) und Desktop (45–80 Zeichen). Buttons brauchen klare, kurze Verben und ausreichend Innenabstand.
- Base-Size 16–18 px; UI-Labels ≥ 14 px
- Zeilenhöhe 1.4–1.6; Absatzabstand ≥ 0.5 Zeile
- Max-Zeilenlänge 45–80 Zeichen
- CTA-Texte aktiv („Jetzt starten“)
- Fallback-Fonts im CSS definieren
Für E-Mail-Templates gelten ähnliche Regeln, jedoch mit technischen Grenzen (z. B. Webfonts). Leitfäden und Beispiele finden Sie in unseren Newsletter Templates.
Wie viele Schriftschnitte sind sinnvoll?
Für Klarheit genügen oft Regular und Bold. Ein drittes Gewicht (Medium) hilft bei UI. Mehr Varianten machen das System schwer. Definieren Sie, welcher Schnitt für welche Elemente gilt – das beschleunigt Gestaltung und Review.
Praxisbeispiel: Ein Onlineshop ersetzt zu kleine Label-Schriften (12 px) durch 14 px und erhöht Button-Linienhöhe. Die Klickrate auf Produkt-CTAs steigt deutlich.
Typografie in Print & Branding
Im Print zählt Reproduktion: Papier, Druckverfahren und Sehentfernung beeinflussen die Grösse. Für Broschüren funktioniert ein Body von 9–11 pt gut; Headlines liegen je nach Format zwischen 14–24 pt. Achten Sie auf genügend Zeilenabstand (120–140 %) und ein konsistentes Grundlinienraster.
| Medium | Empfohlene Body-Grösse | Hinweis |
|---|---|---|
| Visitenkarte | 8.5–9.5 pt | Hoher Kontrast, klare Daten |
| Flyer A5 | 9–10 pt | Kurze Zeilen, starke Headlines |
| Broschüre A4 | 10–11 pt | Ruhiger Satz, 60–70 Zeichen |
| Plakat | ≥ 80 pt H1 | Sichtdistanz beachten |
Dokumentieren Sie Druckversionen (CMYK, Sonderfarben) und Outlines für Übergabe an Druckereien. Das verhindert spätere Überraschungen.
Welche Schriftgrössen für Visitenkarten?
Nutzen Sie 8.5–9.5 pt für Kontaktdaten, 11–12 pt für Namen. Wählen Sie einen kräftigen Schriftschnitt für bessere Reproduktion. Verzichten Sie auf feine Hairlines – sie brechen im Druck schnell weg.
Praxisbeispiel: Ein Verein stellt sein Briefpapier um. Durch klaren Zeilenabstand und feste Absatzabstände wirken Schreiben ruhiger und professioneller – das Feedback fällt positiv aus.
Typografie im Styleguide dokumentieren
Ohne Dokumentation bleibt Typografie Auslegungssache. Legen Sie in Ihrem Styleguide Regeln fest: Schriften, Grössen, Zeilenabstände, Farben, Kontraste, Link- und Listenstile, Tabellen, Focus-Stile sowie Beispiele. Ergänzen Sie No-Gos (z. B. verbotene Kombinationen).
- Schriftfamilien inkl. Fallbacks
- Skala (H1–Body), Zeilen- & Absatzabstände
- Farben mit HEX/RGB/CMYK und erlaubten Paarungen
- Komponenten-Beispiele (Buttons, Cards, Tabellen)
- Redaktionsrichtlinien (Zahlen, Bindestriche, Abkürzungen)
So arbeiten Designer und Redaktoren am selben System. Für die Farbwelt verweisen Sie im Dokument auf definierte Paletten – Inspiration bietet z. B. unser Beitrag zu Farben im Branding.
Praxisbeispiel: Ein Industriebetrieb erstellt einen einseitigen Typo-Quickguide für Messen: Headline/H2/Body, Abstände, CTA-Text, Logo-Schutzraum. Teams setzen Stände schneller auf – ohne Nachfragen.
Typografie
Mit klarer Typografie wird Ihr Corporate Design sichtbar: Eine passende Hausschrift, eine nachvollziehbare Skala, starke Kontraste und verbindliche Regeln schaffen Konsistenz – und damit Vertrauen. Starten Sie klein, dokumentieren Sie konsequent und testen Sie an echten Inhalten. So zahlt sich Typografie täglich aus – in jedem Kanal.
Sie möchten Ihre Typografie strategisch aufsetzen oder prüfen lassen? Dann jetzt Kontakt aufnehmen.
Häufige Fragen zu Typografie
Welche Schriftarten eignen sich für Corporate Designs?
Wie viele Schriften sollte ein Styleguide enthalten?
Welche Basisgrösse ist für Webtexte ideal?
Wie sichere ich Barrierefreiheit bei Text?
Sollte ich Variable Fonts verwenden?
