Schriftkombinationen testen

Q: Welche Zeichen sind enthalten?

Die Vorschau lädt das Latin Subset Englisch, Französisch und die meisten westeuropäischen Sprachen, einschließlich Deutsch mit Umlauten und ß, Akzenten, œ, « » und dem Euro Zeichen und, sofern die Schrift sie hat und Ihr Text sie braucht, die Subsets latin ext mitteleuropäische Buchstaben wie č, ł, ő, ț , Kyrillisch und Griechisch. Fehlt einer Schrift ein Subset, erscheinen diese Zeichen in der Ersatzschrift: Lato, Work Sans und Space Grotesk haben kein Kyrillisch, Griechisch haben nur Inter, Roboto, Open Sans, Source Serif 4 und Fira Code. Arabische Buchstaben enthält keine der 20 Schriften.

Schriftkombinationen für Überschriften und Fließtext mit 20 frei lizenzierten Schriften testen, Größe und Zeilenhöhe anpassen und CSS kopieren.

Vorgeschlagene Paare

Schrift für Überschriften Schrift für Fließtext

Größe der Überschrift Größe des Fließtexts Zeilenhöhe Stärke der Überschrift Dunkler Hintergrund

Text der Überschrift Fließtext

Vorschau

CSS-Code

Selbst hosten mit Fontsource

Installieren Sie die npm-Pakete und importieren Sie nur die Schriftstärken, die Sie verwenden. Die Schriften werden dann von Ihrer eigenen Website ausgeliefert, ohne Font-CDN.

So testen Sie Schriftkombinationen

Beginnen Sie mit einem der Vorgeschlagene Paare (Magazin, Moderner Blog, Landingpage, Nachrichten, Elegant, Techmagazin, Buch, Klassisch, Dokumentation, Verspielt). Jede Schaltfläche zeigt, welche Schrift für Überschriften und welche für Fließtext sie setzt.
Oder wählen Sie selbst eine Schrift für Überschriften und eine Schrift für Fließtext. Die Listen sind in serifenlose Schriften, Serifenschriften, Display-, Monospace- und Handschriften gegliedert. Schriften tauschen vertauscht die beiden.
Passen Sie Größe der Überschrift, Größe des Fließtexts und Zeilenhöhe an und wählen Sie die Stärke der Überschrift (Fett (700) oder Normal (400)). Aktivieren Sie Dunkler Hintergrund, um das Paar im Dark Mode zu prüfen.
Ersetzen Sie Text der Überschrift und Fließtext durch Ihre eigenen Worte: Ein echter Titel und ein echter Absatz verraten viel mehr als ein Pangramm. Lassen Sie zwischen Absätzen eine Leerzeile.
Kopieren Sie den CSS-Code und folgen Sie dann Selbst hosten mit Fontsource, um die Schriften in Ihr Projekt einzubinden.

Die Schriften werden beim ersten Auswählen geladen (etwa 12 bis 50 KB pro Schriftstärke). Sie kommen von dieser Website, nie von einem Font-CDN.

Was eine gute Schriftkombination ausmacht

Kontrast statt Konflikt. Das klassische Rezept: eine Serifenschrift für die eine Rolle, eine serifenlose für die andere, etwa Playfair Display über Lato oder Montserrat über Merriweather. Zwei Schriften, die sich ähneln, aber nicht gleich sind (zum Beispiel zwei geometrische Groteskschriften), wirken oft wie ein Versehen.
Eine ruhige Fließtextschrift. Im Fließtext verbringen Ihre Leser die meiste Zeit. Wählen Sie eine Schrift mit offenen Buchstabenformen und großzügiger x-Höhe (Inter, Lato, Open Sans, Source Serif 4, Merriweather) und heben Sie Display-Schriften wie Playfair Display, DM Serif Display, Oswald oder Caveat für kurze Überschriften auf.
Passende Proportionen. Schriften mit ähnlicher x-Höhe harmonieren in derselben Zeile und derselben Spalte.
Zwei Schriften genügen. Schaffen Sie Hierarchie mit Größe, Stärke und Abständen statt mit einer dritten Schrift.

