Fonts — Anwendungsbeispiele

Zurück zur Übersicht: Fonts · Tool live öffnen: www.jpkc.com/tools/fonts/

Das Manual erklärt jede Quelle, jeden Tab und jede Option im Detail. Diese Seite ergänzt das um konkrete Arbeitsabläufe: typische Aufgaben, Schritt für Schritt durchgespielt. Die Oberfläche ist auf Englisch — die Labels stehen deshalb im Original, bei Bedarf mit deutscher Erläuterung.

Beispiel 1: Zwei Google-Fonts direkt vergleichen

Du schwankst zwischen zwei Schriften und willst sehen, welche besser zu deinem Text passt. Einen festen Splitscreen hat das Tool nicht — verglichen wird, indem du sie nacheinander lädst und dieselbe Ansicht zweimal beurteilst.

Öffne den Tester, wähle im Dropdown Google Fonts die erste Schrift (z. B. „Inter") und klick auf Display Font.
Geh in den Specimen-Tab, klick in eine der editierbaren Zeilen und tipp deinen echten Text ein — etwa deine Seitenüberschrift. So beurteilst du die Schrift nicht an „AaBbCc", sondern an deinem Inhalt.
Merk dir das Bild (oder mach einen Screenshot), wähle dann im Dropdown die zweite Schrift (z. B. „Source Sans 3") und klick erneut Display Font. Dein eingetippter Text bleibt stehen — du siehst ihn jetzt in der neuen Schrift.
Tipp für den echten Parallelvergleich: Öffne das Tool in zwei Browser-Tabs, lade in jedem eine der beiden Schriften und tippe denselben Text. Dann springst du per Tab-Wechsel direkt zwischen beiden hin und her.

Achte beim Vergleich nicht nur auf die Gesamtanmutung, sondern auf die Details, die sich erst im Fließtext zeigen: die Lesbarkeit kleiner Größen, die Form der Ziffern und wie ruhig der Text auf Absatzlänge wirkt — dafür ist der nächste Schritt das Editable Sample Layout.

Beispiel 2: Eine eigene Web-Font über ihre CSS-URL testen

Du hast eine Lizenz-Schrift bei einem Anbieter (Adobe Fonts, Bunny Fonts) oder ein eigenes @font-face-Stylesheet auf deinem CDN und willst sie vor dem Einbau prüfen. Wichtig vorweg: Das Tool nimmt keine hochgeladene Schriftdatei entgegen, sondern die URL eines Stylesheets, das die Schrift bereits einbindet.

Kopiere die Stylesheet-URL deiner Schrift — also genau die Adresse, die du sonst per <link> in den <head> setzt (z. B. eine https://fonts.bunny.net/css?family=…-URL).
Füg sie in das Feld Custom CSS File ein.
Trag in das Feld Font Family Name den exakten Familiennamen ein, unter dem das Stylesheet die Schrift definiert (z. B. „Cabinet Grotesk"). Ohne diesen Namen weiß das Tool nicht, welche font-family es anwenden soll.
Klick auf Display Font. Die Vorschau bindet das Stylesheet ein und stellt deinen Text in der Schrift dar. Alle Gewichts-Buttons sind aktiv — wähle den Schnitt, den du wirklich lizenziert hast.

Liegt deine Schrift nur als lokale .woff2-Datei vor, lade sie zuerst auf ein erreichbares Hosting und verweise auf das zugehörige CSS — eine reine Datei vom Desktop kann das Tool nicht laden.

Beispiel 3: Glyph-Abdeckung für Umlaute und Sonderzeichen prüfen

Eine hübsche Schrift nützt nichts, wenn ihr das ß fehlt oder das Euro-Zeichen aus dem Rahmen fällt. Genau das prüfst du im Glyphs-Tab, bevor du dich festlegst.

Lade die Kandidaten-Schrift (egal aus welcher Quelle) und klick Display Font.
Wechsle in den Glyphs-Tab. Du siehst ein Raster aller Zeichen, jede Zelle mit Entity-Nummer und gerendertem Glyph.
Geh gezielt die Zeichen durch, die dein Projekt braucht. Für deutschsprachige Inhalte sind das vor allem die Umlaute (ä, ö, ü, Ä, Ö, Ü), das Eszett (ß), die typografischen Anführungszeichen („ “ ‚ ‘) und das Euro-Zeichen (€). Im Raster findest du sie im erweiterten lateinischen Block und bei den Satzzeichen.
Achte auf leere oder ersetzte Zellen. Fehlt ein Zeichen in der Schrift, bleibt seine Zelle leer oder zeigt ein Notglyph — ein klares Signal, dass diese Schrift für deinen Sprachraum nicht vollständig taugt.

Besonders bei dekorativen oder sehr jungen Google-Fonts lohnt der Blick: Viele decken das Grundalphabet ab, schwächeln aber bei Ligaturen, Strichen oder Sonderzeichen.

Beispiel 4: Eine Schrift im echten Layout beurteilen

Ein Musteralphabet sieht fast jede Schrift gut aus. Ob sie auch im Fließtext trägt, zeigt das Editable Sample Layout.

Lade deine Schrift und klick Display Font.
Öffne den Editable Sample Layout-Tab. Die gewählte Schrift rendert ein komplettes Magazin-Layout: Überschriften, mehrspaltiger Text, Zitat, Liste und Karten.
Ersetze den Blindtext durch echten Inhalt. Das Layout ist über den eingebauten Inline-Editor direkt bearbeitbar — klick in eine Überschrift oder einen Absatz und schreib deinen eigenen Text. So beurteilst du Lesbarkeit, Zeilenabstand und das Zusammenspiel von fett, kursiv und Hierarchieebenen im realistischen Kontext.
Prüfe gezielt die Stellen, an denen sich schwache Schriften verraten: lange Absätze in Lesegröße, der Kontrast zwischen Überschrift und Fließtext und wie gut Hervorhebungen (fett/kursiv) sich abheben.

Diese Ansicht ergänzt den Specimen-Tab: Das Specimen prüft Größen und Zeichen, das Sample Layout prüft den Lesefluss.

Beispiel 5: Fluid-Typografie mit dem Clamp()-Rechner bauen

Du willst, dass eine Überschrift auf dem Handy nicht zu groß und auf dem Desktop nicht zu klein ist — ohne ein halbes Dutzend Media Queries. Dafür ist der Clamp() Calculator.

Öffne den Clamp() Calculator-Tab.
Klick zum schnellen Start auf ein Type Scale Preset, etwa H1 — das setzt Min/Max auf 2 rem und 3.5 rem. Oder trag eigene Werte in Min Value und Max Value ein.
Stell den Viewport-Bereich ein, über den interpoliert werden soll — Voreinstellung 320 px (kleines Handy) bis 1440 px (großer Desktop).
Lies das Ergebnis ab. Im Feld clamp() Value steht der fertige Ausdruck, z. B. clamp(2rem, 1.571rem + 2.143vw, 3.5rem). Darunter die komplette font-size: …;-Zeile. Beide kannst du per Klick kopieren.
Kontrolliere die Live-Preview. Der Vorschautext skaliert mit deinem Fenster; die Anzeige nennt aktuelle Viewport-Breite und resultierende Größe. Zieh das Browserfenster schmaler und breiter, um zu sehen, wie die Schrift mitwächst.
Brauchst du den Wert nicht als rohes CSS, sondern als Variable, Mixin oder Utility-Klasse, öffne das Code Examples-Akkordeon: Es liefert denselben Wert als CSS Custom Property, SCSS-Mixin und Tailwind-Klasse.

So baust du in unter einer Minute eine saubere, geräteübergreifende Schriftgröße — und siehst sofort, ob die Spanne zwischen Min und Max sinnvoll gewählt ist.

Noch tiefer: die Übersicht zum großen Bild, das Manual für jede Option im Detail und die Tipps & Tricks für Kniffe und Stolperfallen. Ausprobieren kannst du alles direkt im Tool.