Fonts — Manual

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

Dieses Manual beschreibt den Fonts-Tester vollständig: wie du eine Schrift aus den vier Quellen lädst, wie die beiden Slots A und B zusammenspielen, wie du Gewicht und Schnitt wählst, was jeder der fünf Vorschau-Tabs zeigt und wie der clamp()-Rechner samt Typo-Skala arbeitet. Die Oberfläche des Tools ist auf Englisch — die Bedien-Labels werden hier deshalb in ihrer englischen Original-Schreibweise genannt (mit deutscher Erläuterung), damit du dich im echten Interface zurechtfindest.

Ablauf: Slot wählen, Schrift laden, Schnitt setzen

Der Grundablauf ist immer gleich:

1. Den Slot wählen. Oben rechts in der Karte Font Selection schaltest du zwischen Font A und Font B (compare) um. Font A ist die Hauptschrift und erscheint in allen Vorschauen; Font B brauchst du nur für den Vergleich im Tab Compare A / B. Voreingestellt ist Font A.
2. Eine Schrift aus einer der vier Quellen laden — über die Reiter Google Fonts, System, Font file und Stylesheet URL. Einen separaten Anzeigen-Button gibt es nicht: Ein Klick in die Google-Liste, die Auswahl einer Systemschrift, eine abgelegte Datei oder Load stylesheet wendet die Schrift sofort auf den gewählten Slot an.
3. Den Status prüfen. Unter den Reitern stehen beide Slots mit Schriftname, Quelle und Ladezustand, etwa „loading…", „loaded" oder „installed on this device". „loaded" meldet das Tool erst, wenn der Browser die Schrift tatsächlich darstellen kann (document.fonts). Klappt das nicht binnen 10 Sekunden, steht dort „did not load within 10 s"; findet der Browser keine Schrift unter dem Namen, „the browser found no font named …".
4. In der Leiste Weight / style einen Schnitt wählen — von 100 bis 900, jeweils normal oder kursiv.
5. Durch die Vorschau-Tabs blättern (Specimen, Editable Sample Layout, Glyphs, Compare A / B, Clamp() Calculator).

Die Quellen lassen sich frei mischen: Font A kann eine Google-Schrift sein, Font B eine lokale Datei oder eine Systemschrift.

Google Fonts

Der Reiter Google Fonts zeigt die komplette Google-Fonts-Bibliothek — derzeit knapp 2000 Familien — als durchsuchbare Liste:

