Wenn Sie an Webdesign denken, denken Sie vermutlich an Farben, Layouts und Bilder. Doch das Element, das den groessten Einfluss auf die Wirkung Ihrer Website hat, wird oft uebersehen: die Schrift.
Typografie macht ueber 90 Prozent des Webdesigns aus — denn das Web besteht ueberwiegend 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 Fliesstext 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, muessen 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 fuer: 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 fuer: Tech-Unternehmen, Agenturen, Start-ups, die meisten Unternehmenswebsites.
Im Web: Die Standard-Empfehlung fuer Bildschirmtexte, besonders auf kleineren Displays.
Monospace-Schriften
Jedes Zeichen hat die gleiche Breite. Bekannte Vertreter: Courier, Fira Code, JetBrains Mono.
Wirkung: Technisch, praezise, funktional.
Geeignet fuer: Code-Darstellungen, Terminal-Aesthetik, technische Dokumentationen.
Display-Schriften
Dekorative Schriften fuer grosse Ueberschriften. Nicht fuer Fliesstext gedacht.
Wirkung: Auffaellig, individuell, oft polarisierend.
Geeignet fuer: Markenlogos, Hero-Headlines, kreative Projekte — nie fuer Fliesstext.
So waehlen Sie die richtige Schrift fuer 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 pruefen
Die schoenste Schrift nuetzt nichts, wenn sie schlecht lesbar ist. Testen Sie jede Schrift in Fliesstext-Groesse (16 bis 18 Pixel) auf verschiedenen Geraeten.
Achten Sie besonders auf:
- Buchstabenformen: Sind a, e, g und s bei kleiner Groesse klar unterscheidbar?
- Zeilenhoehe: Braucht die Schrift viel oder wenig Zeilenabstand?
- Zeichenabstand: Wirken die Buchstaben zusammengedraengt oder luftig?
Schritt 3: Schriftschnitte pruefen
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 muessen.
Schritt 4: Kombination testen
Wenn Sie zwei Schriften kombinieren, muessen sie sich ergaenzen, nicht konkurrieren. Klassische Kombinationen:
- Serif + Sans-Serif: Eine Serifenschrift fuer Ueberschriften, eine serifenlose fuer Fliesstext (oder umgekehrt)
- Zwei Gewichte einer Familie: Dieselbe Schrift in unterschiedlichen Schnitten (z.B. Poppins Black fuer Ueberschriften, Poppins Light fuer Fliesstext)
- 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 spuerbar beeintraechtigen.
Die technische Seite: Webfonts richtig einbinden
Google Fonts: Beliebt, aber mit Tuecken
Google Fonts bietet ueber 1.500 kostenlose Schriften. Das Problem: Bei externer Einbindung werden Nutzerdaten an Google uebermittelt. Das verstoesst gegen die DSGVO.
Die Loesung: 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 noetig sind.
Schriftformate: WOFF2 ist der Standard
- WOFF2: Beste Komprimierung, breiteste Browser-Unterstuetzung. Sollte Ihr Standardformat sein.
- WOFF: Fallback fuer aeltere Browser. Wird immer seltener benoetigt.
- TTF/OTF: Desktop-Formate. Fuer das Web zu gross, sollten nicht verwendet werden.
font-display: swap — Pflicht fuer Performance
Die CSS-Eigenschaft font-display: swap sorgt dafuer, 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 Loesung.
Schriften vorladen mit preload
Fuer 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 dafuer, 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 fuer SEO entscheidend.
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
Fuer weitere Unterteilungen innerhalb einer Sektion. Nicht so dominant wie H2, aber als Ankerpunkte erkennbar.
Fliesstext: Die Basis
Der Grossteil Ihres Inhalts. Muss muehelos lesbar sein — ueber laengere 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 muessen 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 fuer Fliesstext, 1.2 bis 1.3 fuer Ueberschriften.
Tracking (Zeichenabstand)
Der gleichmaessige Abstand zwischen allen Zeichen. Grossbuchstaben profitieren oft von leicht erhoehtem Tracking. Fliesstext 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 ueber Gewichte und Groessen, nicht ueber Schriftfamilien.
Zu kleiner Fliesstext
16 Pixel ist das absolute Minimum fuer Fliesstext 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 ueber die gesamte Breite. Zeilen mit ueber 75 Zeichen ueberfordern das Auge — der Blick verliert sich beim Zeilensprung.
Loesung: Begrenzen Sie die Textbreite auf maximal 700 bis 800 Pixel (rund 65 Zeichen pro Zeile).
Falsches Gewicht simulieren
Browser koennen Fettschrift simulieren, wenn das echte Bold-Gewicht nicht geladen ist. Das Ergebnis sieht immer schlecht aus — unscharfe, aufgeblasene Buchstaben. Laden Sie immer die tatsaechlich 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 Praezision
- 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 fuer 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 Fliesstext und immer lokales Hosting.
Ihre Typografie redet, bevor Ihre Besucher ein einziges Wort gelesen haben. Sorgen Sie dafuer, dass sie das Richtige sagt.