JPKCom DB

Fonts — Anwendungsbeispiele

Praxisnahe Durchläufe mit dem Fonts-Tester: Schriften A/B vergleichen, Web-Fonts und lokale Dateien testen, Glyphen prüfen, clamp() und Typo-Skala bauen.

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. Dafür hat das Tool zwei Slots und einen eigenen Vergleichs-Tab.

  1. Öffne den Tester. In der Karte Font Selection ist der Slot Font A aktiv. Tipp im Reiter Google Fonts in das Feld Search „Inter" und klick in der Liste auf Inter. Der Status neben „A" wechselt von „loading…" auf „loaded".
  2. Schalte oben auf Font B (compare) um, such nach „Source Sans" und klick auf Source Sans 3. Die zweite Schrift landet in Slot B.
  3. Öffne den Tab Compare A / B. Ersetze im Feld Sample text den Mustertext durch deinen echten Inhalt — etwa deine Seitenüberschrift — und stell mit dem Regler Size die Größe ein, in der sie später steht.
  4. Darunter zeigt die Karte Paragraph einen Absatz Fließtext in beiden Schriften nebeneinander. Hier siehst du, welche Schrift auf Absatzlänge ruhiger wirkt und mehr Text pro Zeile unterbringt.
  5. Wähle in der Weight / style-Leiste einen Schnitt, etwa 700 — beide Spalten wechseln gemeinsam, du vergleichst also auch die fetten Schnitte direkt.

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. Für den Lesefluss im kompletten Layout ist der nächste Schritt das Editable Sample Layout — es zeigt Font A, also schalt zurück auf Font A und klick die Gewinnerin dort erneut an.

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

Du hast eine Lizenz-Schrift bei einem Anbieter (Adobe Fonts, Bunny Fonts, Fontshare) oder ein eigenes @font-face-Stylesheet auf deinem CDN und willst sie vor dem Einbau prüfen.

  1. Kopiere die Stylesheet-URL deiner Schrift — also genau die Adresse, die du sonst per <link> in den <head> setzt, z. B.:

    https://fonts.bunny.net/css?family=lato:400,700

  2. Öffne im Tool den Reiter Stylesheet URL und füg die Adresse in das Feld Stylesheet URL (https) ein. Sie muss mit https:// beginnen.

  3. Lass das Feld Font family name leer und klick auf Load stylesheet (oder drück Enter).

  4. Erlaubt der Anbieter das Auslesen per CORS, erkennt das Tool die Familie aus den @font-face-Regeln selbst, trägt sie ein und meldet „loaded". Definiert das Stylesheet mehrere Familien, nennt der Status die übrigen; du findest sie als Vorschläge im Feld Font family name. Für eine andere Familie wählst du sie dort aus und klickst erneut Load stylesheet.

  5. Meldet der Status stattdessen „loaded — enter the font family name …", gibt der Server die Regeln nicht frei. Trag dann den exakten Familiennamen aus der Doku des Anbieters ein (z. B. „Cabinet Grotesk") und klick noch einmal Load stylesheet.

Liegt die Schrift in Slot A, sind bei dieser Quelle alle Gewichts-Buttons aktiv — wähle den Schnitt, den du wirklich lizenziert und im Stylesheet eingebunden hast.

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.

  1. Lade die Kandidaten-Schrift in Slot Font A (egal aus welcher Quelle) und warte, bis der Status grün meldet — „loaded", bei einer lokalen Datei „loaded from file", bei einer Systemschrift „installed on this device".
  2. Wechsle in den Glyphs-Tab. Du siehst ein Raster der Zeichen, jede Zelle mit Entity-Nummer und gerendertem Glyph.
  3. 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.
  4. Achte auf Zellen, die aus der Reihe fallen. Fehlt ein Zeichen in der Schrift, setzt der Browser es in einer Ersatzschrift 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.

  1. Lade deine Schrift in Slot Font A.
  2. Öffne den Editable Sample Layout-Tab. Die gewählte Schrift rendert ein komplettes Magazin-Layout: Überschriften, mehrspaltiger Text, Zitat, eine Liste und eine Info-Karte.
  3. Ersetze den Blindtext durch echten Inhalt. Das komplette Layout ist 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. Wähl dafür keinen Schnitt in der Weight / style-Leiste — der gälte für jedes Element, auch für Überschriften und Hervorhebungen.
  4. 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.

  1. Öffne den Clamp() Calculator-Tab.

  2. Klick zum schnellen Start auf ein Type Scale Preset, etwa H1 — das setzt die Einheit auf rem und die beiden Größen auf 2 rem und 3.5 rem. Oder trag eigene Werte in Size at the min viewport und Size at the max viewport ein.

  3. Stell den Viewport-Bereich ein, über den interpoliert werden soll — Voreinstellung 320 px (kleines Handy) bis 1440 px (großer Desktop). Lass Output unit auf rem (recommended).

  4. Lies das Ergebnis ab. Im Feld clamp() Value steht der fertige Ausdruck, darunter in CSS Property die komplette Zeile. Beide kopierst du per Klick:

    font-size: clamp(2rem, 1.5714rem + 2.1429vw, 3.5rem);

  5. Prüf die Hinweise unter dem Ergebnis. Bei H1 ist die größere Größe das 1,75-Fache der kleineren — keine Warnung. Trägst du zum Test 1 rem und 3 rem ein, meldet der Rechner, dass das 3-Fache über der 2,5-Grenze liegt und der Text beim Zoomen eventuell keine 200 % erreicht (WCAG 1.4.4).

  6. Kontrolliere die Live-Preview. Der Vorschautext in Font A skaliert mit deinem Fenster; die Kopfzeile nennt aktuelle Viewport-Breite und resultierende Größe. Zieh das Browserfenster schmaler und breiter, um zu sehen, wie die Schrift mitwächst.

  7. Brauchst du den Wert nicht als rohes CSS, öffne das Code Examples-Akkordeon: Es liefert denselben Wert als CSS Custom Property und als Tailwind-Klasse, dazu einen Aufruf der SCSS-Funktion fluid() für Dart Sass (ungerundet, immer in rem — siehe Manual):

    <p class="text-[length:clamp(2rem,1.5714rem_+_2.1429vw,3.5rem)]">

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