• Search filtert nach dem Familiennamen. Mehrere Wörter müssen alle im Namen vorkommen (open sans, mono); Schriften, deren Name mit dem ersten Wort beginnt, stehen oben, der Rest alphabetisch.
• Category grenzt auf eine Gattung ein: All, Sans serif, Serif, Display, Handwriting oder Monospace.
• Jeder Eintrag nennt rechts Kategorie und Zahl der Schnitte (z. B. „sans-serif · 18 styles").
• Die Liste baut die Treffer in Blöcken zu je 100 auf. Scrollst du ans Ende, lädt sie den nächsten Block nach; per Tastatur erreichst du dasselbe über den Eintrag Show more (… left). Unter der Liste steht, wie viele Treffer gerade sichtbar sind und wie viele es insgesamt gibt.

Ein Klick auf eine Schrift lädt sie über die css2-API von Google — mit genau den Schnitten, die sie mitbringt, und display=swap. Als Ausweichschrift setzt das Tool eine zur Kategorie passende generische Familie dahinter (bei Handwriting cursive, bei Monospace monospace usw.). Liegt die Schrift in Slot A, schaltet die Weight / style-Leiste anschließend nur die Schnitte frei, die diese Schrift wirklich hat; eine Google-Schrift in Slot B ändert die Leiste nicht.

Die Liste selbst kommt vom Server des Tools, nicht von Google (siehe Architektur und Datenschutz). Erst das Laden einer Schrift verbindet deinen Browser mit Google — darauf weist auch der Hinweis unter der Liste hin.

System

Der Reiter System enthält das Auswahlfeld System font mit 51 Einträgen:

• Generische Familien (mit „(generic)" markiert): sans-serif, serif, monospace, cursive, fantasy, system-ui, ui-monospace, ui-serif, ui-rounded. Sie funktionieren immer — welche konkrete Schrift dahintersteckt, entscheidet der Browser.
• Gängige Systemschriften von Windows, macOS und Linux, darunter Arial, Arial Black, Calibri, Cambria, Consolas, Courier New, DejaVu Sans, Garamond, Georgia, Helvetica, Helvetica Neue, Impact, Liberation Sans, Lucida Grande, Menlo, Monaco, Noto Sans, Palatino, Roboto, Segoe UI, SF Pro Text, Tahoma, Times New Roman, Trebuchet MS, Ubuntu und Verdana.

Beim Füllen der Liste prüft das Tool für jede Schrift, ob sie auf deinem Gerät installiert ist: Es misst einen Testtext in der Schrift und in drei generischen Ausweichschriften und vergleicht die Breiten. Fehlende Schriften stehen mit „— not installed" in der Liste. Wählst du eine davon trotzdem, warnt der Status „not installed on this device — a fallback font is shown" — du siehst dann nicht die Schrift, sondern den Ersatz des Browsers. Systemschriften lädt das Tool nicht nach; sie zeigen, wie dein Text ohne jeden Web-Font-Download aussieht.

Font file

Im Reiter Font file testest du Schriftdateien direkt von deinem Rechner:

• Zieh eine oder mehrere Dateien in die Drop-Zone („Drop TTF, OTF, WOFF or WOFF2 files here") oder wähle sie über Choose files aus.
• Erlaubt sind die Endungen .ttf, .otf, .woff und .woff2, je Datei bis 20 MB. Andere Dateien lehnt das Tool mit einer Meldung ab, ebenso Dateien, die der Browser nicht als Schrift lesen kann.
• Die Datei wird im Browser über die FontFace-API eingelesen — sie wird nicht hochgeladen und verlässt deinen Rechner nicht.
• Die erste Datei eines Vorgangs landet sofort im aktuell gewählten Slot, der Status meldet „loaded from file". Jede geladene Datei erscheint außerdem als Eintrag in einer Liste unter der Drop-Zone; ein Klick darauf setzt sie in den Slot, der gerade aktiv ist. So legst du etwa zwei Schnitte oder zwei Versionen einer Schrift nacheinander auf A und B.
• Intern registriert das Tool die Schrift unter dem Familiennamen „Local" plus Dateiname (aus Inter-Bold.woff2 wird „Local Inter-Bold"); im Status steht der Dateiname.

Gespeichert wird nichts: Nach einem Neuladen der Seite musst du die Dateien erneut auswählen.

Stylesheet URL

Mit Stylesheet URL testest du jede Web-Font, die irgendwo als @font-face-Stylesheet liegt — Adobe Fonts/Typekit, Bunny Fonts, Fontshare oder das CSS deines eigenen CDNs.

1. Trag die Adresse in Stylesheet URL (https) ein. Erlaubt sind nur https://-Adressen; eine http://-URL lehnt das Tool mit „Only https:// stylesheets can be loaded here." ab.
2. Das Feld Font family name darfst du leer lassen.
3. Klick auf Load stylesheet oder drück im URL-Feld Enter.

Das Tool bindet das Stylesheet zuerst mit CORS ein. Erlaubt der Server das, liest es alle font-family-Namen aus den @font-face-Regeln aus, bietet sie im Feld Font family name als Vorschläge an und setzt bei leerem Feld automatisch die erste Familie ein. Definiert das Stylesheet mehrere Familien, nennt der Status die übrigen („the stylesheet also defines …"). Sendet der Server keine CORS-Header, lädt das Tool das Stylesheet ein zweites Mal ohne CORS — die Schriften sind dann nutzbar, aber die Namen nicht lesbar. Der Status meldet „loaded — enter the font family name …": Trag den Namen von Hand ein und klick erneut auf Load stylesheet.

Liegt die Schrift in Slot A, sind wie bei System und Font file alle Gewichts-Buttons aktiv, denn das Tool kennt die Schnitte des Stylesheets nicht.

Weight / Style — die Schnitt-Auswahl

Die Leiste Weight / style bietet 18 Schalter: die Gewichte 100, 200, 300, 400, 500, 600, 700, 800, 900 — jedes davon einmal normal und einmal kursiv (beschriftet als „400" und „400i"). Jeder Button ist selbst im jeweiligen Gewicht gesetzt, du siehst die Abstufung also schon an der Beschriftung.

• Bei Google Fonts sind nur die real verfügbaren Varianten der Schrift aktiv; die übrigen sind ausgegraut.
• Bei System, Font file und Stylesheet URL sind alle Schnitte aktiv — ob ein Schnitt echt vorhanden ist, hängt von der Schrift ab. Eine lokale Datei meldet das Tool als einen einzigen Schnitt mit Gewicht 400 an. Fehlt ein Schnitt, nimmt der Browser den nächstliegenden vorhandenen; nur Fett und Kursiv erzeugt er künstlich.
• Maßgeblich für das Freischalten ist Font A. Wechselst du Font A, setzt das Tool die Auswahl zurück.

Ein Klick auf einen Schnitt setzt font-weight und font-style auf jedes einzelne Element der Vorschau-Bereiche, das in Font A gesetzt ist, auf die Live-Preview des Rechners und auf beide Spalten im Tab Compare A / B. So vergleichst du dieselbe Schrift bequem über ihre Schnitte hinweg — oder zwei Schriften im selben Schnitt. Weil der Schnitt jedes Element trifft, verlieren auch Überschriften und fette oder kursive Hervorhebungen ihre eigene Auszeichnung. Willst du die Mischung der Schnitte beurteilen, lass die Leiste leer; zurückgesetzt wird sie erst, wenn du Font A neu wählst.

Die Vorschau-Tabs im Detail

Alle Tabs außer Compare A / B zeigen Font A. Hast du noch keine Schrift gewählt, siehst du die Standardschrift der Seite.

Specimen

Das klassische Schriftmuster. Oben steht in 72 px der Name der gewählten Schrift (vor der ersten Auswahl „AaBbCc"), darunter das vollständige Alphabet (Groß- und Kleinbuchstaben), die Ziffern und ein Satz Satzzeichen in 30 px. Es folgt eine Tabelle, die denselben Zeichensatz in 20 Größen zeigt: 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 24, 30, 36, 48, 60, 72, 90 und 96 px. Jede Zeile ist contenteditable — klick hinein und ersetze den Mustertext durch deinen eigenen, etwa eine echte Überschrift oder einen Markennamen, um die Schrift an realem Text zu beurteilen.

Editable Sample Layout

Hier siehst du die Schrift nicht als Musteralphabet, sondern in einem vollständigen Magazin-Layout: Überschriften (h1–h3), mehrspaltiger Fließtext, ein hervorgehobenes Zitat, eine Aufzählung, eine Info-Karte und Links. Das Layout ist direkt im Browser bearbeitbar: Der gesamte Bereich ist eine contenteditable-Region — klick hinein und ersetze den Blindtext durch deinen eigenen. Eine Formatier-Werkzeugleiste gibt es nicht und braucht es hier auch nicht: Fett, Kursiv und die Hierarchieebenen stecken bereits im Muster-Layout, du tauschst nur den Text darin aus. Klicks auf die Beispiel-Links werden abgefangen, damit dich das Bearbeiten nicht versehentlich aus dem Layout springen lässt. Diese Ansicht zeigt, was ein reines Specimen nicht kann: wie sich die Schrift in echtem Lesefluss, in Mischung aus fett/kursiv und über verschiedene Hierarchieebenen verhält — solange in der Weight / style-Leiste kein Schnitt gewählt ist, denn der gälte für jedes Element und höbe die Mischung auf.

Glyphs

Eine Rastertabelle mit den Glyphen, die in westeuropäischen Texten am häufigsten gebraucht werden. Jede Zelle nennt die HTML-Entity-Nummer und zeigt darunter das gerenderte Zeichen. Abgedeckt sind:

• ASCII (Zeichen 32–126): Buchstaben, Ziffern, Satz- und Sonderzeichen.
• Erweitertes Latein (160–255): Umlaute, akzentuierte Buchstaben, Währungs- und Sonderzeichen wie ©, ®, °, µ, ¿.
• Sonderzeichen: Œ, œ, Ÿ sowie die Akzent-Modifizierer ˆ und ˜.
• Leerzeichen: verschiedene typografische Leerräume (En-/Em-Space, schmales Leerzeichen …).
• Striche: Bindestrich, geschützter Bindestrich, Ziffern-, Halbgeviert- und Geviertstrich (‐ ‑ ‒ – —).
• Anführungszeichen: ‘ ’ ‚ „ “ ” und die französischen ‹ ›.
• Satzzeichen und Symbole: Aufzählungspunkt •, Auslassungszeichen …, Euro €, Trademark ™, gefülltes Quadrat ◼.
• Ligaturen: fi und fl.

Diese Ansicht ist der Praxistest für die Glyph-Abdeckung: Fehlt ein Zeichen in der Schrift, springt der Browser auf eine Ersatzschrift um oder zeigt ein Ersatzglyph — die Zelle fällt dann optisch aus der Reihe. Gerade für deutschsprachige Projekte lohnt der Blick auf ä, ö, ü, ß, das Euro-Zeichen und die typografischen Anführungszeichen.

Compare A / B

Der Vergleichs-Tab stellt Font A und Font B nebeneinander:

• Sample text — ein eigener Mustertext für beide Spalten, voreingestellt „The quick brown fox jumps over the lazy dog — Äpfel, Öl & Übermut 0123456789". Was du eintippst, erscheint sofort in beiden Schriften.
• Size — ein Regler von 10 bis 120 px (Voreinstellung 32 px) für die Größe des Mustertexts.
• Zwei Karten A und B zeigen den Mustertext, jeweils mit dem Namen der Schrift im Kopf. Solange Font B leer ist, steht dort „choose “Font B” above", und die Spalte zeigt die Standardschrift.
• Die Karte Paragraph setzt darunter einen festen Absatz Fließtext in beiden Schriften nebeneinander — hier zeigen sich Grauwert, Laufweite und Lesefluss.

Ein Schnitt aus der Weight / style-Leiste gilt für beide Spalten. Die Schnitt-Buttons richten sich aber nach Font A — fehlt Font B ein Schnitt, zeigt der Browser dort den nächstliegenden vorhandenen oder, bei Fett und Kursiv, einen künstlich erzeugten.

Clamp() Calculator

Ein Rechner für fluide Typografie. Statt für jeden Breakpoint eine feste Schriftgröße zu setzen, liefert eine clamp()-Funktion eine Größe, die zwischen zwei Viewport-Breiten linear mitwächst — oder schrumpft — und außerhalb davon auf dem jeweiligen Grenzwert stehen bleibt. Der Rechner nimmt dir die Mathematik ab.

Eingaben (Karte Target Values):

• Unit — die Einheit der Größen, die du eingibst: px, rem oder em (Voreinstellung rem). em rechnet das Tool wie rem über die Root font size um; den Kontext eines Elternelements kennt es nicht.
• Output unit — die Einheit des Ergebnisses: rem (recommended) oder px. rem-Werte rundet das Tool auf vier, px-Werte auf drei Nachkommastellen.
• Root font size (px) — die Bezugsgröße für die rem-Umrechnung (Voreinstellung 16).
• Size at the min viewport / Size at the max viewport — die Schriftgröße an der kleinsten und an der größten Viewport-Breite (Voreinstellung 1 und 2.5 rem). Ist die zweite Größe kleiner als die erste („smaller = shrinking"), schrumpft die Schrift auf breiteren Bildschirmen.

Eingaben (Karte Viewport Range):

• Min Viewport (px) / Max Viewport (px) — der Bereich, über den interpoliert wird (Voreinstellung 320 und 1440).
• Type Scale Presets füllen die beiden Größen mit einem typischen Stufenwert und stellen die Einheit auf rem: Small (1 → 1.125), Body (1 → 1.25), H4 (1.125 → 1.5), H3 (1.25 → 1.75), H2 (1.5 → 2.25), H1 (2 → 3.5), Display (2.5 → 5).

Ausgaben (Karte Result): der fertige Ausdruck im Feld clamp() Value und die komplette Zeile font-size: …; im Feld CSS Property, beide per Klick kopierbar. Mit den Voreinstellungen ergibt sich:

font-size: clamp(1rem, 0.5714rem + 2.1429vw, 2.5rem);

Als Untergrenze setzt der Rechner immer den kleineren, als Obergrenze den größeren Wert — auch bei schrumpfender Größe, dann mit negativem vw-Anteil (aus 2 → 1 rem wird clamp(1rem, 2.2857rem - 1.4286vw, 2rem)). Sind beide Größen gleich, gibt er schlicht den festen Wert ohne clamp() aus.

Hinweise und Fehler: Unter dem Ergebnis erscheinen Warnungen, wenn

• die größere Größe mehr als das 2,5-Fache der kleineren beträgt — dann erreicht der Text beim Zoomen eventuell keine 200 % (WCAG 1.4.4), weil der vw-Anteil auf Browser-Zoom kaum reagiert;
• die Größe schrumpft („Shrinking size: the text gets smaller on wider screens.").

Bei ungültigen Eingaben steht statt des Ergebnisses eine Fehlermeldung: keine Zahlen („Please enter numbers."), gleiche Viewport-Breiten, ein Min Viewport über dem Max Viewport oder negative Größen.

Live Preview: ein editierbarer Mustertext in Font A, gesetzt in der berechneten Größe. Die Kopfzeile nennt die aktuelle Viewport-Breite und die resultierende Größe in px und rem (Viewport: 1280px | Font size: 36.6px (2.286rem)). Änderst du die Fensterbreite, rechnet die Anzeige mit.

Code Examples: ein Akkordeon mit dem Ergebnis in vier Formen:

• Plain CSS — eine .element-Regel mit font-size.
• CSS Custom Properties — der Wert als --font-size-fluid in :root plus Verwendung über var().
• SCSS function (Dart Sass) — eine Funktion fluid($min-size, $max-size, $min-vw: 320px, $max-vw: 1440px, $root: 16px) mit @use "sass:math";, die aus px-Argumenten einen clamp()-Ausdruck erzeugt, samt Aufruf mit deinen Werten. Die Funktion gibt unabhängig von Output unit immer rem aus und rundet nicht; der Kommentar // → im Beispiel zeigt das Ergebnis des Rechners in der gewählten Ausgabeeinheit.
• Tailwind CSS — eine Arbitrary-Value-Klasse ohne Leerzeichen, z. B. text-[length:clamp(1rem,0.5714rem_+_2.1429vw,2.5rem)]. Der Unterstrich steht für ein Leerzeichen, das Präfix length: sagt Tailwind, dass es sich um eine Größe und nicht um eine Farbe handelt.

Fluid type scale

Unter dem Rechner erzeugt die Karte Fluid type scale eine komplette fluide Typo-Skala. Jede Stufe ist Basis × Verhältnis^Stufe, einmal für den kleinsten und einmal für den größten Viewport berechnet und dazwischen per clamp() interpoliert.

• Base at min viewport (px) / Base at max viewport (px) — die Grundgröße an beiden Enden (Voreinstellung 16 und 18 px).
• Ratio at min viewport / Ratio at max viewport — das Stufenverhältnis an beiden Enden (Voreinstellung 1.2 Minor third und 1.25 Major third). Zur Wahl stehen 1.125 Major second, 1.2 Minor third, 1.25 Major third, 1.333 Perfect fourth, 1.414 Augmented fourth, 1.5 Perfect fifth und 1.618 Golden ratio.
• Viewport-Bereich und Root font size übernimmt die Skala aus dem Rechner darüber; ausgegeben wird immer in rem.

Die Tabelle zeigt die Stufen −2 bis 5 (--step--2 xs, --step--1 sm, --step-0 base, --step-1 lg bis --step-5 4xl), die größte zuerst, jeweils mit Min- und Max-Größe in px, dem clamp()-Wert und einem Muster „Aa" in Font A. Auf schmalen Bildschirmen stapelt sie jede Zeile zu einem beschrifteten Block. Copy CSS kopiert die ganze Skala als Custom Properties:

: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);
    /* … bis --step-5 */
}

Architektur und Datenschutz

Das Tool ist im Kern clientseitig: Schrift-Auswahl, Installiert-Prüfung, lokale Dateien, Vorschau, Glyph-Tabelle, Vergleich, clamp()-Rechner und Typo-Skala laufen vollständig in deinem Browser. Es gibt kein Konto, keine Speicherung und keinen Verlauf — nach einem Neuladen startet das Tool leer.

• Die Google-Fonts-Liste holt der Server des Tools über die Google-Fonts-Developer-API und speichert die Antwort für 30 Tage zwischen. Schlägt eine Aktualisierung fehl, bleibt die bisherige Liste in Gebrauch. Dein Browser lädt nur eine schlanke Fassung (Familie, Kategorie, Schnitte) vom Tool selbst; das Durchsuchen erzeugt also keinen Request an Google.
• Die Schriftdateien einer Google-Schrift lädt dein Browser beim Auswählen dagegen direkt von Google (fonts.googleapis.com → fonts.gstatic.com). Google erhält dabei deine IP-Adresse — exakt der Mechanismus, der das ungehostete Einbinden von Google Fonts auf Produktionsseiten DSGVO-relevant macht. Für eine Vorschau ist das unkritisch; für den Live-Betrieb bleibt die Empfehlung, Web-Fonts selbst zu hosten.
• Stylesheet-URLs ruft dein Browser ebenso direkt ab — der jeweilige Anbieter erhält einen Request mit deiner IP.
• Lokale Font-Dateien liest der Browser über die FontFace-API ein. Sie werden nicht hochgeladen und gelangen weder zum Tool noch zu Dritten.

Damit beliebige Stylesheets und ihre Schriftdateien überhaupt geladen werden dürfen, lockert das Tool seine Content-Security-Policy gezielt: Style- und Font-Quellen sind über HTTPS erlaubt. Skripte führt eingebundenes CSS dabei nicht aus.

Zusätzliches

Am Seitenende verlinkt das Tool den externen Font-Editor Glyphr Studio („Start Glyphr Studio font editor…") — nützlich, wenn du nach dem Testen eine Schrift nicht nur ansehen, sondern bearbeiten oder selbst zeichnen willst.

Für den Einstieg und das große Bild siehe die Übersichtsseite. Konkrete Arbeitsabläufe zeigen die Beispiele, gesammelte Kniffe die Tipps & Tricks. Ausprobieren kannst du alles direkt im Tool.