Kostenlose Schriftarten-Vorschau & Tester

Was dieses Werkzeug tut

Ein Schriftvorschau-Werkzeug rendert dieselbe Zeichenfolge gleichzeitig in vielen Schriftarten, damit du sie nebeneinander vergleichen kannst, ohne dich auf eine festzulegen. Tippe deinen Text einmal oben ein (den Projektnamen, die Überschrift, an der du gerade schreibst, das Marken-Wordmark, das du auswählst) und jede Schrift in der Galerie zeigt dieselbe Zeichenfolge in ihrem eigenen Schriftbild. Passe Größe, Farbe und Hintergrund an, um zu testen, wie der Vergleich in der Größe und im Kontrast wirkt, in denen er tatsächlich in Produktion erscheinen wird. Klicke auf eine beliebige Schrift, um ihre CSS-font-family-Deklaration zu kopieren. Die klassische typografische Vergleichszeichenfolge „The quick brown fox jumps over the lazy dog“ ist ein Pangramm (jeder Buchstabe des englischen Alphabets erscheint mindestens einmal), nützlich, weil sie in einem einzigen kurzen Satz jede Glyphe übt, die die Schrift zu bieten hat.

Web-sichere Schriften

„Web-sichere Schriften“ ist ein Begriff aus den frühen bis mittleren 2000ern, als CSS-Webfonts (@font-face) noch nicht zuverlässig unterstützt wurden. Die Gruppe bezog sich auf Schriftarten, die im Wesentlichen auf jedem Endkunden-Betriebssystem vorinstalliert ausgeliefert wurden, sodass ein Designer sie mit der Gewissheit angeben konnte, dass der Browser des Nutzers sie lokal hätte. Die klassische Liste web-sicherer Schriften: Arial, Helvetica, Times New Roman, Times, Georgia, Verdana, Tahoma, Trebuchet MS, Courier New, Courier, Lucida Console, Palatino, Garamond, Bookman, Comic Sans MS, Impact, Arial Black. Jede hat ihre Geschichte, Arial war Monotypes Antwort auf Microsofts Lizenz-Druck, einen Helvetica-Ersatz zu finden; Verdana und Georgia wurden 1996 von Microsoft bei Matthew Carter speziell für die Bildschirm-Lesbarkeit bei den damaligen Auflösungen in Auftrag gegeben; Tahoma ist Verdanas engere Schwester. Die Web-Safe-Konvention hielt sich noch lange, nachdem @font-face zuverlässig wurde (Internet Explorer unterstützte es ab Version 4 von 1997, aber Firefox 3.5 von 2009 und Safari 3.1 von 2008 machten es browserübergreifend praxistauglich), weil Designer das latenzfreie Rendern schätzen und wissen, dass eigene Schriften Netzwerk-Roundtrips kosten. Die aktuelle Best Practice ist ein „System-Font-Stack“ (Apple -apple-system, dann BlinkMacSystemFont, dann Segoe UI, dann Roboto, dann sans-serif), der ohne Download die native UI-Schrift des Betriebssystems des Nutzers wählt, schnell und plattform-typisch zugleich.

Google Fonts und die Ära des Web-Font-Hostings

Google Fonts startete im Mai 2010 als kostenlose CDN-gehostete Bibliothek quelloffener Schriftarten. Der ursprüngliche Start umfasste 18 Schriften; bis 2026 zählt der Katalog über 1.500 Familien, alle unter SIL Open Font License oder ähnlichen permissiven Lizenzen. Open Sans (Steve Matteson, 2010), Roboto (Christian Robertson, 2011), Lato (Łukasz Dziedzic, 2010), Montserrat (Julieta Ulanovsky, 2011), Source Sans Pro (Paul Hunt für Adobe, 2012), Inter (Rasmus Andersson, 2016), Poppins (Indian Type Foundry, 2014), Nunito (Vernon Adams, 2011), diese gehören zu den meistgenutzten Schriftarten im modernen Web, alle kostenlos über Google Fonts erhältlich. Der Lade-Mechanismus des Katalogs entwickelte sich über die Jahre: der ursprüngliche Start 2010 nutzte <link>-Tags zu einem Google-CSS-Endpunkt; ab 2018 wurde der display=swap-Parameter zur Steuerung des FOUT/FOIT-Verhaltens betont; die Google-Fonts-API v2 von 2022 rendert Subsets vor für bessere Performance; auf datenschutzbewussten Seiten werden die Fonts oft selbst gehostet, um die Datenschutz- und DSGVO-Bedenken des Google-CDN zu vermeiden (ein deutsches Gerichtsurteil von 2022 stellte ausdrücklich fest, dass das Laden von Google Fonts von Googles Servern ohne Einwilligung des Nutzers gegen die DSGVO verstößt). Adobe Fonts (früher Typekit, 2011 übernommen), Fontshare (kostenlose Schriften der Indian Type Foundry, 2021), Bunny Fonts (datenschutzfreundlicher Google-Fonts-Spiegel, 2021) sind die wichtigsten Alternativen.

