Wenn Sie an Webdesign denken, denken Sie vermutlich an Farben, Layouts und Bilder. Doch das Element, das den größten Einfluss auf die Wirkung Ihrer Website hat, wird oft uebersehen: die Schrift.
Typografie macht über 90 Prozent des Webdesigns aus, denn das Web besteht überwiegend aus Text. Die richtige Schriftwahl entscheidet, ob Ihre Website professionell oder amateurhaft wirkt, ob Besucher bleiben oder abspringen, ob Ihre Botschaft ankommt oder verpufft.
Warum Typografie so viel mehr ist als die Schriftwahl
Typografie umfasst alles, was mit der Gestaltung von Text zu tun hat: Schriftart, Schriftgroesse, Zeilenhoehe, Zeichenabstand, Textausrichtung und die Hierarchie zwischen verschiedenen Textebenen.
Eine gute Schriftart schlecht gesetzt ist wie ein teurer Anzug, der nicht passt. Die Details machen den Unterschied.
Die unsichtbare Wirkung
Sie bemerken gute Typografie nicht. Sie lesen einfach, muehelos, angenehm, ohne Stolpern. Schlechte Typografie dagegen faellt sofort auf: Zeilen, die zu lang sind. Buchstaben, die zusammenkleben. Ueberschriften, die nicht von Fließtext zu unterscheiden sind.
Ihr Unterbewusstsein registriert jedes Detail. Und es entscheidet innerhalb von Millisekunden: Vertrauenswuerdig oder nicht.
Die Grundlagen: Schriftklassifikationen verstehen
Bevor Sie eine Schrift waehlen, müssen Sie die Grundtypen kennen. Die Schriftklassifikation unterscheidet mehrere Hauptkategorien.
Serifenschriften (Serif)
Serifenschriften haben kleine Striche an den Enden der Buchstaben, die Serifen. Bekannte Vertreter: Times New Roman, Georgia, Merriweather.
Wirkung: Traditionell, serioess, vertrauenswuerdig, elegant.
Geeignet für: Anwaelte, Finanzdienstleister, Verlage, Luxusmarken.
Im Web: Lange galten Serifenschriften als schlechter lesbar auf Bildschirmen. Mit hochaufloesenden Displays ist das heute kein Problem mehr.
Serifenlose Schriften (Sans-Serif)
Ohne Serifen, klare Formen. Bekannte Vertreter: Helvetica, Arial, Inter, Poppins.
Wirkung: Modern, klar, zugaenglich, technisch.
Geeignet für: Tech-Unternehmen, Agenturen, Start-ups, die meisten Unternehmenswebsites.
Im Web: Die Standard-Empfehlung für Bildschirmtexte, besonders auf kleineren Displays.
Monospace-Schriften
Jedes Zeichen hat die gleiche Breite. Bekannte Vertreter: Courier, Fira Code, JetBrains Mono.
Wirkung: Technisch, präzise, funktional.
Geeignet für: Code-Darstellungen, Terminal-Aesthetik, technische Dokumentationen.
Display-Schriften
Dekorative Schriften für grosse Ueberschriften. Nicht für Fließtext gedacht.
Wirkung: Auffaellig, individuell, oft polarisierend.
Geeignet für: Markenlogos, Hero-Headlines, kreative Projekte, nie für Fließtext.
So waehlen Sie die richtige Schrift für Ihre Website
Schritt 1: Markenpersoenlichkeit definieren
Bevor Sie Schriften durchscrollen, stellen Sie sich drei Fragen:
- Welche drei Adjektive beschreiben Ihre Marke?
- Wie sollen Besucher sich auf Ihrer Website fuehlen?
- Was erwartet Ihre Zielgruppe?
Eine Anwaltskanzlei braucht eine andere Schrift als ein Yoga-Studio. Ein Tech-Start-up eine andere als ein Traditionshandwerk.
Schritt 2: Lesbarkeit prüfen
Die schoenste Schrift nuetzt nichts, wenn sie schlecht lesbar ist. Testen Sie jede Schrift in Fließtext-Größe (16 bis 18 Pixel) auf verschiedenen Geraeten.
Achten Sie besonders auf:
- Buchstabenformen: Sind a, e, g und s bei kleiner Größe klar unterscheidbar?
- Zeilenhoehe: Braucht die Schrift viel oder wenig Zeilenabstand?
- Zeichenabstand: Wirken die Buchstaben zusammengedraengt oder luftig?
Schritt 3: Schriftschnitte prüfen
Eine gute Webfont bietet mindestens vier Gewichte: Light (300), Regular (400), Medium (500) und Bold (700). Idealerweise auch Kursiv-Varianten.
Warum? Weil Sie mit verschiedenen Gewichten visuelle Hierarchie schaffen, ohne auf unterschiedliche Schriftfamilien zurueckgreifen zu müssen.
Schritt 4: Kombination testen
Wenn Sie zwei Schriften kombinieren, müssen sie sich ergaenzen, nicht konkurrieren. Klassische Kombinationen:
- Serif + Sans-Serif: Eine Serifenschrift für Ueberschriften, eine serifenlose für Fließtext (oder umgekehrt)
- Zwei Gewichte einer Familie: Dieselbe Schrift in unterschiedlichen Schnitten (z.B. Poppins Black für Ueberschriften, Poppins Light für Fließtext)
- Kontrastreich: Unterschiedliche Stile, die sich ergaenzen (z.B. Playfair Display + Inter)
Schritt 5: Performance testen
Jede Schrift, die Sie laden, kostet Ladezeit. Zwei Schriften mit je vier Schnitten bedeuten acht Font-Dateien. Das kann die Performance spürbar beeintraechtigen.
Die technische Seite: Webfonts richtig einbinden
Google Fonts: Beliebt, aber mit Tuecken
Google Fonts bietet über 1.500 kostenlose Schriften. Das Problem: Bei externer Einbindung werden Nutzerdaten an Google uebermittelt. Das verstoesst gegen die DSGVO.
Die Lösung: Laden Sie die Schriften herunter und hosten Sie sie lokal. Tools wie google-webfonts-helper machen das einfach. Die Vorteile: DSGVO-Konformitaet und schnellere Ladezeiten, weil keine externen Anfragen nötig sind.
Schriftformate: WOFF2 ist der Standard
- WOFF2: Beste Komprimierung, breiteste Browser-Unterstützung. Sollte Ihr Standardformat sein.
- WOFF: Fallback für aeltere Browser. Wird immer seltener benötigt.
- TTF/OTF: Desktop-Formate. Für das Web zu gross, sollten nicht verwendet werden.
font-display: swap, Pflicht für Performance
Die CSS-Eigenschaft font-display: swap sorgt dafür, dass Text sofort mit einer Systemschrift angezeigt wird, waehrend die Webfont laedt. Ohne diese Einstellung bleibt Text unsichtbar, bis die Schrift geladen ist, ein sogenannter FOIT (Flash of Invisible Text).
Mit font-display: swap sehen Nutzer zuerst einen FOUT (Flash of Unstyled Text), einen kurzen Moment mit Systemschrift, bevor die Webfont greift. Das ist aus Performance-Sicht die bessere Lösung.
Schriften vorladen mit preload
Für die wichtigste Schrift, die, die above the fold sichtbar ist, empfiehlt sich ein Preload-Hint im HTML-Head. Das signalisiert dem Browser: Lade diese Datei mit hoher Prioritaet.
Typografische Hierarchie: Die Kunst der Abstufung
Eine klare Hierarchie sorgt dafür, dass Besucher sofort erkennen: Was ist die Hauptbotschaft? Was ist ein Unterpunkt? Was ist Detail?
H1: Die Hauptueberschrift
Gross, auffaellig, mit dem schwersten Schriftgewicht. Auf jeder Seite nur einmal verwenden. Die H1 kommuniziert das zentrale Thema und ist für SEO wichtig.
Empfehlung: 36 bis 56 Pixel auf Desktop, 28 bis 36 Pixel auf Mobile. Schriftgewicht 700 bis 900.
H2: Sektionsueberschriften
Strukturieren die Seite in Abschnitte. Gross genug, um beim Scrollen aufzufallen, aber klar von der H1 unterscheidbar.
Empfehlung: 28 bis 36 Pixel auf Desktop. Schriftgewicht 600 bis 700.
H3 bis H4: Unterabschnitte
Für weitere Unterteilungen innerhalb einer Sektion. Nicht so dominant wie H2, aber als Ankerpunkte erkennbar.
Fließtext: Die Basis
Der Grossteil Ihres Inhalts. Muss muehelos lesbar sein, über längere Strecken, auf jedem Geraet.
Empfehlung: 16 bis 18 Pixel, Zeilenhoehe 1.5 bis 1.7, Zeilenlaenge 45 bis 75 Zeichen. Schriftgewicht 300 bis 400.
Die Feinheiten: Kerning, Leading und Tracking
Kerning: Abstand zwischen Buchstabenpaaren
Kerning passt den Abstand zwischen bestimmten Buchstabenpaaren an. Ein grosses T neben einem kleinen o braucht weniger Abstand als ein H neben einem I. Gute Schriften haben integriertes Kerning, Sie müssen es nur aktivieren.
In CSS: font-kerning: normal oder text-rendering: optimizeLegibility.
Leading (Zeilenhoehe)
Der Abstand zwischen den Zeilen. Zu eng: Der Text wirkt gedraengt und ist schwer zu lesen. Zu weit: Die Zeilen verlieren den Zusammenhang.
Faustregel: Zeilenhoehe von 1.5 für Fließtext, 1.2 bis 1.3 für Ueberschriften.
Tracking (Zeichenabstand)
Der gleichmaessige Abstand zwischen allen Zeichen. Grossbuchstaben profitieren oft von leicht erhöhtem Tracking. Fließtext sollte in der Regel beim Standard bleiben.
Typische Fehler bei der Webtypogrfie
Zu viele Schriften
Jede zusaetzliche Schriftfamilie fragmentiert den visuellen Zusammenhalt. Zwei sind ideal, drei das Maximum. Variation schaffen Sie über Gewichte und Groessen, nicht über Schriftfamilien.
Zu kleiner Fließtext
16 Pixel ist das absolute Minimum für Fließtext auf Mobilgeraeten. Viele Websites verwenden 14 oder sogar 12 Pixel, das zwingt Nutzer zum Zoomen und ist ein garantierter Absprunggrund.
Zu lange Zeilen
Auf grossen Bildschirmen laufen Textzeilen gern über die gesamte Breite. Zeilen mit über 75 Zeichen ueberfordern das Auge, der Blick verliert sich beim Zeilensprung.
Lösung: Begrenzen Sie die Textbreite auf maximal 700 bis 800 Pixel (rund 65 Zeichen pro Zeile).
Falsches Gewicht simulieren
Browser können Fettschrift simulieren, wenn das echte Bold-Gewicht nicht geladen ist. Das Ergebnis sieht immer schlecht aus, unscharfe, aufgeblasene Buchstaben. Laden Sie immer die tatsächlich benoetigten Schriftschnitte.
Fehlender Fallback
Was passiert, wenn Ihre Webfont nicht laedt? Ohne definierten Fallback zeigt der Browser seine Standardschrift, meist Times New Roman. Definieren Sie immer einen Font-Stack mit sinnvollen Alternativen.
Unsere Schriftwahl bei PAKU Media
Wir verwenden Poppins, eine geometrische Sans-Serif von Google Fonts. Warum?
- Fuenf Gewichte (200, 300, 500, 700, 900) decken alle Hierarchieebenen ab
- Geometrische Formen transportieren Moderniaet und Präzision
- Hervorragende Lesbarkeit auf allen Bildschirmgroessen
- Genug Persoenlichkeit, um sich von Inter und Helvetica abzuheben
Lokal gehostet, WOFF2-Format, mit font-display: swap. Performance und Datenschutz sind kein Kompromiss.
Fazit
Typografie ist das Fundament jeder Website. Die richtige Schriftwahl transportiert Ihre Markenpersoenlichkeit, sorgt für muheloses Lesen und beeinflusst direkt, ob Besucher Ihnen vertrauen.
Investieren Sie Zeit in die Schriftwahl, achten Sie auf die technischen Details und halten Sie sich an die Grundregeln: Maximal zwei Schriften, ausreichend Kontrast in der Hierarchie, mindestens 16 Pixel Fließtext und immer lokales Hosting.
Ihre Typografie redet, bevor Ihre Besucher ein einziges Wort gelesen haben. Sorgen Sie dafür, dass sie das Richtige sagt.