Denis Potschien 14. Juli 2015

webfont|test: Schriftauswahl leicht gemacht

Die Zeiten, in denen man aus einer Handvoll Systemschriften für die typografische Gestaltung einer Website auswählen konnte, sind glücklicherweise vorbei. Alle modernen Browser unterstützen Webfonts und die Auswahl an Anbietern reicht von kostenpflichtig bis kostenlos. Aber je größer die Auswahl ist, desto schwieriger wird es oft, die richtige Schrift für ein Webprojekt zu finden. Der „webfont|test“ hilft bei der Auswahl geeigneter Schriften, stellt diese zum Vergleich nebeneinander und ermöglicht auch das Hochladen eigener Schriftdateien.

webfonttest-teaser_DE

Google Webfonts und eigene Schriften vergleichen

Der „webfont|test“ erlaubt es, bis zu drei Schriften auszuwählen und diese nebeneinander darzustellen. Neben den Schriften von Google Fonts können auch eigene Schriftdateien hochgeladen werden. Dabei muss es sich nicht um Webfonts handeln, auch OpenType-Schriften sind beispielsweise möglich. Zusätzlich hat man Zugriff auf alle Systemschriften. Dazu muss ins Suchfeld der jeweilige Name der Schrift eingegeben werden.

webfont-test_auswahl
Auswahl oder Direkteingabe oder Dropdown-Liste

Aus Googles Schriften wählt man per Dropdown-Liste oder per Direkteingabe ins Suchfeld. Zwar hat man in der Liste keine Vorschau, dafür aber zu jeder Schrift eine Info zur Klasse („serif“, „sans-serif“, „monospace“, „display“ und „handwriting“) sowie zur Anzahl der vorhandenen Schnitte.

Alle ausgewählten Schriften werden in verschiedenen Größen – von 42 bis 10 Pixel Größe – nebeneinander präsentiert. So erhält man zu jeder Schrift einen guten Eindruck, etwa wie Überschriften und Fließtexte aussehen und wirken. Leider ist es nicht möglich, eigene Schriftgrößen anzugeben. Zwischen den Schnitten einer Schrift kann man zudem bequem per Dropdown-Liste wechseln. Falls eine Schrift also mal zu dünn oder fett ausfällt, lässt sich schnell ein anderer Schnitt – insoweit vorhanden – auswählen.

webfont-test_vergleich
Übersichtliche Darstellung der Schriften nebeneinander

Hilfslinien für besseren Vergleich einblenden

Gerade wenn man unterschiedliche Schriften miteinander mischen will, sollte man darauf achten, dass die x-Höhe, Ober- und Unterlängen sowie die Höhe der Großbuchstaben identisch sind oder zumindest nicht allzu sehr abweichen. Daher stellt der „webfont|test“ Hilfslinien zur Verfügung, die alle einzeln eingeblendet werden können.

webfont-test_hilfslinien
Verschiedene Hilfslinien helfen beim Vergleichen

Für alle relevanten und zuvor erwähnten Größen gibt es eine entsprechende Hilfslinie, die bei Bedarf verschoben werden kann. So lassen sich die unterschiedlichen Größen von Schriften sehr schön miteinander vergleichen.

Mit eigenem Text arbeiten

Der „webfont|test“ nutzt den bekannten Blindtext „Lorem ipsum“ zur Darstellung der Schriften. Wer lieber mit eigenen Texten arbeiten möchte, kann diesen für alle dargestellten Schriftgrößen eingeben. Wird der Text in einer Schrift geändert, wird er automatisch auch in den anderen zum Vergleich dargestellten Schriften angepasst. So hat man in jedem Fall bei allen Schriften immer identischen Text. Das ist ebenfalls dann hilfreich, wenn man den unterschiedlichen Platzverbrauch der Schriften miteinander vergleichen möchte.

webfont-test_eigenertext
Einfach eigenen Text eingeben und damit testen

Fazit und Link zum Beitrag

Der „webfont|test“ ist ein durchaus nützliches Werkzeug, um Schriften miteinander zu vergleichen. Auf GitHub kann man sich zudem die Quelldateien herunterladen und sich so seinen eigenen Webfont-Tester erstellen.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zur Protokollierung der Anmeldung, dem Einsatz von MailChimp als Versanddienstleister und zu den Widerrufsrechten findest Du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.