Schriftkategorien

• Serifenschriften haben kleine ausragende Striche (Serifen) an den Enden der Buchstabenformen. Alt-Antiqua-Serifen (Garamond, Caslon, Goudy, Sabon) stammen aus dem 16. Jahrhundert und haben geringen Kontrast zwischen dicken und dünnen Strichen. Übergangs-Antiqua-Serifen (Baskerville, Times New Roman) entstanden im 18. Jahrhundert mit höherem Kontrast. Klassizistische Serifen (Bodoni, Didot) treiben den Kontrast auf die Spitze. Slab-Serifen (Rockwell, Roboto Slab, Courier) haben schwere rechteckige Serifen. Für Web-Fließtext lesen sich bildschirmoptimierte Serifenschriften wie Georgia (Matthew Carter für Microsoft, 1996), Merriweather (Sorkin Type, 2010), Lora (Cyreal, 2011) und PT Serif (Paratype, 2009) besser als druckabgeleitete Schnitte wie Times New Roman.
• Serifenlose Schriften haben keine Serifen. Geometrische Grotesk (Futura, Avenir, Avant Garde) ist aus klaren geometrischen Formen aufgebaut. Humanistische Grotesk (Gill Sans, Frutiger, Open Sans, Source Sans Pro) übernimmt Proportionen aus römischen Buchstaben und ist in der Regel am besten für Fließtext lesbar. Grotesk im engeren Sinn (Helvetica, Arial, Akzidenz-Grotesk) sind die industriellen Arbeitspferde des 19. und 20. Jahrhunderts. Neo-Grotesk (Inter, Roboto, San Francisco, Segoe UI) sind die modernen UI-Standards der großen Betriebssysteme und Designsysteme. Serifenlose dominieren den Web-Fließtext, weil sie auch bei kleineren Pixelgrößen lesbar bleiben.
• Festbreitenschriften weisen jedem Zeichen die gleiche Breite zu, ursprünglich für Schreibmaschinen und frühe Computerterminals entworfen, bei denen jedes Zeichen eine feste Zelle belegte. Unverzichtbar für Code-Editoren, Terminals, technische Dokumentation und alle Kontexte, in denen Ausrichtung wichtig ist. Moderne Programmier-Schriften (JetBrains Mono, Fira Code, Cascadia Code, IBM Plex Mono, Inconsolata, Source Code Pro) enthalten Programmier-Ligaturen (=> → ⇒, != → ≠) und sind für die Lesbarkeit über lange Sitzungen hinweg ausgelegt. Apples SF Mono und Microsofts Cascadia Code werden mit den jeweiligen Entwickler-Tools ausgeliefert.
• Display-Schriften sind ausschließlich für die Verwendung in großer Schriftgröße entworfen, Schlagzeilen, Plakate, Marken-Wordmarks, Hero-Texte auf Splash-Pages. Impact, Bebas Neue, Anton, Oswald, Playfair Display (die kontraststarke moderne Serife), Abril Fatface, alle lesen sich in Fließtextgrößen schlecht, ziehen aber in Überschriftengrößen die Aufmerksamkeit auf sich. Eine Display-Überschriftenschrift mit einer sauberen Fließtextschrift zu kombinieren ist das häufigste typografische Muster auf modernen Webseiten.
• Handschriften und Schreibschriften imitieren handgeschriebene Stile. Sparsam nützlich für persönliches Branding oder Einladungs-Look; in Fließtextgrößen kaum lesbar; sollten verwendet werden wie Großbuchstaben (kurz, gezielt).

