Schriftarten-Paar Generator
Ein Schriftpaar-Generator zeigt eine Überschriften- und eine Fließtextschrift gemeinsam, damit Sie den Kontrast vor der Entscheidung beurteilen können. Dieser enthält 24 Google-Fonts-Duos in fünf Stimmungen: 7 modern, 5 elegant, 5 klassisch, 5 markant und 2 tech. Wählen Sie Playfair Display mit Source Sans 3, und CSS kopieren liefert die @import-Zeile plus font-family-Regeln für h1-h6 und für den Fließtext.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Überschriftenschrift
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 !@#$%^&*()
Fließtextschrift
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 !@#$%^&*()
Typografie-Einstellungen
Aktionen
Alle Schriftpaare ()
Gespeicherte Paare ()
Über Schriftarten-Paar Generator
Jedes Duo auf dieser Seite ist eine feste Kombination aus Überschrift und Fließtext, keine Zufallsziehung aus einer Schriftliste - der Kontrast zwischen beiden ist also bereits gewollt. Die Schaltfläche Neues Paar springt zu einem anderen Duo der gewählten Kategorie, und die Pfeile neben dem Namen gehen sie der Reihe nach durch. Die Kategoriezeile filtert die Sammlung: Alle, Modern, Elegant, Klassisch, Markant und Tech, mit 24, 7, 5, 5, 5 und 2 Duos.
Die große Vorschau ist bearbeitbar. Klicken Sie in die Überschrift oder in den Absatz und tippen Sie eigene Wörter: Echter Text zeigt, was ein Pangramm verbirgt, etwa eine Überschriftenschrift, deren Ziffern oder Versalien schlecht zu Ihrem Markennamen passen. Die drei Regler stellen die Überschriftengröße von 24 bis 96 Pixel, die Textgröße von 12 bis 24 Pixel und den Zeilenabstand von 1 bis 2,5 in Schritten von 0,1; das Kästchen Dunkle Vorschau schaltet die Musterkarte auf dunklen Grund, ohne die Seite drumherum zu ändern.
CSS kopieren erzeugt einen Block für den Kopf Ihrer Stylesheet-Datei: einen Google-Fonts-@import für beide Familien mit den verwendeten Schnitten, eine font-family- und font-weight-Regel für h1 bis h6 und eine font-family-, font-weight- und line-height-Regel für body, p, li und span. Beachten Sie, was fehlt: Die mit den Reglern gesetzten Schriftgrößen gelten nur der Vorschau, die Größenskala legen Sie im Projekt selbst fest. Die Herz-Schaltfläche legt das aktuelle Duo im Browser unter fwt_font_favs ab - Favoriten überstehen ein Neuladen, wandern aber nicht auf ein anderes Gerät.
Die Schriften werden erst von fonts.googleapis.com geladen, wenn ein Duo angezeigt wird, das hält die Seite leicht. Die Lizenzen liegen bei Google Fonts, nicht bei dieser Seite: Die README des Projekts nennt für die meisten Familien der Sammlung die SIL Open Font License v1.1, für einige die Apache-2-Lizenz und für die Ubuntu-Schriften die Ubuntu Font License v1.0.
Anwendungsfälle
Anleitung
Wählen Sie in der Kategoriezeile eine Stimmung - Alle, Modern, Elegant, Klassisch, Markant oder Tech -, um die 24 Duos auf die passenden einzugrenzen.
Drücken Sie Neues Paar, um zu einem anderen Duo zu springen, oder gehen Sie mit den Pfeilen neben dem Namen die Kategorie der Reihe nach durch.
Klicken Sie in Überschrift und Absatz der Vorschaukarte und tippen Sie eigene Wörter; beide sind bearbeitbar und die Schriften werden beim Tippen neu gesetzt.
Ziehen Sie die Regler für Überschriftengröße, Textgröße und Zeilenabstand, bis das Muster der tatsächlichen Größe Ihres Entwurfs entspricht, und setzen Sie das Häkchen Dunkle Vorschau, wenn die Seite dunkel wird.
Drücken Sie das Herz, um ein Duo im Streifen der gespeicherten Paare weiter unten zu behalten; er bleibt auch nach dem Neuladen bestehen.
Drücken Sie CSS kopieren und setzen Sie den Block an den Anfang Ihres Stylesheets: Er enthält den Google-Fonts-@import und font-family-Regeln für Überschriften und Fließtext.
Profi-Tipps
- Ersetzen Sie den Vorschautext, bevor Sie urteilen. Tippen Sie die echte Schlagzeile und einen echten Absatz ein: Ein Duo, das auf „Die Kunst der Typografie" gut aussieht, kann an einem neun Wörter langen Produktnamen scheitern.
- Das kopierte CSS enthält den Zeilenabstand, aber keine Schriftgröße. Legen Sie die Größen in Ihrer eigenen Skala fest; die beiden Regler dienen dazu, das Duo in der Zielgröße zu prüfen, nicht dazu, sie zu exportieren.
- Tech enthält nur zwei Duos, beide mit Space Grotesk als Überschrift. Wer für eine entwicklernahe Seite mehr Auswahl braucht, schaut in Modern: sieben Duos, darunter Outfit mit Inter und Work Sans mit IBM Plex Sans.
- Mit Herz markierte Duos liegen im Browser unter dem Schlüssel fwt_font_favs. Websitedaten löschen oder ein privates Fenster leert den Streifen der gespeicherten Paare - kopieren Sie deshalb das CSS von allem, was Sie wirklich verwenden wollen.
- Der @import im kopierten Block fordert die Schnitte 400 und 700 für die Überschrift und 400, 500 und 700 für den Fließtext an. Nutzt Ihr Entwurf nur zwei Schnitte, kürzen Sie die Liste vor dem Livegang: Jeder weitere Schnitt ist eine zusätzliche Datei.
Fehlerbehebung
Die Vorschau zeigt weiter eine Ersatzschrift, die Schriften kommen nie an.
Beide Familien werden beim ersten Anzeigen eines Duos von fonts.googleapis.com geholt. Ein Inhaltsblocker, ein strenger Unternehmens-Proxy oder ein Offline-Tab verhindern die Anfrage, und das Muster fällt auf generische Serifen- und Groteskschrift zurück. Erlauben Sie fonts.googleapis.com und fonts.gstatic.com und drücken Sie dann Neues Paar.
Das eingefügte CSS ändert die Schriften, aber der Text hat die falsche Größe.
Das ist so gewollt. Die exportierten Regeln enthalten nur font-family, font-weight und line-height; die Regler steuern die Vorschau und werden nicht in den Block geschrieben. Ergänzen Sie eigene font-size-Angaben und übernehmen Sie dabei die Werte, die Sie mit den Reglern geprüft haben.
Die Kategorie Tech zeigt fast nichts.
Tech enthält zwei Duos, beide auf Basis von Space Grotesk. Das ist kein Ladefehler - der Zähler neben „Alle Schriftpaare" zeigt, wie viele im aktuellen Filter liegen. Wechseln Sie zu Modern mit sieben Duos, wenn Sie für einen entwicklernahen Entwurf mehr Auswahl brauchen.
Der Streifen der gespeicherten Paare ist leer, obwohl Duos markiert wurden.
Favoriten liegen in diesem Browser unter dem localStorage-Schlüssel fwt_font_favs. Sie verschwinden beim Löschen der Websitedaten, im privaten Fenster und beim Wechsel von Browser oder Gerät. Kopieren Sie das CSS jedes Duos, das Sie behalten wollen, statt sich auf das Herz zu verlassen.
CSS kopieren bewirkt beim Drücken nichts.
Die Schaltfläche schreibt über die Clipboard-API des Browsers in die Zwischenablage; die verlangt einen sicheren Kontext und in manchen Browsern eine Berechtigung, die die Seite nicht hat. Kommt nichts an, markieren Sie den Code im CSS-Feld darunter und kopieren Sie ihn von Hand - dort steht immer derselbe Text.
Häufig gestellte Fragen
Ein offensichtlicher Kontrast bei gemeinsamem Skelett. Duos funktionieren, wenn sich die beiden Schriften in einer Dimension klar unterscheiden - eine Serifenschrift als Überschrift gegen eine Grotesk im Text, oder eine schmale Displayschrift gegen eine neutrale Brotschrift - und zugleich in Proportionen wie x-Höhe und Strichkontrast übereinstimmen. Alle Kombinationen hier sind so gebaut.
Ein Werkzeug, das zwei Schriften gemeinsam zeigt statt einzeln. Diese Seite enthält 24 handverlesene Google-Fonts-Duos, zeigt jedes als lebende Überschrift plus Absatz, in die Sie hineinschreiben können, lässt Größe und Zeilenabstand einstellen und exportiert das Duo als CSS-Block mit passendem Google-Fonts-@import.
Gehen Sie von der Rolle aus: eine Schrift für Überschriften, eine für Fließtext. Geben Sie der Textschrift die leichtere Aufgabe - eine Brotschrift wie Inter, Lato, Open Sans oder Source Sans 3 - und lassen Sie die Überschrift die Persönlichkeit tragen. Prüfen Sie beide dann in echter Größe zusammen. Genau das tut die Vorschau hier, und CSS kopieren liefert beide Familien in einem @import.
Aus diesem Generator: Playfair Display mit Source Sans 3 für redaktionelle Seiten, Montserrat mit Open Sans für eine Produktseite, Merriweather mit Lato für lange Texte, Oswald mit Lato, wenn die Überschrift laut sein soll, und Space Grotesk mit Space Mono für Entwicklerdokumentation. Die Kategoriezeile zeigt die übrigen nach Stimmung sortiert.
Drei, die der Praxis standhalten. Nehmen Sie zwei Familien, nicht drei, außer eine ist eine Monospace für Code. Machen Sie den Unterschied unübersehbar, denn ein knapper Unterschied wirkt wie ein Fehler. Halten Sie die Textschrift zurückhaltend und lassen Sie die Überschrift Charakter zeigen. Und praktisch: Prüfen Sie das Duo in Ihrer kleinsten Textgröße, bevor Sie sich festlegen.
Tippen Sie den Markennamen direkt in die bearbeitbare Überschrift und ziehen Sie den Überschriftenregler auf 96 Pixel: Eine Wortmarke wird groß gelesen, und der Buchstabenausgleich zählt mehr als die Lesbarkeit. Gehen Sie eine Kategorie mit den Pfeilen durch und achten Sie auf ungünstige Buchstabenpaare. Für ein Logo zählt die Lizenz der jeweiligen Familie auf Google Fonts, nicht diese Seite.
Beurteilen Sie zuerst die Textschrift, denn dort verbringen Besucher ihre Zeit. Stellen Sie den Textregler auf die Größe, die Ihre Seite wirklich nutzt, erhöhen Sie den Zeilenabstand auf 1,6 oder 1,8 und lesen Sie den Absatz. Erst dann die Überschrift. Passt es, liefert CSS kopieren einen @import und zwei Regeln, die bereits h1-h6 sowie body, p, li und span ansprechen.
Die Duos sind nur Namen, Sie können also beide Familien in der Canva-Schriftauswahl suchen und von Hand zuweisen. Nicht übertragbar ist der CSS-Block, der für ein Stylesheet gedacht ist. Canva führt viele Google-Fonts-Familien, aber nicht alle: Prüfen Sie beide Namen in der Auswahl, bevor Sie eine ganze Vorlage auf ein Duo aufbauen.
Die bearbeitbare Vorschau ist einer. Setzen Sie Ihre echte Überschrift und einen echten Absatz ein, stellen Sie die Größen wie im Entwurf ein, und Sie prüfen Ihren eigenen Inhalt statt eines Musters. Was keine Automatik kann: entscheiden, ob das Duo zu Ihrem Publikum passt. Dieses Urteil bleibt bei Ihnen, deshalb ist die Vorschau bearbeitbar und nicht bewertet.
Sie stammen aus der Google-Fonts-Sammlung, deren Projekt-README für die meisten Familien die SIL Open Font License v1.1, für einige die Apache-2-Lizenz und für die Ubuntu-Schriften die Ubuntu Font License v1.0 nennt. Das sind offene Lizenzen, die Bedingungen gehören aber zu jeder Familie: Öffnen Sie die Schriftseite bei Google Fonts und lesen Sie deren Lizenz, bevor Sie ein bezahltes Produkt ausliefern.