Skip to main content

Schriftpaar-Vorschlag

Entdecke schöne Google-Font-Paarungen für deine Projekte.

Geprüft von · Zuletzt geprüft

So verwendest du den Schriftpaar-Vorschlag

  1. Wähle eine Kategorie - Modern, Klassisch, Verspielt, Elegant oder Minimal. Der Kategorie-Filter schränkt die kuratierte Liste auf Paarungen ein, die ein emotionales Register teilen.
  2. Sieh dir die Vorschauk karten durch. Jede Karte rendert eine H1, eine H2 und einen Absatz in den tatsächlichen Schriften, damit du x-Höhen-Verhältnisse und wie die Display-Schrift neben ihrem Textkörper-Gegenstück sitzt beurteilen kannst.
  3. Klicke auf eine Karte, um die Paarung in eine größere Live-Vorschau mit Langtext-Absatztext zu erweitern, wo die meisten Rendering-Probleme sichtbar werden.
  4. Kopiere das CSS - der Ausschnitt enthält das <link> zum Google-Fonts-&display=swap-Stylesheet plus die font-family-Deklarationen für Überschriften und Textkörper.
  5. Das Link-Tag in deinen <head> einfügen und die font-family-Regeln auf deine Überschriften- und Textkörper-Selektoren anwenden.

Was eine Paarung funktionieren lässt

Die kuratierte Liste folgt drei typografischen Prinzipien, die lange vor dem Web existierten. Erstens, Kontrast der Klassifikation: eine humanistische Serifenschrift (Lora, Crimson Pro) mit einer geometrischen serifenlosen (Poppins, Montserrat) kombinieren, sodass die zwei Schriften bei der Struktur nicht übereinstimmen statt miteinander zu konkurrieren. Zweitens, gemeinsames x-Höhen-Verhältnis: Wenn Display und Textkörper bei derselben font-size gesetzt sind, sollten ihre Kleinbuchstaben-Höhen sich visuell abgestimmt anfühlen, weshalb Paarungen wie Playfair Display über Source Sans funktionieren, aber Playfair über Montserrat top-heavy wirkt (Playfair hat eine kleine x-Höhe, Montserrat eine große). Drittens, Kompatibilität der vertikalen Metriken: Beide Schriften liefern hhea- und OS/2-Tabellen, die Aufstieg, Abstieg und Zeilenabstand deklarieren; nicht übereinstimmende Metriken verursachen sichtbares Zeilenhöhen-Abdriften, wenn du mitten im Absatz wechselst. Der Vorschlag überprüft diese vorab mit den Schrift-Metadaten und zeigt nur Paare, deren Verhältnisse in einem toleranten Bereich liegen.

Wo du tatsächlich ein Schriftpaar verwendest

  • Marketing-Landingpages, wo eine Display-Serifenschrift die Überschrift verkauft und eine pragmatische serifenlose den Textkörper trägt.
  • Redaktionelle Blogs, die Lesestamina benötigen - eine für Textkörper optimierte Serifenschrift und eine markante serifenlose für das Site-Chrom.
  • Portfolio-Seiten, die von einer Stimm-Schrift profitieren (normalerweise die Display-Wahl), die Persönlichkeit signalisiert, ohne gegen die Arbeitsproben zu kämpfen.
  • Produktdokumentation, wo die Display-Schrift verschachtelte Abschnittsüberschriften behandelt und die Textkörper-Schrift Prosa plus Inline-Code behandelt, wenn sie mit einer Monospace-Dritten gepaart wird.
  • Newsletter und E-Mail-Vorlagen, wo die Paarung auch in Fallback-Stacks vernünftig aussehen muss, weil viele Clients Webfonts blockieren.

Fallstricke in echten Projekten

Die erste Falle ist kumulativer Layout-Shift. Zwei Webfonts bedeutet zwei FOUT- oder FOIT-Übergänge; wenn du nicht font-display: swap plus size-adjust und ascent-override-Deskriptoren (CSS Fonts Level 4) verwendest, um Fallback-Metriken abzugleichen, lädt die Seite zweimal nach. Die zweite ist Nicht-Lateinische Abdeckung: Viele Display-Schriften liefern nur Lateinisch Erweitert; wenn dein Produkt Kyrillisch, Arabisch oder CJK unterstützt, bricht eine Paarung, die auf Englisch funktioniert, in dem Moment, in dem ein Benutzername die Schrift wechselt. Die dritte ist Gewichtungs-Verfügbarkeit: Wenn du eine 300-Gewichtung für den Textkörper referenzierst, aber nur 400 und 700 in der URL anforderst, bekommst du stillschweigend synthetische Fettschriften, die matschig aussehen - immer jede Gewichtung im &wght@-URL-Parameter einbeziehen. Die vierte ist Lizenzumfang: Das Bündeln von Schriftdateien in eine Desktop- oder Mobile-App erfordert oft eine foundry-spezifische Genehmigung, auch für OFL-Schriften.