Variable Schriften, die leise Revolution der Moderne

Die OpenType Font Variations-Spezifikation (Apples TrueType GX Variations von 1994 + Adobes Beiträge, gemeinsam standardisiert als OpenType 1.8 im September 2016) erlaubt es einer einzigen Schriftdatei, eine unendliche Familie verwandter Variationen zu beschreiben. Wo eine herkömmliche Familie separate Schriftdateien für Light, Regular, Medium, Bold, Black plus deren Kursive ausliefert (sechs bis zehn Dateien zu je 50-200 KB) liefert eine variable Schrift eine Datei aus, die alle dieselben Designs als kontinuierliche Variationen entlang von Achsen (Strichstärke, Breite, Neigung, optische Größe und beliebige eigene Achsen, die der Schriftgestalter definiert) enthält. Browser-Unterstützung kam in Chrome 62 (Oktober 2017), Firefox 62 (September 2018), Safari 11.0 / 11.1 (2017-2018) und Edge mit Chromium (2020). Zu den großen Veröffentlichungen variabler Schriften gehören Roboto Flex (Christian Robertson + Font Bureau, Oktober 2022) mit 13 Achsen; Recursive (Stephen Nixon, 2019); Inter (Rasmus Andersson) mit Strichstärke- und Neigungsachse; und die meisten großen Schriftfamilien liefern inzwischen variable Versionen neben den klassischen statischen Dateien aus. Die Bandbreitenersparnis ist drastisch: eine variable Schriftdatei von 200 KB ersetzt acht statische Dateien zu je 100 KB und bietet dabei mehr Gestaltungs-Flexibilität.

Schrift-Laden und das FOUT/FOIT-Problem

Wenn ein Browser eine eigene Schriftdatei abruft, was zeigt er in der Zwischenzeit? Zwei extreme Strategien. FOIT (Flash of Invisible Text), überhaupt keinen Text rendern, bis die Schrift eintrifft, dann den Text plötzlich anzeigen. Die Seite wirkt kaputt, bis die Schrift geladen ist. FOUT (Flash of Unstyled Text), den Text sofort in einer Fallback-Schrift rendern, dann zur eigenen Schrift wechseln, wenn sie eintrifft. Die Seite ist von der ersten Frame an lesbar, der Wechsel ist aber visuell ruckartig. Die CSS-Eigenschaft font-display (eingeführt in CSS Fonts Module Level 4) gibt Entwicklern Kontrolle: auto (Browser-Standard, meist FOIT-orientiert), block (volles FOIT), swap (volles FOUT, die dominierende moderne Best Practice), fallback (kurzer unsichtbarer Block, dann Wechsel, mit einem „guten genug“-Fallback nach einigen Sekunden), optional (die eigene Schrift komplett überspringen, wenn sie nicht schnell genug lädt). Für Core Web Vitals und Lighthouse-Werte 2026 ist font-display: swap die Standardempfehlung, kombiniert mit preload-Hinweisen für kritische Schriften und einer sorgfältig gewählten Fallback-Schrift, die metrisch der eigenen Schrift ähnlich ist (damit das Layout beim Wechsel nicht reflowt, die neue Eigenschaft size-adjust in CSS Fonts Module Level 5 stimmt das fein ab).

Schriften für den jeweiligen Zweck wählen