Beispiel 6: Eine lokale Font-Datei testen, ohne sie hochzuladen

Du hast eine Schrift als Datei auf dem Rechner — vom Foundry gekauft, aus einem Kundenprojekt oder frisch aus dem Font-Editor — und willst sie neben einer Google-Alternative sehen.

  1. Lass den Slot auf Font A und öffne den Reiter Font file.
  2. Zieh die Datei (z. B. Brand-Regular.woff2) in die Drop-Zone oder klick Choose files. Erlaubt sind TTF, OTF, WOFF und WOFF2 bis 20 MB je Datei. Der Status zeigt „loaded from file", die Datei erscheint zusätzlich in der Liste unter der Drop-Zone.
  3. Schalte auf Font B (compare), wechsle zum Reiter Google Fonts und lade eine frei verfügbare Alternative.
  4. Im Tab Compare A / B siehst du nun deine Hausschrift und die Alternative nebeneinander — mit deinem eigenen Mustertext.
  5. Hast du mehrere Dateien geladen (etwa Regular und Bold als getrennte Dateien), klickst du einen Eintrag in der Dateiliste an, um ihn in den gerade aktiven Slot zu legen.

Die Datei liest dein Browser über die FontFace-API ein; sie wird nicht hochgeladen. Nach einem Neuladen der Seite ist sie weg und muss erneut ausgewählt werden.

Beispiel 7: Eine fluide Typo-Skala für das ganze Projekt erzeugen

Statt jede Überschrift einzeln durch den Rechner zu schicken, erzeugst du mit der Fluid type scale alle Stufen auf einmal.

  1. Öffne den Clamp() Calculator-Tab und stell oben den Viewport-Bereich und die Root font size ein — die Skala übernimmt beide.

  2. Scroll zur Karte Fluid type scale. Setz Base at min viewport (px) auf 16 und Base at max viewport (px) auf 18: Fließtext wächst damit von 16 auf 18 px.

  3. Wähle die Verhältnisse: Ratio at min viewport 1.2 Minor third für ein ruhiges Handy-Layout, Ratio at max viewport 1.25 Major third für mehr Kontrast auf großen Bildschirmen.

  4. Die Tabelle zeigt die Stufen von --step-5 bis --step--2 mit Min-/Max-Größe, clamp()-Wert und einem Muster „Aa" in deiner Schrift A.

  5. Klick Copy CSS und füg den Block in dein Stylesheet ein:

    css
    :root {
    --step--2: clamp(0.6944rem, 0.6871rem + 0.0365vw, 0.72rem);
    --step--1: clamp(0.8333rem, 0.8143rem + 0.0952vw, 0.9rem);
    --step-0: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
    --step-1: clamp(1.2rem, 1.1411rem + 0.2946vw, 1.4063rem);
    --step-2: clamp(1.44rem, 1.3492rem + 0.454vw, 1.7578rem);
    --step-3: clamp(1.728rem, 1.5939rem + 0.6704vw, 2.1973rem);
    --step-4: clamp(2.0736rem, 1.8813rem + 0.9614vw, 2.7466rem);
    --step-5: clamp(2.4883rem, 2.2183rem + 1.3499vw, 3.4332rem);
}

body { font-size: var(--step-0); }
h1   { font-size: var(--step-5); }
h2   { font-size: var(--step-4); }

Die letzten drei Zeilen ergänzt du selbst — das Tool liefert nur die Variablen. So hängen alle Größen an denselben vier Stellschrauben: Änderst du später Basis oder Verhältnis, erzeugst du die Skala neu und tauschst den Block aus.

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.