Typografie macht 90 % dessen aus, was wir auf einer Website sehen. Sie transportiert Persönlichkeit, Kompetenz und Genre, noch bevor ein einziges Wort gelesen wird. Als Webdesign Hamburg-Agentur setzen wir auf Schriften mit Charakter — weit jenseits generischer System-Fonts.

Warum Typografie alles entscheidet

Eine Kanzlei mit verspielter Handschrift wirkt unseriös. Ein Kreativstudio in Times New Roman wirkt ausgeschaltet. Die richtige Schriftwahl ist die wichtigste Design-Entscheidung überhaupt. Sie ist im Brand Interface Design der erste und wichtigste Baustein einer starken Markenidentität.

Zehn empfohlene Schriften 2026

1. Fraunces (Serif, variable)

Warme, editorial wirkende Serif. Ideal für Magazin-artige Websites, Studios, Premium-Marken. Open-Source, kostenlos. Variable Font mit optischer Größe und Schriftgewicht in einer einzigen Datei.

2. Inter Tight (Sans-Serif)

Moderne, klare Sans-Serif. Beste UI-Lesbarkeit, neutraler Charakter. Passt zu fast jedem Projekt. Open-Source. Variable Font. Die aktuelle Standard-Wahl für lesbare, professionelle Interfaces.

3. EB Garamond (Serif)

Klassische Serif mit Charakter. Für Verlage, Kanzleien, kulturelle Einrichtungen. Open-Source. Keine Variable Font, aber zeitlos und vielseitig.

4. Playfair Display (Serif)

Hochmoderne Display-Serif mit starkem Kontrast. Ideal für Fashion, Gastronomie, Editorial. Open-Source. Besonders wirkungsvoll in großen Überschriften.

5. Manrope (Sans-Serif)

Runde, freundliche Sans-Serif. Passt gut zu Tech-Unternehmen, Startups und sozialen Projekten. Open-Source. Variable Font.

6. Söhne (Sans-Serif, kommerziell)

Schweizer Präzision, minimal und selbstbewusst. Für Agenturen und Premium-Marken, die Klasse ohne Ornament kommunizieren wollen. Kommerziell lizenziert bei Klim Type Foundry.

7. GT Sectra (Serif, kommerziell)

Klingenartige Serif mit moderner Anmutung. Für Verlage, Galerien, Premium-Beratung. Kommerziell bei Grilli Type. Unverwechselbarer Charakter für hochwertige Brands.

8. Founders Grotesk (Sans-Serif, kommerziell)

Kraftvolle, redaktionelle Grotesk. Für Kultur, Design, Editorial. Kommerziell bei Klim Type Foundry. Besonders stark in Überschriften und als Display-Schrift.

9. IBM Plex Serif (Serif)

Warmer, zeitgenössischer Serif mit hoher Lesbarkeit. Für Tech und Bildung. Open-Source von IBM. Sehr gut als Body-Font für lange Artikel.

10. JetBrains Mono (Monospace)

Die schönste Monospace-Schrift für Code-Blocks, Labels und Micro-Typografie. Open-Source. Ideal als Akzent-Font (10 %-Slot der 60-30-10-Regel).

Die 60-30-10-Regel der Typografie

Eine Website sollte mit maximal drei Schriften auskommen: 60 % Body-Font (für Fließtext), 30 % Display-Font (für Überschriften, evtl. Fraunces als Kontrast zu Inter Tight), 10 % Akzent-Font (z. B. JetBrains Mono für Labels). Mehr Schriften wirken unruhig und verlangsamen die Ladezeit.

Self-Hosted statt Google Fonts

Seit 2022 ist die direkte Einbindung von Google Fonts in Deutschland datenschutzrechtlich problematisch (DSGVO-Urteil München). Fonts sollten daher lokal self-hosted werden. Tool: google-webfonts-helper (gwfh.mranftl.com) lädt die benötigten WOFF2-Dateien und gibt das passende CSS aus. Mehr dazu erklärt unser Artikel zur DSGVO-Website ohne Cookie-Banner.

Variable Fonts — der Game-Changer

Variable Fonts sind eine einzelne Datei, die mehrere Schriftschnitte enthält (Light, Regular, Bold, Italic). Sparen Bandbreite und erlauben gleichzeitig beliebig viele Schriftstärken. Fraunces, Inter Tight und viele moderne Fonts sind variabel verfügbar — nutzen Sie das.

Responsive Typografie mit clamp()

Statt fixer Schriftgrößen (16px auf Mobile, 24px auf Desktop): font-size: clamp(16px, 2.5vw, 24px). So skaliert die Schrift automatisch mit der Bildschirmbreite — eine Zeile Code ersetzt ganze Media-Queries. Eine der wirkungsvollsten Techniken für barrierefreie Websites, da sie optimale Lesbarkeit auf allen Screens garantiert.

Häufig gestellte Fragen

Wie viele Fonts sollte eine professionelle Website verwenden?

Maximal drei: ein Body-Font für 60 % des Textes, ein Display-Font für 30 % der Überschriften und ein Akzent-Font (z. B. Monospace für Labels) für die restlichen 10 %. Mehr Schriften wirken unruhig, verlangsamen die Ladezeit und verwässern die Markenidentität.

Warum sollte ich Google Fonts nicht direkt einbinden?

Seit dem Urteil des LG München 2022 ist die direkte Einbindung von Google Fonts datenschutzrechtlich problematisch, weil dabei die IP-Adresse der Nutzer an Google-Server übertragen wird. Fonts sollten stattdessen lokal self-hosted werden — mit Tools wie dem google-webfonts-helper.

Was ist ein Variable Font und warum ist er vorteilhaft?

Variable Fonts sind einzelne Dateien, die mehrere Schriftschnitte (Light, Regular, Bold) enthalten. Sie sparen Bandbreite, erlauben fein abgestufte Schriftgewichte und sind ideal für responsive Typografie. Fraunces und Inter Tight sind beides Variable Fonts.

Was bedeutet die 60-30-10-Regel in der Typografie?

Die Regel beschreibt die optimale Verteilung: 60 % Body-Font (für Lesbarkeit), 30 % Display-Font (für Persönlichkeit in Überschriften), 10 % Akzent-Font (für Labels, Zahlen, Kicker). Diese Proportionen schaffen visuelle Hierarchie ohne Unruhe.

Wie funktioniert responsive Typografie mit clamp()?

Mit font-size: clamp(16px, 2.5vw, 24px) skaliert die Schriftgröße automatisch mit der Bildschirmbreite — von 16px auf kleinen Screens bis 24px auf Desktop. Eine Zeile Code ersetzt ganze Media-Queries und sorgt für optimale Lesbarkeit auf allen Geräten.