StartseiteDesign-ToolsSchriftarten-Kombination

Schriftarten-Kombination

Das Font-Pairing-Tool zeigt 12 kuratierte Google-Fonts-Kombinationen für Überschriften und Fließtext in der Vorschau, lässt dich Schriften selbst kombinieren und kopiert den passenden CSS-@import.

The Art of Good Typography
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

Über dieses Tool

Das Font-Pairing-Tool zeigt 12 kuratierte Google-Fonts-Kombinationen für Überschriften und Fließtext in der Vorschau, lässt dich Schriften selbst kombinieren und kopiert den passenden CSS-@import.

So funktioniert’s

  1. Wähle eine der kuratierten Kombinationen oder stelle selbst eine Überschriften- und eine Fließtextschrift zusammen.
  2. Nutze „Zufällige Kombination“, um Kombinationen zu entdecken.
  3. Sieh dir die Live-Vorschau von Überschrift und Absatztext an.
  4. Klicke auf „CSS @import kopieren“, um die Schriften auf deiner Website zu laden.

Gut zu wissen

  • Eine klassische Kombination stellt eine Serifenschrift einer serifenlosen gegenüber, etwa Playfair Display mit Source Sans 3.
  • Zu den Kombinationen gehören Montserrat + Merriweather, Raleway + Lato, Space Grotesk + Inter und DM Serif Display + DM Sans.
  • Wenn du eine Website auf zwei Schriftfamilien beschränkst, bleiben die Seiten einheitlich und die Download-Größe sinkt.
  • Die Vorschau lädt die gewählten Schriften von Google Fonts in den Stärken 400 und 700.
  • Mit display=swap in der Font-URL wird Ersatztext angezeigt, während die Webfont lädt.

Läuft komplett in deinem Browser – nichts, was du eingibst, wird hochgeladen oder gespeichert.

Häufige Fragen

Welche Schriften passen gut zusammen?

Schriften mit kontrastierendem Stil, aber ähnlichen Proportionen harmonieren meist gut – etwa eine kontrastreiche Serifenschrift für Überschriften mit einer klaren serifenlosen für den Fließtext. Die kuratierten Kombinationen hier sind bewährt.

Wie viele Schriften sollte eine Website verwenden?

Zwei Familien – eine für Überschriften, eine für Fließtext – reichen für die meisten Websites. Eine dritte ist selten nötig.

Sind Google Fonts für kommerzielle Nutzung kostenlos?

Ja. Die Schriften der Google-Fonts-Bibliothek stehen unter offenen Lizenzen wie der SIL Open Font License und dürfen kommerziell genutzt werden.

Wie binde ich die Schriften auf meiner Website ein?

Füge den kopierten @import ganz oben in dein CSS ein oder wandle ihn in ein link-Tag im HTML-head um, und setze dann font-family für Überschriften und body.