Schriftarten kombinieren: Regeln für harmonische Font-Paare

Zwei Schriftarten lassen sich harmonisch kombinieren, wenn sie sich in einem Merkmal klar unterscheiden und in anderen ähneln. Der Klassiker ist eine Serifenschrift für Überschriften und eine serifenlose Schrift für den Fließtext, beide mit vergleichbarer x-Höhe und einem verwandten Charakter. Wichtiger als das perfekte Paar sind feste Rollen: Jede Schrift hat eine Aufgabe, und dabei bleibt es auf der ganzen Website.

Begriffe wie Schriftklasse, Schnitt und x-Höhe erklärt der Ratgeber Typografie im Web. Dieser Artikel geht einen Schritt weiter und zeigt, wie Sie konkrete Paare finden und testen.

Die Grundregel: Kontrast mit Verwandtschaft

Schriftpaare scheitern meist auf eine von zwei Arten. Entweder sind sich die Schriften zu ähnlich, dann sieht die Kombination aus, als hätte jemand versehentlich zwei fast gleiche Fonts gewählt. Oder sie haben gar nichts gemeinsam, dann wirken Überschrift und Text wie aus zwei verschiedenen Publikationen.

Ein gutes Paar verbindet beides:

• Ein deutlicher Unterschied, zum Beispiel Serifen gegen serifenlos, kräftig gegen leicht oder schmal gegen breit.
• Eine gemeinsame Basis, etwa eine ähnliche x-Höhe, ähnliche Proportionen der Rundungen oder eine verwandte Entstehungszeit und Bauweise.

Fünf bewährte Kombinationsprinzipien

Superfamilien als sicherer Weg

Manche Schriftfamilien gibt es in aufeinander abgestimmten Varianten mit und ohne Serifen. Beispiele aus dem Bereich der freien Schriften sind IBM Plex mit Sans, Serif und Mono oder die Source-Familie mit Source Serif und Source Sans. Weil die Varianten aus einem gemeinsamen Entwurf stammen, passen Proportionen und x-Höhe zusammen. Wer unsicher ist, fährt damit gut.

Beispielpaare aus freien Schriften

Die folgenden Kombinationen bestehen aus Schriften, die unter freien Lizenzen verfügbar sind. Sie sind Ausgangspunkte zum Ausprobieren, keine festen Rezepte:

• Playfair Display und Source Sans 3: kontrastreiche Überschriften mit starkem Wechsel der Strichstärke, dazu eine ruhige Grotesk. Passt zu Magazinen und Themen mit Stil.
• Fraunces und Inter: eine weiche, charakterstarke Serifenschrift mit einer sehr sachlichen Grotesk, die für Bildschirme entwickelt wurde.
• Merriweather und Open Sans: beide robust und gut lesbar, eine solide Wahl für textlastige Ratgeber.
• Lora und Roboto: eine geschwungene Text-Antiqua und eine verbreitete Grotesk, unaufgeregt und vielseitig.
• IBM Plex Serif und IBM Plex Sans: eine Superfamilie mit technischem Charakter, mit Plex Mono für Code.
• Literata und Atkinson Hyperlegible: eine Antiqua für lange Lesetexte und eine Grotesk, deren Zeichen besonders gut voneinander unterscheidbar sind.

Einige dieser Schriften sind als variable Fonts erhältlich. Das spart Dateien, wenn mehrere Gewichte gebraucht werden.

Rollen festlegen

Ist das Paar gewählt, entscheiden Sie, welche Schrift wofür steht, und halten sich daran:

1. Überschriften der Ebenen H1 bis H3 in der Überschriftenschrift.
2. Fließtext, Listen, Tabellen in der Textschrift.
3. Bedienelemente wie Buttons, Navigation und Formulare meist in der Textschrift, weil sie dort am besten lesbar ist.
4. Kleine Auszeichnungen wie Bildunterschriften oder Kategorie-Etiketten in einem eigenen Schnitt der Textschrift, etwa in Großbuchstaben mit etwas mehr Laufweite.

Wechselt die Rolle von Seite zu Seite, verliert die Typografie ihre ordnende Funktion. Wie Hierarchie und Konsistenz zusammenspielen, erklären die Grundlagen guter Gestaltung.

Größen und Gewichte abstimmen