Die Spezifikationsschicht: CSS Fonts Module Level 4

Moderne Schriftpaarung lebt innerhalb des CSS Fonts Module Level 4, das drei Fähigkeiten eingeführt hat, auf die der Vorschlag sich stützt. Variable Schriften (die @font-face-font-weight: 100 900-Bereich-Syntax) erlauben einer einzigen Datei, alle Gewichtungen von Inter oder Poppins zu liefern und halbieren die Netzwerkkosten einer Paarung. Metrik-Überschreibungen (ascent-override, descent-override, line-gap-override und size-adjust) lassen dich den Browser dazu bringen, eine System-Fallback-Schrift mit denselben Metriken wie die Webfont anzulegen, was den Layout-Shift-Flash beim Laden eliminiert. Und font-feature-settings stellt OpenType-Funktionen (ss01-stilistische Sets, liga-Ligaturen, tnum-tabulare Numerale) zur Verfügung, die ändern, wie ein bestimmtes Paar tatsächlich liest - Source Serif mit aktiviertem cv11 ist wohl ein anderer Paarungs-Partner als ohne.

Vergleich mit Designer-Werkzeugen und Figma

Figmas Design-Tokens-Panel lässt dich jede Google Font sofort in der Vorschau sehen, lehrt dich aber nicht, welche Paarungen zusammenpassen, also ist der übliche Figma-Workflow, die Paarung woanders zu entscheiden und in Figma festzulegen. Typewolf und Fonts In Use sind maßgebliche Inspirationsbibliotheken für realweltliche Paarungen, geben dir aber kein kopierbares CSS. Type.samples und Fontjoy sind engere Gegenstücke - Fontjoy verwendet ein Einbettungsmodell, um visuell unterschiedliche-aber-kompatible Schriften vorzuschlagen, zeigt aber manchmal Paare, die beim Langzeitlesen schlecht funktionieren. Eine menschlich kuratierte Liste wie diese ist enger, aber jede Paarung ist bewährt; der Kompromiss ist, dass du weniger Kombinationen siehst. Wenn deine Marke eine kommerzielle Schrift benötigt (Söhne, Neue Haas Grotesk, Calibre), gilt keines dieser kostenlosen Google-Fonts-Werkzeuge - direkt zur Foundry gehen.

Häufig gestellte Fragen

Warum eine Serifenschrift mit einer serifenlosen kombinieren statt zwei serifenloser?

Zwei serifenlose Schriften konkurrieren oft um dieselbe typografische Rolle, weil ihre Skelette zu ähnlich sind, was das "leicht daneben"-Gefühl erzeugt, bei dem nichts falsch, aber auch nichts richtig ist. Serif-plus-serifenlose Paarungen erzwingen einen harten strukturellen Kontrast - eine Schrift hat ornamentale Striche, die andere nicht - was die Hierarchie zwischen Überschrift und Text sofort lesbar macht. Zwei-serifenlose Paarungen können absolut funktionieren, aber sie erfordern, dass eine der beiden einen bedeutsamen Unterschied in Breite oder Stärke aufweist (eine kondensierte Groteske mit einer humanistischen serifenlosen, zum Beispiel).

Beeinträchtigt die Verwendung von zwei Schriften die Performance?

Nur ein wenig, wenn man vorsichtig ist. Jede variable Schrift ist typischerweise 60-200 KB gzippt; bei zweien liegt man immer noch unter dem 500-KB-Schriften- Budget, das die meisten Prüfungen verwenden. Selbst-Hosting mit <code>font-display: swap</code>, Vorladen von WOFF2-Dateien und Verwenden von <code>size-adjust</code>-Überschreibungen bringt die Kosten nahe an null.

Was ist das ideale x-Höhen-Verhältnis zwischen Display- und Textkörper-Schrift?

Bei gleicher <code>font-size</code> sollte die Display-Schrift eine x-Höhe von etwa 90-105 % der Textkörper-Schrift haben. Über etwa 110 % beginnt die Display-Schrift zu "schreien"; unter 85 % wirkt sie schüchtern neben einem kräftigen Textkörper. Das Verhältnis ist aus der OS/2-Tabelle der Schrift messbar.

Kann ich die geladenen Gewichtungen anpassen?

Ja. Die kopierte CSS-Ausgabe enthält einen <code>&amp;wght@</code>-Parameter, der die Gewichtungen auflistet; jede Gewichtung im verfügbaren Bereich der Schrift durch Semikolons getrennt hinzufügen (z.B. <code>&amp;wght@300;400;500;700;900</code>). Eine nicht in der URL aufgelistete Gewichtung zu referenzieren zwingt Chrome und Firefox, eine Fettschrift durch algorithmisches Verschmieren der Striche zu synthetisieren, was deutlich schlechter aussieht als eine echt gestaltete Gewichtung.

Sind die Schriften kostenlos für kommerzielle Nutzung?

