$ Presets
# Überschrift-Font
# Body-Font
$ Vorschau
</> Code
$ So benutzt du den Font-Pair-Generator
Starte mit einem Preset-Pairing — das sind erprobte Kombinationen, die gut zusammen funktionieren. Oder custom: wähl einen Überschrift-Font und einen Body-Font aus den Dropdowns (alle aus Google Fonts), pass Größen und Gewichte an und sieh, wie die Vorschau live updated. Wechsel zwischen Artikel-, Hero- und Card-Vorschau, um zu sehen, wie das Paar in verschiedenen Kontexten wirkt. Wenn du zufrieden bist, kopier den Import oder das CSS und füg es in dein Projekt ein.
Was ein gutes Font-Pairing ausmacht
Die besten Pairings schaffen Kontrast, ohne zu beißen. Ein gängiges Muster ist ein Serif- oder Display-Font für Überschriften kombiniert mit einer cleanen Sans-Serif für Body-Text. Die Überschrift fängt die Aufmerksamkeit; der Body bleibt lesbar. Vermeide es, zwei Fonts zu kombinieren, die zu ähnlich sind — wenn du blinzelst und sie nicht auseinanderhalten kannst, nimm für die Überschrift was mit mehr Charakter.
Warum das für deine App wichtig ist
Deine App-Store-Screenshots, Landingpage und In-App-UI profitieren alle von konsistenter, gut gepaarter Typografie. Die Fonts, die du wählst, geben den Ton an — verspielt, professionell, minimal, fett. Wenn du das Pairing früh richtig machst, sparst du dir später Redesign-Arbeit. Nutze dieses Tool zum schnellen Experimentieren, dann nimm das exakte CSS mit in dein Projekt.
$ FAQ
Ist das kostenlos?
Ja — komplett kostenlos, keine Anmeldung, keine Limits. Läuft komplett im Browser und lädt Fonts direkt von Google Fonts.
Darf ich diese Fonts in meiner App nutzen?
Alle Fonts hier sind von Google Fonts und Open-Source. Du kannst sie in Apps, Websites, Print verwenden — überall. Schau die Lizenz jedes Fonts auf Google Fonts an (meistens SIL Open Font License).
Wie füg ich die Fonts in mein Projekt ein?
Kopier das <link>-Tag oder die @import-Zeile aus dem Code-Bereich und füg sie in dein HTML oder CSS ein. Dann nutze die font-family-Deklarationen aus dem CSS-Output.
Warum werden manche Gewichte als nicht verfügbar gezeigt?
Nicht jeder Google Font unterstützt alle Gewichte. Die Weight-Chips zeigen nur die Gewichte, die der gewählte Font wirklich bietet.