• UI-Fließtext: System-Font-Stack zuerst (Apple SF, Segoe UI, Roboto, folgt dem OS des Nutzers) für Null-Latenz und plattform-passenden Look. Wenn aus Markengründen eine eigene Schrift nötig ist, wähle eine humanistische Grotesk (Inter, Open Sans, Source Sans Pro) ab 16 px.
• Lange Lektüre (Artikel, Blogs): bildschirmoptimierte Serife (Georgia, Merriweather, Lora) bei 18-22 px mit großzügiger Zeilenhöhe (1,6-1,8). Serifen unterstützen die Augenführung über lange Textzeilen.
• Marken-Wordmark: eine markante Display-Schrift, die nur in einer großen Größe verwendet wird. Mit einer neutraleren Fließtextschrift kombinieren. In eine eigene oder beauftragte Schrift hier zu investieren lohnt sich, es ist die sichtbarste typografische Einzelentscheidung der Marke.
• Code-Blöcke: eine dedizierte Programmier-Schrift (JetBrains Mono, Fira Code, Cascadia Code) bei 14-15 px. Programmier-Ligaturen sind Geschmackssache; viele Entwickler lieben sie, manche finden sie verwirrend.
• Zahlentabellen: eine Schrift mit Tabellenziffern (die Ziffer 1 belegt dieselbe Breite wie 2, 3 usw.), damit Zahlenspalten ohne manuelles Padding ausgerichtet werden. Die meisten modernen Schriften bieten Tabellenziffern über die Eigenschaft font-variant-numeric: tabular-nums an.
• Nur dekorative Verwendung: Handschriften, Schreibschriften, Retro-Display-Schriften. Kurz und gezielt einsetzen; nie für Fließtext.

Häufig gestellte Fragen

Was ist der Unterschied zwischen web-sicheren und benutzerdefinierten Schriften?

Web-sichere Schriften sind auf den Geräten der Nutzer vorinstalliert, sodass sie sofort und ohne Netzwerkabfrage gerendert werden. Eigene Schriften (Google Fonts, Adobe Fonts, selbst gehostetes @font-face) müssen heruntergeladen werden, was Latenz hinzufügt, aber visuelle Vielfalt jenseits des OS-Sets bietet. Die meisten modernen Webseiten nutzen eine Mischung: eine eigene Schrift als primäre, web-sichere Schriften als Fallbacks im font-family-Stack und einen System-Font-Stack (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) für UI-Elemente, bei denen ein plattformnatives Aussehen bevorzugt wird.

Wie verwende ich eine Google-Schrift auf meiner Website?

Zwei Wege. CDN-gehostet: füge ein <link>-Tag zu fonts.googleapis.com in deinen HTML-<head> ein, dann referenziere die Schrift in CSS via font-family: 'Inter', sans-serif. Selbst gehostet: lade die WOFF2-Dateien von Google Fonts herunter, hoste sie auf deiner eigenen Domain und deklariere sie mit @font-face. Selbst-Hosting ist in datenschutzsensiblen Kontexten vorzuziehen (ein deutsches Gericht entschied 2022, dass das Laden von Google Fonts vom Google-CDN ohne Einwilligung gegen die DSGVO verstößt). Füge font-display: swap hinzu, um das Ladeverhalten zu steuern, und preloade kritische Schriften für die Performance.

Welche Serifen-Schrift eignet sich gut für Fließtext?

Georgia (Matthew Carter, 1996 von Microsoft speziell für die Bildschirm-Wiedergabe in Auftrag gegeben) bleibt eine ausgezeichnete Wahl und ist auf jedem Endkunden-Betriebssystem vorinstalliert. Aus Google Fonts: Merriweather (Sorkin Type, 2010), Lora (Cyreal, 2011), PT Serif (Paratype, 2009), Source Serif Pro (Frank Grießhammer für Adobe, 2014). Vermeide Times New Roman für Web-Fließtext, für den Zeitungsdruck in kleinen Größen entworfen, liest sie sich auf Bildschirmen eng und altmodisch. Für moderne, kontraststarke Serifen-Überschriften funktioniert Playfair Display wunderbar (vermeide es im Fließtext, zu hoher Kontrast bei kleinen Größen).

Funktioniert dieses Vorschau-Werkzeug offline?

Die web-sicheren Schriften (Arial, Georgia, Verdana usw.) funktionieren offline, weil sie aus deinem Betriebssystem geladen werden. Die Google Fonts in der Galerie benötigen einen einmaligen Netzwerk-Abruf vom Google-CDN, um zu rendern, einmal geladen sind sie gecached und die Vorschau funktioniert anschließend auch offline. Schalte die Seite nach dem ersten Laden offline (Flugmodus), um es zu prüfen; die vom OS installierten Schriften rendern weiter, die Google Fonts nutzen, was im Cache war.

Verwandte Tools