Fonts

Schriften ausprobieren, bevor du dich festlegst

Der Fonts-Tester beantwortet eine Frage, die sich bei jedem Projekt stellt: Wie sieht diese Schrift in meinem Text wirklich aus — in allen Größen, in allen Schnitten, mit allen Zeichen, die ich brauche? Statt eine Schrift erst einzubauen und dann zu merken, dass die Ziffern unruhig sind oder das Eszett fehlt, prüfst du das vorher: live im Browser, an deinem eigenen Beispieltext.

Du wählst eine Schrift aus vier Quellen — fast 2000 Google Fonts, den System-Fonts deines Geräts, einer lokalen Font-Datei oder einem beliebigen Stylesheet per HTTPS-URL —, und die Vorschau stellt sie sofort dar. Fünf Ansichten zeigen die Schrift aus verschiedenen Blickwinkeln: ein klassisches Schriftmuster über alle Größen, ein editierbares Magazin-Layout, eine Glyph-Tabelle, ein direkter Vergleich zweier Schriften nebeneinander und ein Rechner für fluide Schriftgrößen samt Typo-Skala.

Gedacht ist das Tool für alle, die mit Typografie arbeiten: Designerinnen und Designer, die Schriftpaare und Schnitte vergleichen wollen; Entwicklerinnen und Entwickler, die vor dem Einbinden die Glyph-Abdeckung und die verfügbaren Gewichte prüfen; und alle, die für ein responsives Layout eine saubere clamp()-Schriftgröße brauchen. Alles läuft im Browser, ohne Account und ohne Installation.

Vier Wege zu einer Schrift

Die Oberfläche ist auf Englisch — die Bedienelemente werden hier deshalb mit ihrem Original-Label genannt. Die Quellen liegen in der Karte Font Selection als Reiter nebeneinander:

Google Fonts — eine durchsuchbare Liste der kompletten Google-Fonts-Bibliothek mit Filter nach Category (Sans serif, Serif, Display, Handwriting, Monospace). Jeder Eintrag nennt Kategorie und Zahl der Schnitte; ein Klick lädt die Schrift mit genau den Gewichten und Schnitten, die sie tatsächlich mitbringt.
System — eine Auswahl aus 51 Einträgen: neun generische Familien (sans-serif, serif, monospace, system-ui …) und gängige Systemschriften wie Arial, Georgia, Segoe UI, Calibri, Helvetica, Menlo oder Ubuntu. Das Tool prüft, ob die Schrift auf deinem Gerät installiert ist, und markiert fehlende mit „not installed".
Font file — du ziehst TTF-, OTF-, WOFF- oder WOFF2-Dateien in die Drop-Zone oder wählst sie per Choose files. Die Dateien bleiben in deinem Browser, nichts wird hochgeladen.
Stylesheet URL — die HTTPS-Adresse eines @font-face-Stylesheets (Adobe Fonts/Typekit, Bunny Fonts, Fontshare, eigenes CDN). Erlaubt der Server es per CORS, liest das Tool die enthaltenen Familiennamen selbst aus.

Mit dem Schalter Font A / Font B (compare) bestimmst du, wohin die nächste Auswahl geht: Font A erscheint in allen Vorschauen, Font B zusätzlich im Vergleich. Über die Weight / style-Leiste wählst du einen Schnitt von 100 bis 900, jeweils normal oder kursiv. Wie Quellen, Slots, Schnitt-Auswahl und jede Vorschau im Detail funktionieren, steht im Manual.

Fünf Ansichten derselben Schrift

Specimen — das klassische Schriftmuster: groß der Name der gewählten Schrift (vor der Auswahl „AaBbCc"), das komplette Alphabet mit Ziffern und Satzzeichen sowie eine Tabelle desselben Textes in 20 Größen von 8 bis 96 px. Jede Zeile ist editierbar, du kannst also deinen eigenen Text eintippen.
Editable Sample Layout — ein vollständiges Magazin-Layout aus Überschriften, Fließtext, Zitat, einer Liste und einer Info-Karte, gerendert in der gewählten Schrift und direkt im Browser bearbeitbar. So beurteilst du die Schrift im realistischen Lesekontext, nicht nur an einem Musteralphabet.
Glyphs — eine Tabelle der Glyphen von ASCII über die erweiterten lateinischen Zeichen bis zu Sonderzeichen, Strichen, Anführungszeichen und Ligaturen. Hier siehst du auf einen Blick, ob eine Schrift die Umlaute, das Euro-Zeichen oder die Ziffern hat, die dein Projekt braucht.
Compare A / B — Font A und Font B nebeneinander: ein eigener Mustertext mit Größenregler (10 bis 120 px) und ein Absatz Fließtext in beiden Schriften. Damit entscheidest du zwischen zwei Kandidaten, ohne hin und her zu laden.
Clamp() Calculator — ein Rechner für fluide Typografie: Du gibst die Größe am kleinsten und am größten Viewport ein und bekommst eine fertige clamp()-Zeile in rem oder px, die zwischen beiden Bildschirmbreiten interpoliert — wachsend oder schrumpfend, mit Hinweis, wenn die Spanne den Browser-Zoom nach WCAG ausbremst, und mit Code für CSS, Custom Properties, SCSS (Dart Sass) und Tailwind. Darunter erzeugt eine Fluid type scale eine komplette fluide Typo-Skala als CSS-Variablen.

Wo die Schriften herkommen — und was das für den Datenschutz heißt

Das Tool läuft im Browser, aber zwei Punkte sind für den Datenschutz wichtig:

Google Fonts werden live von Google geladen. Sobald du eine Google-Schrift auswählst, lädt dein Browser deren Stylesheet und Schriftdateien direkt von Googles Servern (fonts.googleapis.com und fonts.gstatic.com). Google sieht dabei deine IP-Adresse — derselbe Vorgang, der das direkte Einbinden von Google Fonts auf Websites DSGVO-relevant macht. Das Tool weist im Google-Reiter selbst darauf hin. Für eine schnelle Vorschau ist das unkritisch; für die Produktion gilt die übliche Empfehlung, Web-Fonts selbst zu hosten.
Stylesheet-URLs gehen an ihren Anbieter. Eine im Reiter Stylesheet URL geladene Adresse ruft dein Browser ebenfalls direkt ab — der jeweilige Anbieter (Adobe, Bunny, dein CDN) erhält also einen Request.

Die Liste der Google Fonts bereitet der Server vor und speichert sie zwischen; das Durchsuchen der Liste erzeugt keinen Request an Google. Lokale Font-Dateien verlassen deinen Rechner gar nicht. Details dazu stehen im Manual.

Jetzt ausprobieren

→ Fonts öffnen — Schrift suchen, anklicken, durch die fünf Tabs blättern. Ohne Account, kostenlos, direkt im Browser.

Schriften ausprobieren, bevor du dich festlegst

Vier Wege zu einer Schrift

Fünf Ansichten derselben Schrift

Wo die Schriften herkommen — und was das für den Datenschutz heißt

Jetzt ausprobieren

Verwandte JPKCom-Tools