Typografie im Webdesign

Maximal 2 Schriftfamilien

Eine Schrift für Headlines (darf charakterstark sein), eine für Fliesstext (muss vor allem lesbar sein). Mehr als 2 Schriften wirken chaotisch. Wenn du Kontrast brauchst, nutze Varianten der gleichen Familie: Regular, Bold, Black, Italic.

Serifen vs. Sans-Serif

• Serifen-Schriften: Wirken traditionell, seriös, elegant. Gut für Editorial, Luxus, Finanzen (z.B. Merriweather, Playfair Display, Lora).
• Sans-Serif: Wirken modern, klar, zugaenglich. Standard für Tech, KMU, Digital (z.B. Inter, Roboto, Open Sans).
• Display-Schriften: Nur für grosse Überschriften. Niemals für Fliesstext. Schwer lesbar in kleinen Größen.

Hierarchie führt das Auge. Sie sagt dem Leser: Das ist wichtig. Das ist weniger wichtig. Ohne klare Hierarchie wirkt jede Seite wie eine Textwueste — und niemand liest sie.

Die Faustregel: Jede Ebene 1,5x größer als die vorherige

• Body: 16px (Basis, darf auch 18-20px sein für bessere Lesbarkeit)
• H4: 20px
• H3: 24-28px
• H2: 32-40px
• H1: 48-72px (Hero kann auch 96-120px sein)

Modern: Nutze clamp() im CSS für fluid typography — Schriftgrößen die sich responsive zwischen Min und Max skalieren.

Zeilenlänge

Die ideale Zeilenlänge liegt bei 45-75 Zeichen pro Zeile. Zu lang: das Auge verliert die Orientierung. Zu kurz: der Lesefluss bricht ab. CSS: max-width: 65ch; auf dem Absatz-Element.

Zeilenabstand (line-height)

Fliesstext braucht 1.5-1.7 als line-height. Headlines duerfen enger sein (0.9-1.1). Das ist der häufigste Amateur-Fehler: zu enger Zeilenabstand macht Text unlesbar.

Letter-Spacing

Fliesstext: 0 (normal). Grosse Headlines: leicht negativ (-0.02em bis -0.04em). Kleine Uppercase-Labels: positiv (+0.05em bis +0.15em). Uppercase immer mit mehr Letter-Spacing.

Kontrast zum Hintergrund

Mindestens 4.5:1 für normalen Text (WCAG AA), 7:1 für optimale Lesbarkeit. Hellgrau auf Weiss (#999 auf #fff) erreicht nur 2.85:1 und ist nicht barrierefrei.

Google Fonts

Kostenlos, riesige Auswahl. Seit DSGVO problematisch, wenn direkt vom Google-CDN geladen (Abmahnungen). Lösung: Fonts lokal hosten oder Google Fonts API Proxy.

TypeKit / Adobe Fonts

Teil von Adobe Creative Cloud. Hohe Qualität, viele Fonts, auch von bekannten Foundries. Wird mit einem JavaScript-Snippet geladen — achte auf Performance.

Self-Hosted Fonts

Die beste Option für Performance und Datenschutz. Kauf Fonts bei MyFonts, Fontspring oder direkt bei der Foundry, hoste sie selbst. WOFF2-Format für maximale Kompression.

Welche Schriftgröße ist ideal für Fliesstext?

16px ist das Minimum. 18-20px sind oft besser, besonders für Ratgeber und langere Texte. Auf Mobile können sogar 17-18px angenehmer sein.

Kann ich Google Fonts einfach per CDN einbinden?

Technisch ja, rechtlich in Deutschland problematisch. Seit mehreren Abmahnwellen empfehlen wir, Google Fonts lokal zu hosten. Tools wie "google-webfonts-helper" automatisieren das.

Wie viele Font-Weights brauche ich?

Minimum 2-3: Regular, Bold, vielleicht Light oder Black. Jeder Font-Weight ist ein zusätzlicher Download — lade nur was du wirklich brauchst.

Serifen oder Sans-Serif für den Body?

Beide funktionieren. Serifen erleichtern langes Lesen auf Print, auf Screens sind moderne Sans-Serifs gleichwertig. Die Wahl haengt vom Markencharakter ab — nicht von Lesbarkeit allein.

Was ist fluid typography?

Schriftgrößen, die sich responsive zwischen Min und Max anpassen. Mit CSS clamp() umgesetzt: font-size: clamp(1rem, 2vw, 1.5rem). Kein Media-Query-Spaghetti mehr.

Wir bauen Websites mit durchdachter Typografie: saubere Hierarchie, optimierte Lesbarkeit, professionelle Font-Wahl, DSGVO-konforme Einbindung. Schriften die zu deiner Marke passen und auf jedem Geraet funktionieren.