Eine Studie von Gitte Lindgaard und Kollegen aus dem Jahr 2006 ergab, dass Menschen sich in etwa 50 Millisekunden einen Eindruck von der visuellen Wirkung einer Website bilden. Die Typografie trägt einen großen Teil dieses Eindrucks und von allem, was danach kommt, denn Text ist das, was ein Besucher tatsächlich liest.
Die falsche Schrift lässt ein seriöses Unternehmen laienhaft wirken. Eine gute Schrift lässt ein kleines Unternehmen selbstbewusst wirken. Die Wahl der Schrift ist deshalb keine Kosmetik. Sie beeinflusst die Lesbarkeit, wie Menschen Ihre Marke wahrnehmen, und sogar, wie schnell Ihre Website lädt und wie barrierefrei sie ist.
Die wichtigsten Schriftkategorien verstehen
Bevor Sie Google Fonts durchstöbern, sollten Sie wissen, was Sie vor sich haben. Jede Schrift gehört zu einer von wenigen Kategorien, und jede sagt etwas anderes.
Serifenschriften
Sie haben kleine Striche (Serifen) an den Enden der Buchstaben, etwa Georgia, Merriweather oder Playfair Display. Sie wirken traditionell, etabliert und vertrauenswürdig. Sie eignen sich gut für lange Texte und für Marken, die Autorität ausstrahlen wollen.
Im Web waren Serifen auf Bildschirmen mit niedriger Auflösung früher schwerer lesbar. Auf heutigen scharfen Bildschirmen ist das weitgehend vorbei, testen Sie sie aber trotzdem in kleineren Größen.
Serifenlose Schriften
Ohne Striche an den Enden. Klar, modern, schlicht, etwa Inter, Open Sans oder Roboto. Das ist die Standardwahl für die meisten Websites, und das mit gutem Grund: Serifenlose Schriften lesen sich auf Bildschirmen jeder Größe und Auflösung gut.
Wenn Sie nicht wissen, wo Sie anfangen sollen, ist eine gut gewählte serifenlose Schrift eine sichere Wahl für den Fließtext.
Display- und Zierschriften
Schriften mit Charakter: fett, ausdrucksstark, manchmal ungewöhnlich. Sie eignen sich hervorragend für Überschriften, Titelbereiche und kurze Texte, die Aufmerksamkeit brauchen. Für Fließtext sind sie schlecht, denn niemand möchte einen ganzen Absatz in einer Zierschrift lesen.
Setzen Sie sie sparsam und bewusst ein. Eine Display-Schrift für Überschriften und eine klare Schrift für den Fließtext sind eine bewährte Kombination.
Monospace-Schriften
Jedes Zeichen ist gleich breit. Traditionell für Code verwendet, nutzen manche Marken sie für eine technische oder redaktionelle Wirkung: Fira Code, JetBrains Mono, IBM Plex Mono. Sie geben einer Website einen erkennbaren Charakter, bremsen aber das Lesen in langen Textblöcken.
Was eine Schrift im Web funktionieren lässt
Eine Schrift für eine Website zu wählen ist etwas anderes, als eine für eine gedruckte Broschüre zu wählen. Bildschirme haben eigene Regeln.
Lesbarkeit in jeder Größe
Fließtext muss bei 16 Pixeln vollkommen klar sein, die Navigation bei 14 und Überschriften bei 48 scharf. Nicht jede Schrift meistert diese Spanne gleich gut, testen Sie Ihre Kandidaten also in mehreren Größen, bevor Sie sich entscheiden.
Achten Sie auf die x-Höhe, also die Höhe der Kleinbuchstaben. Schriften mit größerer x-Höhe sind auf dem Bildschirm meist besser lesbar. Deshalb funktionieren Schriften wie Inter und Source Sans im Web so gut.
Performance zählt mehr, als Sie denken
Jede Schrift, die Sie hinzufügen, ist eine Datei, die der Browser laden muss, bevor er Text so zeigt, wie Sie ihn gestaltet haben. Wir haben es an Source Sans 3 von Google Fonts gemessen: Vier Schnitte (normal, fett und ihre Kursiven) wiegen 233,2 KB, zwei Schnitte die Hälfte.
Das zählt für Besucher und für Google. Während die Schrift lädt, sieht ein Besucher mit langsamer Verbindung leeren oder vorläufigen Text, und eine spät ankommende Schrift kann Zeilen verschieben und den CLS verschlechtern, eine der Metriken, die Google verfolgt. Wie stark diese Metriken Ihre Position beeinflussen, erklärt unser Artikel über Core Web Vitals. So halten Sie Schriften leicht:
Begrenzen Sie die Schnitte. Brauchen Sie wirklich Thin, Regular, Medium, Semibold, Bold und Black? Die meisten Websites kommen mit zwei oder drei bestens aus.
Erwägen Sie eine variable Schrift. Eine variable Datei enthält eine ganze Spanne von Stärken. Wenn Sie mehr als zwei oder drei Schnitte brauchen, ist sie oft leichter als die einzelnen Dateien zusammen.
Nutzen Sie moderne Formate. WOFF2 ist heute Standard und deutlich kleiner als TTF- oder OTF-Dateien. Wenn Ihr Schriftanbieter noch ältere Formate ausliefert, wechseln Sie.
Erwägen Sie Systemschriften. Für Fließtext wird ein Stack wie system-ui, -apple-system, sans-serif sofort dargestellt, weil er Schriften nutzt, die schon auf dem Gerät sind. Nichts zu laden. Sie haben weniger Kontrolle über das Erscheinungsbild Ihrer Marke, aber die bestmögliche Performance.
Laden Sie wichtige Schriften vor. Wenn Sie eigene Webfonts nutzen, sagen Sie dem Browser mit <link rel="preload">, dass er sie früh holen soll. Der Text erscheint dann schneller in der richtigen Schrift.
Passen Sie die Ersatzschrift an. Den Deskriptor size-adjust in einer @font-face-Regel unterstützen heute alle großen Browser. Damit passen Sie eine Systemschrift als Ersatz an die Maße Ihres Webfonts an, sodass sich der Text nicht verschiebt, wenn die richtige Schrift ankommt.
Schriften von der eigenen Domain ausliefern
Google Fonts wird meist per Link auf Googles Server eingebunden, sodass der Browser jedes Besuchers seine IP-Adresse an Google sendet. Das Landgericht München I (Urteil vom 20. Januar 2022, Az. 3 O 17493/20) hat einem Besucher deshalb 100 Euro Schadensersatz zugesprochen, weil die Website die Schriften ohne seine Einwilligung lud. Das Urteil stützt sich auf die DSGVO, die in der ganzen EU gilt.
Die Abhilfe ist einfach und macht die Website obendrein schneller: Laden Sie die Schriftdateien herunter und liefern Sie sie von Ihrer eigenen Domain aus. Die Schriften von Google Fonts stehen unter offenen Lizenzen, die das erlauben, und der Browser muss keine Verbindung zu einem weiteren Server aufbauen.
Schriften kombinieren ohne Durcheinander
Die meisten Websites brauchen zwei Schriften: eine für Überschriften und eine für den Fließtext. Vielleicht eine dritte für Akzente oder Bedienelemente, wenn Sie etwas Komplexes bauen. Mehr als drei sind fast immer zu viele.
Die klassische Strategie ist Kontrast. Eine Serifen-Überschrift mit serifenlosem Fließtext. Eine fette Display-Schrift mit einer neutralen Textschrift. Die Überschrift zieht die Aufmerksamkeit auf sich, die Textschrift tritt zurück und lässt die Menschen lesen.
Ein paar Grundsätze, die funktionieren:
Kontrast, kein Konflikt. Zwei Schriften sollten sich unterscheiden, aber nicht wirken, als kämen sie von verschiedenen Planeten. Lassen Sie sie eine ähnliche Stimmung teilen, auch wenn ihr Aufbau verschieden ist.
Eine Schrift führt das Gespräch. Die Überschriftenschrift ist ausdrucksstark, die Textschrift ist das Arbeitspferd. Lassen Sie nicht beide um Aufmerksamkeit kämpfen.
Testen Sie mit echten Inhalten. Beurteilen Sie eine Kombination nicht mit "Lorem ipsum". Setzen Sie Ihre echten Überschriften und Absätze ein. Manche Kombinationen sehen in der Schriftauswahl großartig aus und mit echten Wörtern schlecht, besonders mit Umlauten und ß, prüfen Sie also, ob die Schrift alle Zeichen hat, die Sie brauchen.
Wenn Sie konkrete Vorschläge möchten, ist unser Beitrag über neue kostenlose Schriften, die einen Versuch wert sind, ein guter Ausgangspunkt.
Typografie und Markenidentität
Ihre Schriften sind ein direkter Ausdruck Ihrer Marke. Eine Anwaltskanzlei in Comic Sans wäre absurd. Ein Spielwarengeschäft in einer strengen Serifenschrift würde kalt wirken. Die Schrift muss zum Charakter passen.
Überlegen Sie, wie Ihre Marke klingt. Freundlich und locker? Sehen Sie sich abgerundete serifenlose Schriften an. Edel und hochwertig? Denken Sie an eine klare Serifenschrift. Technisch und präzise? Eine geometrische serifenlose Schrift oder eine Monospace-Schrift könnte passen.
Was auch immer Sie wählen, bleiben Sie konsequent. Nutzen Sie dieselben Schriften auf der Website, in Werbematerialien und in Geschäftsdokumenten. Typografie ist einer der sichtbarsten Teile Ihrer Markenidentität, und Inkonsequenz untergräbt Vertrauen schnell.
Fehler, die Designer fürchten
Zu viele Schriften. Zwei sind ideal, drei das Maximum, fünf sind Chaos.
Vernachlässigte Zeilenhöhe und Abstände. Selbst eine großartige Schrift sieht in gedrängten Zeilen schlecht aus. Fließtext braucht für angenehmes Lesen meist eine Zeilenhöhe zwischen 1,5 und 1,7. Die WCAG-Richtlinien verlangen auf ihrer höchsten Stufe der Barrierefreiheit mindestens 1,5 innerhalb von Absätzen.
Stil vor Funktion. Eine ultradünne Modeschrift sieht in einer Präsentation wunderschön aus und ist auf einer echten Website in Fließtextgröße nicht lesbar. Das ist eine häufige Falle, wenn eine visuelle Identität herausstechen will: Wiedererkennbarkeit darf nie auf Kosten der Lesbarkeit gehen.
Vergessene Barrierefreiheit. Text mit geringem Kontrast ist ein echtes Problem. Hellgrau auf Weiß mag elegant aussehen, aber Menschen mit Sehschwäche können es nicht lesen. WCAG 2.2 verlangt auf Stufe AA einen Kontrast von mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Für Onlineshops in der EU ist das mehr als gute Praxis: Nach dem European Accessibility Act (Richtlinie (EU) 2019/882) müssen Dienstleistungen im elektronischen Geschäftsverkehr seit dem 28. Juni 2025 barrierefrei sein, ausgenommen sind nur Kleinstunternehmen, die Dienstleistungen erbringen.
Übersprungene Lizenzprüfung. Nicht jede kostenlose Schrift ist auch für die kommerzielle Nutzung kostenlos. Prüfen Sie die Lizenz vor dem Start.
Die endgültige Entscheidung
Nach all dieser Analyse hier der praktische Weg: Beginnen Sie mit der Schrift für den Fließtext. Wählen Sie etwas sehr gut Lesbares, mit den Schnitten, die Sie brauchen, allen Zeichen Ihrer Sprache und guter Performance. Bauen Sie den Rest Ihrer Typografie um dieses Fundament.
Testen Sie live. Nicht in einem Design-Werkzeug, sondern auf einer echten Seite, auf dem Handy, mit langsamer Verbindung. Dort zeigt sich die Wahrheit.
Gute Typografie ist unsichtbar. Leser sollten nie über die Schrift nachdenken, sondern nur spüren, dass sich der Text leicht und angenehm liest. Wenn das passiert, haben Sie gut gewählt. Typografie ist eines der Prinzipien modernen Webdesigns, die unabhängig von Trends gut altern.
Bauen Sie eine Website, bei der jedes Detail zählt? Sehen Sie, wie wir an Webdesign herangehen, von der Typografie bis zum Start.