Für gut lesbaren Fließtext sind 16 bis 20 px mit einer Zeilenhöhe zwischen 1,4 und 1,7 ein guter Ausgangspunkt, bei etwa 60 bis 75 Zeichen pro Zeile. Überschriften brauchen meist eine engere Zeilenhöhe (1,1 bis 1,3), die der CSS-Code für Sie setzt.

Der CSS-Code

Der Code deklariert zwei Custom Properties, --font-heading und --font-body, jeweils mit einem Fallback-Stack: Ist die Webschrift noch nicht geladen, zeigt der Browser eine ähnliche Systemschrift (Georgia für Serifenschriften, die System-UI-Schrift für serifenlose). Die Größen stehen in rem (16 px = 1rem) und folgen damit der Schriftgröße, die im Browser des Lesers eingestellt ist.

Selbst hosten und Lizenzen

Alle 20 Schriften stammen von Fontsource, das Open-Source-Schriften als npm-Pakete bereitstellt. Der Installationskasten zeigt den Befehl npm install und die import-Zeilen für das Latin-Subset und nur die Schriftstärken, die Sie verwenden; Ihr Bundler kopiert die woff2-Dateien dann in Ihren Build. Schriften von der eigenen Domain auszuliefern ist schneller (keine zusätzliche Verbindung), funktioniert offline und vermeidet, die IP-Adressen Ihrer Besucher an einen fremden Schriftdienst zu senden – in der EU ein bekanntes DSGVO-Problem, das in Deutschland bereits zu Abmahnungen geführt hat.

Laut Paket-Metadaten steht jede Schrift hier unter der SIL Open Font License 1.1: Sie dürfen sie auf Websites, in Apps und im Druck verwenden, kommerziell oder nicht, und einbetten. Die Schriftdateien allein dürfen Sie nicht verkaufen. Wenn Sie eine Schrift verändern, muss sie unter der OFL bleiben und darf nicht den ursprünglichen reservierten Namen tragen. Die Lizenzdatei liegt jedem Paket bei.

Häufige Fragen

Nutzt dieses Tool Google Fonts?

Nein. Viele dieser Schriftfamilien gibt es auch bei Google Fonts, hier stammen die Dateien aber aus den npm-Paketen von Fontsource und werden von dieser Website ausgeliefert. Keine Anfrage geht an Google oder ein anderes Font-CDN.

Warum werden manche Überschriften nicht fetter?

DM Serif Display gibt es nur in einer normalen Stärke. Das Tool zeigt die Schrift dann in 400, weist unter den Einstellungen darauf hin, und der CSS-Code verwendet 400.

Kann ich zwei Serifenschriften oder zwei serifenlose Schriften kombinieren?

Ja, wenn sie sich in Rolle und Stärke klar unterscheiden, etwa eine fette, schmale Überschrift mit einer leichten, offenen Fließtextschrift. Das Tool zeigt einen Hinweis, wenn beide Schriften zur selben Stilgruppe gehören, weil der Kontrast aus Serifen- und serifenloser Schrift leichter gelingt.

Welche Zeichen sind enthalten?

Die Vorschau lädt das Latin-Subset (Englisch, Französisch und die meisten westeuropäischen Sprachen, einschließlich Deutsch mit Umlauten und ß, Akzenten, œ, « » und dem Euro-Zeichen) und, sofern die Schrift sie hat und Ihr Text sie braucht, die Subsets latin-ext (mitteleuropäische Buchstaben wie č, ł, ő, ț), Kyrillisch und Griechisch. Fehlt einer Schrift ein Subset, erscheinen diese Zeichen in der Ersatzschrift: Lato, Work Sans und Space Grotesk haben kein Kyrillisch, Griechisch haben nur Inter, Roboto, Open Sans, Source Serif 4 und Fira Code. Arabische Buchstaben enthält keine der 20 Schriften.

Darf ich diese Schriften in einem kommerziellen Projekt verwenden?

Ja. Die SIL Open Font License erlaubt die kommerzielle Nutzung ohne Gebühr und ohne Namensnennung in Ihrem Design. Nur der Weiterverkauf der Schriftdateien für sich allein ist nicht erlaubt.