WhatFont - Schriftarten einer Webseite schnell ermitteln
- Chrome Extension -Mit der Chrome Erweiterung WhatFont kannst du schnell und einfach Informationen zur Schriftart auf Webseiten ermitteln. Mit einem Klick erhältst du u.a. die Deklarationen für font-family, font-size, line-height und color.
Please enable the breadcrumb option to use this shortcode!
Es kommt oftmals vor, dass Kunden uns mitteilen, sie hätten gerne dieselbe Schriftart wie Seite XY. Oder wir selbst surfen auf einer Webseite, finden die Typografie wunderschön und wollen im Anschluss wissen, welche Schriftart das nun genau ist. Entweder um sie auf eigenen Projekten zu verwendeten, oder sie bei neuen Kunden mit einfließen zu lassen.
Bis vor einiger Zeit haben wir die entsprechende Textpassage mit den Chrome DevTools untersucht und uns die font-family
-Deklaration angeschaut. Das dauert allerdings immer einen Moment und wenn man anschließend eine andere Textpassage untersuchen möchte, muss man den gesamten Vorgang wiederholen.
Download: WhatFont
Wichtige Informationen zur Schrift via WhatFont ermitteln
Mit Hilfe der Chrome Extension WhatFont spart man sich einiges an Zeit und Nerven und erhält auf einen Blick alle wichtigen Informationen zu der gewünschten Textpassage.
Nach der Installation aktivierst du WhatFont mit einem Klick auf das entsprechende Icon neben deiner Adresszeile und wirst fortan von einer kleinen Infobox neben deinem Cursor begleitet. Wenn du jetzt mit der Maus über die zu untersuchende Textpassage fährst, wird dir der Name der darin verwendeten Schriftart angezeigt.
Mit einem Klick auf den Text expandiert die Infobox und gibt dir weitere Informationen wie z.B. die gesamte font-family
-Auszeichnung, font-size
, font-weight
, line-height
und die verwendete color
preis. Somit erhältst du mit einem Klick innerhalb kürzester Zeit alle wichtigen Informationen zur gewünschten Schriftart, ohne dich umständlich durch die DevTools angeln zu müssen.
Ebenfalls positiv ist die Option, Schriftarten direkt in Google Fonts oder Typekit aufrufen zu können, sofern diese denn darüber angeboten werden.
Eine Tweet-Option, um seine Follower über die hübsche Typografie der Webseite aufmerksam zu machen, runden die Infobox ab, wobei wir persönlich das noch nie benutzt haben.
Um auf der Webseite wieder regulär navigieren zu können musst du nur oben rechts auf „Exit WhatFont“ klicken. Dann verschwindet die Box neben deinem Mauszeiger und du kannst wie gewohnt fortfahren.
Programmiert wurde das Tool übrigens von Chengyin Liu der dafür auch eine iOS-App gebastelt hat.
Download: Fontface Ninja
Alternative: Fontface Ninja – Schriftart gleich herunterladen
Sollte dir WhatFont optisch nicht zusagen, können wir dir unter Umständen Fontface Ninja empfehlen.
Hier wird nach Aktivierung eine kleine Leiste am oberen Browserrand eingeblendet. In dieser kannst du die untersuchte Schriftart gleich mit einem eigenen Text ausprobieren und anpassen. Dazu stehen dir zwei Schieberegler zur Schriftgröße und zum letter-spacing bereit. Zusätzlich kannst du die ausgewählte Schriftart – sofern irgendwo verfügbar – gleich herunterladen.
Fazit
Sowohl WhatFont als auch Fontface Ninja erleichtern dir das Herausfinden von wichtigen Informationen rund um Schriftarten auf Webseiten. WhatFont liefert dir dabei Informationen zur aktuell sichtbaren Formatierung, die du so gleich in dein Projekt kopieren könntest, während Fontface Ninja dir hauptsächlich die verwendete Schriftart an die Hand gibt, um dich selbst damit auszutoben.
Mit beiden Erweiterungen wirst du allerdings einiges an Zeit einsparen, wenn du wieder auf eine Webseite mit schöner Typografie stößt und dich fragst: „Welche Schriftart ist das? Die will ich auch!“