# Google-Fonts-Kombinationen: 25 Paare, die funktionieren [Canonical HTML page](https://gradiently.design/de/guide/google-fonts-pairings) Jedes Paar hier ist kostenlos bei Google Fonts und danach gewählt, wie es sich in echten Überschriften und Fließtexten verhält. Nach Stimmung gruppiert, mit den Schnitten, die jedes Paar tragen. ## The short version - Eine gute Google-Fonts-Kombination gibt Überschrift und Text klar verschiedene Aufgaben, meist durch den Kontrast zwischen einer Display- oder Serifenschrift und einer schlichten Serifenlosen. - Paare aus derselben Superfamilie, etwa DM Serif Display mit DM Sans oder IBM Plex Sans mit IBM Plex Mono, sind der sicherste Startpunkt. - Fließtext braucht eine Schrift mit großzügiger x-Höhe und offenen Formen im Regular-Schnitt 400; Überschriften dürfen mehr Persönlichkeit tragen. - Schriften bei Google Fonts stehen unter offenen Lizenzen, die kommerzielle Nutzung erlauben, auch in Logos, Produkten und Kundenarbeit. - Lade nur die Schnitte, die du nutzt, und ergänze display=swap, damit Seiten schnell bleiben. Die besten **Google-Fonts-Kombinationen** stellen eine charakterstarke Überschriftschrift gegen eine ruhige, gut lesbare Textschrift: Fraunces mit Inter, Playfair Display mit Source Sans 3, Space Grotesk mit Inter oder DM Serif Display mit DM Sans. Unten findest du 25 Kombinationen nach Stimmung gruppiert, jeweils mit den Schnitten, die sie tragen, und ihrem Einsatzzweck. Alle sind kostenlos, alle erlauben kommerzielle Nutzung, und alle laden mit einer Codezeile. Wähle zuerst eine Gruppe nach Gefühl, dann ein Paar nach Aufgabe. ## So liest du diese Kombinationen Jedes Paar nennt zuerst die Überschrift, dann den Text. Der Überschriftschnitt ist der für große Größen; Text bleibt bei 400, mit 600 oder 700 zur Betonung. Wenn dir die Überlegung dahinter neu ist: [Schriftkombination](https://gradiently.design/de/guide/font-pairing) erklärt, warum Kontrast Ähnlichkeit schlägt, und [Serif oder Sans Serif](https://gradiently.design/de/guide/serif-vs-sans-serif) zeigt, was jede Familie mitbringt. Ein Post im Editorial-Stil im Hochformat mit großer Display-Überschrift über kleinerem, ruhigerem Begleittext Eine Kombination gibt der Seite zwei Stimmen. Die Überschrift zieht an, der Text erklärt. Sie sollten nie konkurrieren. ## Editorial-Kombinationen: Serifen-Überschrift mit serifenlosem Text Die klassische Struktur. Eine Serifen-Überschrift bringt Wärme und Autorität; ein serifenloser Text hält langes Lesen am Bildschirm leicht. | # | Überschrift | Text | Passt zu | | --- | --- | --- | --- | | 1 | Playfair Display 700 | Source Sans 3 400 | Magazinen, Restaurants, Hochzeiten | | 2 | Fraunces 600 | Inter 400 | Food, Handwerksmarken, Newslettern | | 3 | DM Serif Display 400 | DM Sans 400 | Agenturen, Portfolios, Landingpages | | 4 | Instrument Serif 400 | Instrument Sans 400 | Modernem Editorial, Studios, Mode | | 5 | Cormorant Garamond 600 | Work Sans 400 | Beauty, Interior, Boutique-Hotels | | 6 | Libre Baskerville 700 | Libre Franklin 400 | Verlagen, Recht, anspruchsvollen Longreads | Fraunces hat eine Achse für optische Größe: Bei großen Größen werden die Details schärfer. Cormorant Garamond ist am Bildschirm zart, nutze sie also nur für Überschriften. ## Moderne Serifenlose für Tech und Produkt Für Software, Startups und alles, was aktuell wirken soll. Die Überschrift trägt den Charakter durch Form, Breite oder eigenwillige Details, während der Text ein Arbeitstier ist. | # | Überschrift | Text | Passt zu | | --- | --- | --- | --- | | 7 | Space Grotesk 700 | Inter 400 | Entwickler-Tools, Fintech, Dashboards | | 8 | Syne 700 | Manrope 400 | Kreativstudios, Events, Musik | | 9 | Sora 600 | Figtree 400 | Apps, SaaS-Seiten, Onboarding | | 10 | Unbounded 600 | Plus Jakarta Sans 400 | Futuristischen Marken, Gaming, Launches | | 11 | Archivo Black 400 | Archivo 400 | Kräftigen Produktseiten, Sport, Handel | Unbounded und Syne sind breit und laut: Halte Überschriften kurz. Archivo passt zu sich selbst, weil sein Black-Schnitt ein ganz anderes Tier ist als sein Regular. ## Serifenlose Überschriften mit Serifen-Text Die umgekehrte Struktur eignet sich fürs lange Lesen: Eine klare serifenlose Überschrift markiert Abschnitte, und ein Serifen-Text wirkt buchig und bremst das Auge angenehm. | # | Überschrift | Text | Passt zu | | --- | --- | --- | --- | | 12 | Poppins 600 | Lora 400 | Blogs, Coaching, persönlichen Seiten | | 13 | Montserrat 700 | Merriweather 400 | Ratgebern, Non-Profits, Berichten | | 14 | Bricolage Grotesque 700 | Newsreader 400 | Essays, unabhängigen Medien | | 15 | Outfit 600 | Source Serif 4 400 | Dokumentation, Kursmaterial | ## Freundliche, runde Kombinationen | # | Überschrift | Text | Passt zu | | --- | --- | --- | --- | | 16 | Fredoka 600 | Nunito 400 | Kindermarken, Spielzeug, Familiencafés | | 17 | Quicksand 700 | Mulish 400 | Wellness, Haustieren, sanften Services | | 18 | Rubik 600 | Karla 400 | Community-Apps, lokalen Services, Hilfsorganisationen | Runde Schriften wirken nahbar, aber weich. Quicksand sieht unter 600 leicht aus; nimm ihre schwereren Schnitte für alles, was lesbar sein muss. ## Fette Display-Kombinationen für Poster und Social Schmale und schwere Display-Schriften bringen große Wörter in kleine Ausschnitte, weshalb sie Thumbnails und Poster dominieren. Sie brauchen einen ruhigen Partner. [Thumbnail-Text](https://gradiently.design/de/guide/typography-for-thumbnails) und [Schlagzeilenschriften](https://gradiently.design/de/guide/headline-fonts) gehen weiter. | # | Überschrift | Text | Passt zu | | --- | --- | --- | --- | | 19 | Anton 400 | Roboto 400 | Thumbnails, Sport, Posts im Nachrichtenstil | | 20 | Bebas Neue 400 | Montserrat 400 | Fitnessstudios, Events, kräftigen Speisekarten | | 21 | Oswald 600 | Lato 400 | Postern, Kampagnen, Sales | | 22 | Abril Fatface 400 | Poppins 400 | Mode-Posts, Getränken, Nachtleben | ## Technische und luxuriöse Kombinationen | # | Überschrift | Text | Passt zu | | --- | --- | --- | --- | | 23 | IBM Plex Sans 600 | IBM Plex Mono 400 | Entwickler-Doku, Daten, Forschung | | 24 | Space Grotesk 500 | Space Mono 400 | Indie-Software, Zines, Portfolios | | 25 | Bodoni Moda 500 | Jost 400 | Schmuck, Parfüm, hochwertigem Einzelhandel | Bei 24 ist die Mono der Text: Sie funktioniert für kurze Notizen und Labels, nicht für Essays. Bodoni Modas Haarlinien fühlen sich groß am wohlsten, ab etwa 32 px. ## Fehler, die eine Kombination zerstören ### Vermeiden - Zwei ähnliche Serifenlose, die wie ein Fehler aussehen - Zwei Display-Schriften, die um Aufmerksamkeit kämpfen - Eine Haarlinien-Serife als Fließtext am Bildschirm - Alle Schnitte beider Familien laden - Eine dritte Schrift für eine besondere Überschrift ### Besser so - Klarer Kontrast in Struktur, Gewicht oder Breite - Eine laute Schrift und eine leise - Text bei 400 in einer Schrift mit großzügiger x-Höhe - Nur die zwei bis vier Schnitte, die du nutzt - Stattdessen Gewicht oder Größe aus deinen zwei Schriften nutzen ## So bindest du eine Google-Fonts-Kombination in deine Website ein 1. **Schnitte wählen** Meist ein Überschriftschnitt und zwei Textschnitte. Jeder weitere Schnitt ist eine weitere Datei zum Herunterladen. 2. **Embed kopieren** Wähle die Familien bei Google Fonts aus und kopiere den Link, den es dir gibt, oder passe den Code unten an. 3. **Rollen in CSS festlegen** Gib Überschriften und Text eigene Variablen für die Schriftfamilie, damit ein späterer Wechsel nur eine Zeile kostet. 4. **Mit echtem Text testen** Prüfe einen langen Absatz, eine zweizeilige Überschrift und deinen längsten Produktnamen, bevor du dich festlegst. ```html ``` Kombination 2, Fraunces mit Inter, lädt nur drei Schnitte. Tausche die Familiennamen gegen ein beliebiges Paar oben. Google Fonts sind für kommerzielle Nutzung kostenlos, aber lies [Schriftlizenzen](https://gradiently.design/de/guide/font-licensing), bevor du eine änderst oder als Teil eines Produkts verkaufst. Damit die Wahl für eine ganze Marke hält, mach daraus ein [Typografiesystem](https://gradiently.design/de/guide/brand-typography-system) mit benannten Rollen. Für Social-Posts und Decks legst du dein Paar einmal in einem Gradiently-Markenkit fest (Teil von Pro), das eine Überschrift- und eine Textschrift hält und [hochgeladene Schriftdateien](https://gradiently.design/de/guide/custom-fonts-upload) akzeptiert, und der Designer nutzt sie, wenn er ein Design aufbaut. ## FAQ ### Was sind die besten Google-Fonts-Kombinationen? Verlässliche Startpunkte sind Fraunces mit Inter, Playfair Display mit Source Sans 3, DM Serif Display mit DM Sans und Space Grotesk mit Inter. ### Welche Schrift passt gut zu Montserrat? Merriweather als Textschrift gibt einen klassischen Kontrast aus Serifenloser und Serifenschrift. Bebas Neue funktioniert über Montserrat als kräftige Poster-Überschrift. ### Was passt gut zu Playfair Display? Eine schlichte, offene Serifenlose für den Text, etwa Source Sans 3, Lato oder Inter. Kombiniere sie nicht mit einer weiteren kontrastreichen Serifenschrift. ### Sind Google Fonts für kommerzielle Nutzung kostenlos? Ja. Schriften bei Google Fonts nutzen offene Lizenzen, meist die SIL Open Font License, die kommerzielle Nutzung erlauben, auch für Logos, Websites, Druck und Kundenarbeit. Lies die Lizenz auf der Seite jeder Schrift, wenn du die Dateien ändern oder weitergeben willst. ### Wie viele Schriften sollte eine Website nutzen? Zwei sind für die meisten Seiten reichlich: eine für Überschriften und eine für den Text, nur in den Schnitten, die du brauchst.