Zwei Schriften bei gleicher Pixelgröße wirken oft unterschiedlich groß, weil ihre x-Höhe verschieden ist. Stellen Sie die Größen deshalb nach Augenmaß ein, nicht nach Zahlen. Eine typografische Skala, bei der jede Überschriftenstufe um einen festen Faktor größer ist, sorgt für ein nachvollziehbares Verhältnis. Bei den Gewichten gilt: Der Unterschied zwischen Überschrift und Text sollte deutlich sein, etwa Bold gegen Regular. Halbe Schritte wie Medium gegen Regular sind am Bildschirm kaum zu erkennen.

Die Wirkung bewusst wählen

Jede Schrift hat einen Charakter, und das Paar bestimmt den Ton der ganzen Website. Bevor Sie Kombinationen ausprobieren, lohnt es sich, die gewünschte Wirkung festzulegen:

Die Überschriftenschrift trägt den Charakter, die Textschrift sorgt für Lesbarkeit. Ist die Überschriftenschrift sehr laut, sollte die Textschrift umso ruhiger sein.

Sonderfälle: Zahlen, Code und mehrere Sprachen

Manche Inhalte stellen besondere Anforderungen an die Schriftwahl:

• Tabellen und Preise: Schriften mit Tabellenziffern, bei denen alle Ziffern gleich breit sind, lassen Zahlenkolonnen sauber untereinanderstehen. Viele Schriften bieten diese Variante über die CSS-Eigenschaft font-variant-numeric: tabular-nums.
• Codebeispiele: Eine Monospace-Schrift als dritte Familie ist hier legitim, weil sie eine klar abgegrenzte Aufgabe hat. Sie sollte gut unterscheidbare Zeichen wie 0 und O oder 1 und l haben.
• Mehrsprachige Websites: Prüfen Sie, ob beide Schriften alle benötigten Zeichen enthalten, etwa für Polnisch, Tschechisch oder Türkisch. Fehlende Zeichen ersetzt der Browser durch eine andere Schrift, was im Text sofort auffällt.

So testen Sie ein Schriftpaar

Ein Paar, das in der Vorschau eines Schriftverzeichnisses gut aussieht, kann in der echten Seite enttäuschen. Testen Sie deshalb mit realistischem Material:

• Eine Seite mit H1, zwei Zwischenüberschriften, drei Absätzen, einer Liste, einer Tabelle und einem Button anlegen.
• Echte Texte mit Umlauten, ß, Zahlen und Anführungszeichen verwenden, kein Blindtext.
• Auf dem Smartphone und am Desktop betrachten.
• Im Dunkelmodus prüfen, falls vorgesehen, weil dünne Schnitte auf dunklem Grund oft zu leicht wirken.
• Die Seite verkleinert oder mit zusammengekniffenen Augen ansehen: Ist die Hierarchie noch klar?
• Prüfen, ob alle benötigten Schnitte und Zeichen in der Lizenz und im Zeichensatz enthalten sind.

Häufige Fehler

• Zwei Schriften mit zu ähnlichem Charakter, etwa zwei neutrale Grotesken, die sich nur in Details unterscheiden.
• Zwei laute Schriften: Zwei ausdrucksstarke Fonts konkurrieren, statt sich zu ergänzen. Eine Schrift darf auffallen, die andere dient.
• Displayschriften im Fließtext: Dekorative Schriften sind für große Größen gemacht und werden klein schnell unlesbar.
• Zu viele Schnitte: Jeder zusätzliche Schnitt ist eine weitere Datei und eine weitere Variante, die Besucher deuten müssen.
• Fehlende Zeichen: Manche Schriften haben keine deutschen Anführungszeichen oder kein großes ß. Der Browser ersetzt fehlende Zeichen dann durch eine andere Schrift.
• Kursivschnitte, die künstlich erzeugt werden, weil der echte Kursivschnitt nicht geladen wurde. Der Browser neigt dann einfach die aufrechte Schrift.

Schriften technisch einbinden

Ist die Wahl getroffen, sollten die Schriften schnell und datenschutzfreundlich laden: im Format WOFF2, beschränkt auf die benötigten Schnitte und Zeichensätze und vom eigenen Server statt von einem fremden Dienst. Wie das Schritt für Schritt geht, zeigt der Artikel Google Fonts DSGVO-konform lokal einbinden.

Eine gelungene Kombination fällt Besuchern nicht bewusst auf. Sie merken nur, dass sich die Seite gut lesen lässt und dass Überschriften und Text zusammengehören.