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 drei Quellen lädst, wie du Gewicht und Schnitt wählst, was jeder der vier Vorschau-Tabs zeigt und wie der clamp()-Rechner 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: Schrift wählen, anzeigen, Schnitt setzen

Der Grundablauf ist immer gleich:

1. Eine Schrift aus einer der drei Quellen wählen (Base Fonts, Google Fonts oder Custom CSS File). Jede Auswahl setzt intern den Modus und leert die jeweils anderen Felder — es ist also immer genau eine Quelle aktiv.
2. Auf den Button Display Font klicken. Erst dieser Klick wendet die Schrift auf die Vorschau an. Eine kurze Toast-Meldung bestätigt das geladene Schriftbild („Font … loaded").
3. In der Weight / Style-Leiste einen Schnitt wählen — von 100 bis 900, jeweils normal oder kursiv.
4. Durch die Vorschau-Tabs blättern (Specimen, Editable Sample Layout, Glyphs, Clamp() Calculator).

Base Fonts

Das Dropdown Base Fonts („Choose a base font family…") listet rund 40 System- und Web-Safe-Familien, alphabetisch sortiert. Darunter sind die generischen Gruppen (sans-serif, serif, monospace, cursive), klassische web-sichere Schriften (Arial, Helvetica, Helvetica Neue, Times New Roman, Times, Courier New, Georgia, Verdana, Tahoma, Trebuchet MS, Comic Sans MS, Impact, Arial Black, Palatino, Garamond, Book Antiqua, Lucida-Varianten, Consolas, Menlo, Monaco …) und moderne System-UI-Stacks (-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell). Diese Schriften lädt nichts nach — sie sind das, was auf Geräten ohnehin vorhanden ist. Das macht sie zum schnellen Bezugspunkt: So sieht dein Text ohne jeden Web-Font-Download aus.

Google Fonts

Das Dropdown Google Fonts („Choose from Google Fonts…") enthält über tausend Schriften aus der Google-Fonts-Bibliothek, jeweils als „Family (Version)" aufgeführt. Die Liste selbst wird serverseitig über die Google-Fonts-API geholt und für 30 Tage zwischengespeichert — die Auswahl im Dropdown verursacht also keinen Google-Request. Erst wenn du eine Schrift mit Display Font anzeigst, lädt deine Vorschau das zugehörige Stylesheet und die Schriftdateien direkt von Google (siehe Architektur & Datenschutz).

Eine Google-Auswahl hat zwei Besonderheiten: Du musst keine URL eintippen — die Stylesheet-Adresse baut das Tool aus den hinterlegten Daten der Schrift. Und die Weight / Style-Leiste schaltet automatisch nur die Schnitte frei, die diese Schrift wirklich mitbringt — gesperrte Buttons zeigen dir damit auf einen Blick, welche Gewichte fehlen.

Custom CSS File

Mit Custom CSS File testest du eine eigene Web-Font. Wichtig: Das ist kein Datei-Upload. Du fügst in das Feld die URL eines bereits gehosteten Stylesheets ein — eine Google-CSS-URL, ein Adobe-Typekit-Link, eine Bunny-Fonts-URL oder das @font-face-Stylesheet deines eigenen CDNs. In das zweite Feld Font Family Name trägst du den Familiennamen ein (z. B. „Droid Sans"), damit das Tool weiß, welche font-family es nach dem Laden anwenden soll. Mit Display Font wird das Stylesheet als <link rel="stylesheet"> eingebunden und die genannte Familie auf die Vorschau gesetzt. Wie bei den Base Fonts sind hier alle Gewichts-Buttons aktiv — fehlende Schnitte synthetisiert der Browser bei Bedarf.

Hinweis zu „custom font files": Die Marketing-Zeile des Tools spricht von „custom font files". Praktisch lädst du keine lokale .woff2/.ttf-Datei hoch, sondern verweist auf ein Stylesheet, das die Schrift bereits per @font-face einbindet. Liegt deine Schrift nur als lokale Datei vor, musst du sie also zuerst irgendwo erreichbar machen (eigenes CDN, Hosting) und ihre CSS-URL hier eintragen.

Weight / Style — die Schnitt-Auswahl

Die Weight / Style-Leiste bietet 18 Schalter: die Gewichte 100, 200, 300, 400, 500, 600, 700, 800, 900 — jedes davon einmal normal und einmal kursiv (das Gewicht 400 erscheint als „regular", der kursive Standardschnitt als „italic"). 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 gewählten Schrift aktiv; die übrigen sind ausgegraut.
• Bei Base Fonts und Custom CSS File sind alle Schnitte aktiv — ob ein Schnitt echt vorhanden ist oder vom Browser synthetisiert wird, hängt von der Schrift ab.

Ein Klick auf einen Schnitt setzt font-weight und font-style auf alle Vorschau-Elemente. So vergleichst du dieselbe Schrift bequem über ihre Schnitte hinweg.

Die Vorschau-Tabs im Detail

Specimen

Das klassische Schriftmuster. Oben prangt „AaBbCc" in 72 px, 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 über einen eingebauten Inline-Editor (TinyMCE 8) direkt bearbeitbar — du kannst Texte austauschen, formatieren und so dein eigenes Layout simulieren. 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.

Glyphs

Eine Rastertabelle aller Glyphen der Schrift. 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, bleibt seine Zelle leer oder zeigt ein Ersatzglyph. Gerade für deutschsprachige Projekte lohnt der Blick auf ä, ö, ü, ß, das Euro-Zeichen und die typografischen Anführungszeichen.

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 einem Minimal- und einem Maximalwert linear mit der Viewport-Breite mitwächst. Der Rechner nimmt dir die Mathematik ab.

Eingaben:

• Unit — die Einheit der Zielwerte: px, rem oder em (Voreinstellung rem).
• Base Font Size (px) — die Bezugsgröße für die rem-Umrechnung (Voreinstellung 16).
• Min Value / Max Value — die kleinste und größte gewünschte Schriftgröße (Voreinstellung 1 und 2.75 rem).
• Min Viewport (px) / Max Viewport (px) — der Viewport-Bereich, über den interpoliert wird (Voreinstellung 320 und 1440).

Type Scale Presets füllen Min/Max mit einem typischen Stufenwert (alle in 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: ein fertiger clamp(min, intercept + slopevw, max)-Ausdruck und die komplette font-size: …;-Zeile, beide kopierbar und editierbar. Eine Live-Preview zeigt den Text in der berechneten Größe und blendet die aktuelle Viewport-Breite samt resultierender px-/rem-Größe ein — verkleinerst du das Fenster, siehst du die Schrift in Echtzeit mitwachsen. Ein Code-Examples-Akkordeon liefert denselben Wert in vier Formen: Plain CSS, CSS Custom Properties (--font-size-fluid), ein SCSS-fluid-type-Mixin und eine Tailwind-Arbitrary-Value-Klasse (text-[clamp(...)]).

Architektur und Datenschutz

Das Tool ist im Kern clientseitig: Schrift-Auswahl, Vorschau, Glyph-Tabelle und der clamp()-Rechner laufen vollständig in deinem Browser. Zwei Punkte sind für den Datenschutz relevant:

• Die Google-Fonts-Liste wird serverseitig über die Google-Fonts-API geholt und für 30 Tage zwischengespeichert. Das Befüllen des Dropdowns erzeugt also keinen Google-Request aus deinem Browser.
• Die Schriftdateien dagegen lädt dein Browser beim Anzeigen 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.
• Eigene CSS-URLs (Custom CSS File) werden ebenso direkt aus deinem Browser geladen — der jeweilige Drittanbieter erhält einen Request mit deiner IP.

Damit eigene Stylesheets und Schriftdateien überhaupt geladen werden dürfen, lockert das Tool seine Content-Security-Policy gezielt für Style- und Font-Quellen über HTTPS. 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.