Helper13-teaser

Kleine Helfer No.13: Typetester

Kommentare 0
Blog

Der Typetester ist ein kleiner Helfer, den ich schon länger in meinen Bookmarks gespeichert habe. Das Tool umfasst über 2200 Schriften die live miteinander verglichen werden können. Es werden neben den sogenannten „Web Safe Fonts“ (also den typischen Systemschriften wie Arial, Verdana, etc.) auch alle Web Schriften von Google Fonts und Adobe Typekit angeboten.

typetester

Bevor ich auf die Features von Typetester näher eingehe, möchte ich kurz auf die generelle Verwendung von Webfonts eingehen. Entwickler geben immer wieder zu Bedenken das die Einbindung externer Schriften einiges an Problemen mit sich bringt. Neben der unzureichenden Qualität einiger Schriften wird vor allem die zusätzliche Ladezeit angeführt. Tatsächlich ist es so, das sich das Schriftbild bis die Webfont geladen ist durch eine Systemschrift darstellt. Die sogenannte Fallback-Schrift darf also bei der gestalterischen Umsetzung nicht ausser Acht gelassen werden. Ganz im Gegenteil sogar! Es muss gewährleistet werden, das die Fallback-Schrift das Erscheinungsbild der Seite so gut wie möglich übersetzt bis dann die eigentlich bevorzugte Webfont dargestellt wird. Hier kann Tool Typetester helfen.

Generell scheint die Verwendung von Webfonts über die @font-face Einbindung mittlerweile Browser übergreifend kein Problem mehr darzustellen:

caniusewebfonts

Für mich als Gestalter bieten die unzähligen Webfonts natürlich mehr Möglichkeiten im Webdesign als es die Systemschriften jemals konnten. In Warheit war es gestalterisch eine Farce mit Arial und Co. die ganzen Jahre über auszukommen. Ich lasse auch nicht im Ansatz die Diskussion zu, ob nicht auch „die normalen Schriften ausreichen“ würden. Schließlich ginge es doch „nur“ darum den Text inhaltlich zu erfassen.

Das ist schlichtweg falsch! Die richtige Typo ist für das Erscheinungsbild einer Marke oder eines Produktes maßgeblich entscheidend. Sie ist ein Hauptbestandteil der Corporate Identity. Ich bin ganz sicher kein „Schrift-Nazi“, dazu fehlt mir schlichtweg das Know How. Ich ignoriere auch nicht die technischen Einschränkungen durch die unterschiedlichen Systeme (Android, iOS). Hier und da muss man sicherlich noch mit Kompromissen leben. Das bedeutet aber nicht, das die Möglichkeiten (wo möglich) nicht auch genutzt werden sollten.

Nun zu TypesterWie schon erwähnt, bietet Typetester vor allem die Möglichkeit Schriften miteinander zu vergleichen. Dies kann vor allem sehr hilfreich sein, wenn man das Schriftbild der Fallback-Schrift (z.B. Arial oder Helvetica) an das Schriftbild der verwendeten Webfont anpassen möchte. Auch wenn man sich am Anfang eines Projekts unsicher ist, welche Schriften es gibt und wie sie in den unterschiedlichen Größen wirken, bietet die riesige Bibliothek eine tolle Spielwiese. Natürlich macht es auch Sinn unterschiedliche Schriftschnitte einer Font (bold, regular, light, …) gegenüber zu stellen um das beste Ergebnis zu erzielen (siehe oben).

Für die eigentliche Webentwicklung im Frontend, bieten die diversen Optionen des Tools den größtmöglichen gestalterischen Spielraum. Beginnend mit der Baseline (also dem Grundlinien-Raster), über Schriftgröße, Farbe und Font-Weight, kann hier schon fast feintypografisch die Line height, Letter spacing & Word spacing definiert werden. Sämtliche Möglichkeiten für Schrift die CSS bietet wie Text transform (uppercase, lowercase, capitalize) oder Text decoration (underline, overline, line-through) sind anwählbar und werden live angezeigt.

Ist man mit dem Ergebnis der Vorschau zufrieden, kann man den entsprechenden CSS-Code einfach kopieren und in das eigene Projekt einfügen.

Wer also bei dem kommenden Web-Projekt etwas tiefer in die Gestaltung des Schriftbildes einsteigen und dabei auch die Fallback-Schrift nicht ausser Acht lassen möchte, der sollte sich das Typetester-Tool unbedingt einmal etwas genauer anschauen.

 

Schreibe einen Kommentar