Jede Paarung in dem Werkzeug wird über Google Fonts unter der Open Font License oder Apache License 2.0 geliefert, die beide kommerzielle Nutzung, Modifikation und Bündelung erlauben. Der einzige Vorbehalt ist, dass einige Foundries (zum Beispiel die von Adobe gehostete Source-Familie) eine Nennung auf deiner Lizenzierungsseite verlangen. Wenn du planst, die Schrift in eine native Desktop- oder Mobile-App zu bündeln, lies die spezifische Seite der Foundry - App-Binär-Einbettung erfordert manchmal eine separate Zeile in den Lizenzbedingungen.

Warum verschiebt sich mein Hero-Text beim Seitenload?

Das ist das klassische FOUT: Der Browser malt zuerst Fallback-Metriken, dann tauscht er die Webfont ein und berechnet Zeilenhöhen neu. Die Lösung liegt in CSS Fonts Level 4: Deklariere eine <code>@font-face</code>- Regel für einen lokalen Fallback-Stack mit <code>ascent-override</code>, <code>descent-override</code> und <code>size-adjust</code>, die so abgestimmt sind, dass die Fallback- und Webfont-Layouts identisch sind. Schriften wie Inter veröffentlichen offizielle Override-Werte; für andere bietet das Werkzeug Fontsource vorberechnete Paare.

Funktionieren diese Paarungen in Figma und Sketch?

Ja, weil Google Fonts jede Paarung über seinen Desktop-Google-Fonts- Aktivierungsdienst und Figmas eingebauten Google-Font-Picker liefert. Den genauen font-family-Namen und die Gewichtung eingeben und die Designdatei rendert identisch zur Web-Ausgabe. Ein Vorbehalt: variable- Font-Achsen außer der Gewichtung (zum Beispiel optische Größe oder Schrägstellung) werden von älteren Sketch-Versionen nicht immer respektiert.

Was passiert mit dem Design, wenn ein Besucher kein Netzwerk hat?

Mit <code>font-display: swap</code> rendert der Browser deinen CSS-Fallback- Stack sofort und tauscht die Webfont ein, wenn und wann sie ankommt. Wenn der Besucher vollständig offline ist und die Schrift nicht im HTTP-Cache ist, sehen sie den Fallback unbegrenzt - weshalb die <code>font-family</code>- Fallback-Kette wichtig ist. Immer eine Systemalternative aufführen, die vom Stil her vernünftig nah ist (<code>"Poppins", system-ui, -apple-system, sans-serif</code>).

Verfolgt das Werkzeug, welche Paarung ich ausgewählt habe?

Nein. Der Kategorie-Filter, die Vorschauerweiterung und die Kopieren- Schaltfläche laufen alle im lokalen Preact-Komponentenzustand. Die einzige Netzwerkanfrage, die die Seite in deinem Namen stellt, ist die Anfrage des Vorschau-iframes an fonts.googleapis.com, was dieselbe Anfrage ist, die deine Produktions-Site schließlich stellen wird. Deine Wahl wird nicht protokolliert, aggregiert oder verkauft.

Kann ich drei Schriften statt zwei kombinieren?

Ja, und für dokumentationslastige Produkte möchtest du das oft: eine Display-, eine Textkörper- und eine Monospace-Schrift für Code. Die dritte Schrift existiert fast immer außerhalb der Paarungs-Entscheidung, weil die Monospace-Wahl durch eigene Kriterien angetrieben wird (Coding-Ligaturen, eindeutige 0/O und 1/l/I-Formen). Die Display-und-Textkörper-Paarung eng halten und die Mono unabhängig wählen.

Warum sehen einige Paarungen in Safari gut, in Chrome aber schlecht aus?

Safaris CoreText-Renderer wendet leicht unterschiedliches Hinting und subpixel-Positionierung an als Chromes HarfBuzz und Firefoxs DirectWrite. Bei Textkörpergrößen unter etwa 16 px kann dieselbe Webfont in Safari einen Hauch schwerer aussehen als in Chrome. Die Lösung ist nicht, per-Browser- CSS zu hacken, sondern die Textkörper-Schriftgröße um einen Schritt zu erhöhen, da kleiner Textkörpertext generell eine schlechte Idee für die Lesbarkeit ist.

Verwandte Tools

Mehr CSS & Design

Aspect Ratio Calculator

Calculate and visualize aspect ratios for any dimensions.

Open tool

Blob Shape Generator

Generate organic blob shapes as SVG.

Open tool

Border Radius Generator

Create CSS border-radius with a visual corner editor.

Open tool

CSS Box Shadow Generator

Create CSS box shadows with a visual editor. CSS box-shadow generator, shadow maker and box-shadow builder with live preview, multi-layer support and Material elevation presets.

Open tool

Color Palette Generator

Generate harmonious color palettes, Tailwind-style 50-900 scales and design-system tokens from any base hex color. Also a hex color palette generator (Farbpalette Generator auf Deutsch).

Open tool

Color Picker

Pick colors visually and get HEX, RGB, and HSL values.

Open tool
ZeroUtil unterstützen