# Schriftkombinationen: einfache Regeln, die funktionieren [Canonical HTML page](https://gradiently.design/de/guide/font-pairing) Zwei Schriften, die allein gut aussehen, können sich streiten, wenn sie eine Seite teilen. Ein paar Regeln und eine Handvoll bewährter Paare nehmen dem das Rätselraten. ## The short version - Schriftkombinationen funktionieren am besten, wenn jede Schrift eine klare Rolle hat, meist eine für Überschriften und eine für Fließtext. - Ein gutes Paar kontrastiert klar in einer Hinsicht, etwa Serife gegen Grotesk oder schwer gegen leicht, und teilt dabei Proportionen und Stimmung. - Eine Schriftfamilie in mehreren Stärken oder eine Superfamilie mit passenden Serifen- und Groteskversionen ist der sicherste Weg, Schriften zu kombinieren. - Zwei Schriften, die ähnlich, aber nicht identisch sind, etwa zwei neutrale Groteskschriften, wirken meist wie ein Fehler statt wie eine Kombination. - Zwei Schriften genügen für fast jede Marke, jeden Post und jede Website, eine dritte sollte eine enge Aufgabe haben, etwa Code oder Labels. Gute **Schriftkombinationen** laufen auf drei Regeln hinaus: Gib jeder Schrift eine eigene Rolle, lass die beiden in einer Weise klar kontrastieren und in allem anderen übereinstimmen, etwa in Proportionen und Stimmung. Eine Serifen-Überschrift über einem Groteskschrift-Fließtext ist das klassische Beispiel. Im Zweifel nimm eine Familie in zwei Stärken, sie kann nicht mit sich selbst kollidieren. ## Beginne mit Rollen, nicht mit Schriften Bevor du irgendeine Schrift wählst, entscheide, welche Aufgaben die Typografie erfüllen muss. Die meisten Designs haben zwei: Überschriften, die den Ton setzen, und Fließtext, der bequem zu lesen sein muss. Manche haben eine dritte, kleine Aufgabe, etwa Labels oder Code. Wähle zuerst die Fließtextschrift, weil sie die meisten Wörter trägt, und suche dann eine Überschriftschrift, die sie ergänzt. | Rolle | Ihre Aufgabe | Worauf es am meisten ankommt | | --- | --- | --- | | Überschrift | Den Ton setzen, zuerst gesehen werden | Charakter, Stärke, Wirkung in großer Größe | | Fließtext | Über längere Zeit bequem gelesen werden | Lesbarkeit, gleichmäßiges Schriftbild, gute Normal- und Kursivschnitte | | Labels und kleiner Text | In kleinen Größen schnell gelesen werden | Klare Formen, offener Abstand, stabile Stärken | | Code oder Zahlen | Ausgerichtet und eindeutig bleiben | Monospace oder tabellarische Ziffern | Schriftrollen. Zwei Schriften können alle vier abdecken, die Fließtextschrift übernimmt oft auch Labels. Ein redaktioneller Post mit großer Überschrift, kleinem Label und einer Zusatzzeile in ruhigerem Stil Rollen sichtbar gemacht: eine große Überschrift mit Charakter, ein kleines Label darüber und eine ruhige Zusatzzeile darunter. Der Kontrast liegt in Größe und Rolle, bevor er in der Schrift liegt. ## In einer Hinsicht kontrastieren, im Rest übereinstimmen Eine Kombination braucht einen sichtbaren Unterschied, sonst wirkt die zweite Schrift wie ein Versehen. Unterscheiden sich die beiden aber in jeder Hinsicht zugleich, sehen sie aus, als stammten sie aus verschiedenen Projekten. Wähle eine Kontrastachse und halte den Rest nah beieinander. - **Klassifikation:** eine Serife mit einer Grotesk. Der verlässlichste Kontrast. [Serifen oder Groteskschrift](https://gradiently.design/de/guide/serif-vs-sans-serif) erklärt, was jede mitbringt. - **Stärke:** ein schwerer Display-Schnitt mit einem normalen Textschnitt, auch aus derselben Familie. - **Breite:** eine schmale Überschriftschrift mit normal breitem Fließtext. - **Proportionen angleichen:** ähnliche x-Höhen, die Höhe der Kleinbuchstaben, lassen die beiden bequem auf einer Zeile nebeneinander sitzen. - **Stimmung angleichen:** Eine warme, weiche Serife passt zu einer warmen, humanistischen Grotesk, eine scharfe, geometrische Grotesk zu einer klaren Serife mit hohem Kontrast. ## Eine Familie oder zwei Die einfachste Kombination ist keine Kombination: eine Familie in zwei oder drei Stärken. Sie ist von Haus aus einheitlich und schwer falsch zu machen. Superfamilien gehen einen Schritt weiter, mit einer Serife und einer Grotesk, die gemeinsam gezeichnet wurden, um Proportionen zu teilen, sodass du den Kontrast zweier Klassifikationen mit der Harmonie eines Designs bekommst. ### Eine Familie - Kontrast nur aus Stärke und Größe - Garantierte Harmonie - Ruhigere, einheitlichere Stimme - Beispiel: Archivo Black für Überschriften, Archivo für Fließtext ### Zwei Familien - Kontrast aus Klassifikation oder Charakter - Braucht passende Proportionen und Stimmung - Ausdrucksstärker, mehr Persönlichkeit - Beispiel: Fraunces für Überschriften, Inter für Fließtext ## Bewährte Schriftkombinationen von Google Fonts Diese Paare nutzen Schriften, die auf [Google Fonts](https://fonts.google.com/) kostenlos und weit verbreitet sind, was sie leicht testbar macht. Sieh sie als Ausgangspunkte: Setze deine eigenen Wörter darin und beurteile das Ergebnis. | Überschrift | Fließtext | Kontrast | Wirkung | | --- | --- | --- | --- | | Playfair Display | Source Sans 3 | Serife mit hohem Kontrast und klare Grotesk | Redaktionell, klassisch | | Fraunces | Inter | Weiche, charaktervolle Serife und neutrale Grotesk | Warm, zeitgenössisch | | DM Serif Display | DM Sans | Display-Serife mit ihrer Begleit-Grotesk | Freundlich, geschliffen | | Instrument Serif | Inter | Schmale Serife und neutrale Grotesk | Mode, redaktionell | | IBM Plex Serif | IBM Plex Sans | Serife und Grotesk einer Superfamilie | Präzise, technisch | | Space Grotesk | Inter | Eigenwillige Grotesk und eine schlichte | Tech, Produkt | | Archivo Black | Archivo | Stärke innerhalb einer Familie | Kräftig, direkt | Sieben Kombinationen von Google Fonts. Jede kontrastiert klar in einer Hinsicht und stimmt in den Proportionen überein. ```html ``` Eine Kombination laden und anwenden: Fraunces für Überschriften, Inter für Fließtext, jeweils mit sinnvollem Fallback. Nur die Stärken, die du nutzt, werden angefordert. ## Kombinationen, die du vermeiden solltest ### Vermeide - Zwei neutrale Groteskschriften, die sich nur leicht unterscheiden - Zwei Display-Schriften, die um Aufmerksamkeit konkurrieren - Eine dritte und vierte Schrift für Abwechslung - Schriften mit sehr unterschiedlichen x-Höhen auf einer Zeile ### Stattdessen - Eine Grotesk in zwei Stärken oder eine Serife dazu - Eine Display-Schrift, eine ruhige Textschrift - Zwei Schriften, mit Stärken und Größen für Abwechslung - Schriften mit ähnlichen Proportionen Display-Schriften verleiten am meisten zum Überbeanspruchen. Sie sind für große Größen und kurze Zeilen gemacht, Fließtext in einer ermüdet das Auge schnell. [Display-Schriften](https://gradiently.design/de/guide/display-fonts) zeigt, wo sie glänzen. ## So testest du eine Schriftkombination in zehn Minuten 1. **Echte Wörter nutzen** Setze eine echte Überschrift und einen echten Absatz aus deiner Arbeit, keinen Platzhaltertext. 2. **In echten Größen setzen** Die Überschrift groß, den Fließtext in Lesegröße, auf dem Format, das du wirklich nutzt. 3. **Das Schriftbild ansehen** Tritt zurück. Der Fließtext sollte wie ein gleichmäßiges Grau aussehen, die Überschrift sollte sich klar davon abheben. 4. **Auf dem Handy ausprobieren** Viele Kombinationen, die auf einem Monitor elegant wirken, fallen in Handygröße auseinander. [Schriften für Social Media](https://gradiently.design/de/guide/fonts-for-social-media) zeigt, was hält. 5. **Die Details prüfen** Zahlen, Satzzeichen, Kursivschnitte und jede Sprache, in der du veröffentlichst. Hast du dich entschieden, schreibe es mit Stärken und Größen auf, damit alle es gleich nutzen, [Markenschriften](https://gradiently.design/de/guide/brand-fonts) behandelt Lizenzen und Sprachen, und [Typografie-Grundlagen](https://gradiently.design/de/guide/typography-basics) die Skala. In Gradiently leben Schriften in deinem Markenkit und gelten für jedes neue Design. ## FAQ ### Was ist Schriftkombination? Schriftkombination heißt, zwei Schriften zu wählen, meist eine für Überschriften und eine für Fließtext, die in einer Hinsicht klar kontrastieren und in Proportionen und Stimmung übereinstimmen. ### Wie viele Schriften sollte ich nutzen? Zwei genügen für fast alles. Eine dritte sollte eine enge Aufgabe haben, etwa Code oder kleine Labels. ### Ist es in Ordnung, nur eine Schrift zu nutzen? Ja. Eine Familie in zwei oder drei Stärken ist die sicherste Kombination, die es gibt, und viele starke Marken nutzen genau das. ### Was ist eine gute Google-Fonts-Kombination? Verlässliche Ausgangspunkte sind Fraunces mit Inter, Playfair Display mit Source Sans 3 und IBM Plex Serif mit IBM Plex Sans. ### Warum wirken meine zwei Schriften zusammen falsch? Meist sind sie zu ähnlich, sodass der Unterschied wie ein Fehler aussieht, oder sie unterscheiden sich in jeder Hinsicht zugleich. Halte einen klaren Kontrast und gleiche Proportionen an.