Schriftarten auf einer Website erkennen
Reading Time: 4 minutes Zumeist wird sie vom Kunden gestellt. “Schauen Sie sich mal unseren Flyer aus dem letzten Jahr an. Diese Schriftart wollen wir auch im nächsten Projekt verwenden.” Der Kunde weiß natürlich nicht, welche es ist. Die folgenden Dienste wissen unterschiedlich gut zu helfen, sind aber jedenfalls die beste Toolbox, die es derzeit gibt…
Schriftarten kombinieren mit Fontjoy
Mit Fontjoy lassen sich eine breite Palette an kostenlosen und quelloffenen Schriftarten kombinieren, was eine Vielzahl an einzigartigen Schriftartenkombinationen für verschiedene Designprojekte ermöglicht.
Anpassbare Ähnlichkeitseinstellungen
Das Tool erlaubt es, den Grad der Ähnlichkeit zwischen Schriftarten anzupassen. Sie können zwischen sehr ähnlichen Paarungen für ein harmonisches Aussehen oder kontrastreichen Kombinationen für ein dynamischeres und auffälligeres Design wählen.
Da Fontjoy Google Fonts verwendet, ist es einfach, diese Kombinationen in Webdesign-Projekten zu finden und anzuwenden.
Font Match
Font Match ist eine kleine App, mit der Sie zwei Schriftarten diekt nebeneinander vergleichen können. Das Ziel hier ist vor allem, sogenannte Fallback-Schriftarten zu finden, um mit Hilfe von System-Schriftarten die Ladezeit einer Webseite zu verbessern, während die eigentlich gewünschte Schriftart noch im Hintergrund lädt.
Font in Logo
Sie haben ein tolles Logo gesehen und sich gefragt, welche Schriftart das ist? Wenn es nun nicht gerade Futura ist, kann Font In Logo genau das rausfinden.
WhatTheFont ist der Marktführer bei den Font-Identifizierern
WhatTheFont von MyFonts hat schon dadurch einen Vorteil, dass es auf eine der größten Schriftenkollektionen des Netzes zugreifen kann. Zudem ist es schon ewig am Markt. Dennoch verlässt sich WhatTheFont auch stets auf Bilder als Input und bietet keine direkte Identifikation auf Live-Websites an. Was es von anderen absetzt, sind die Apps für Android und iOS. Diese erlauben dir die Identifikation von Schriften per Smartphone-Kamera.
WhatTheFont ist so erfolgreich, dass etliche ältere Dienste mit gleicher Zielsetzung inzwischen ihre entsprechenden Services eingestellt haben und direkt auf WhatTheFont verweisen, so etwa Linotype.
WhatFontIs identifiziert Schriftarten aus Bildern
WhatFontis ist eine nützliche Arbeitshilfe für jeden Webdesigner. Dabei ist die Verwendung so simpel wie das Bookmarken einer Seite. WhatFontis ist als Bookmarklet und als Extension für Chrome und Safari verfügbar. Einmal aktiviert, gibt es detaillierte Einblicke zu den auf einer Website verwendeten Schriftarten.
Dabei basiert die Erkennung der Schriften immer auf einer Bilddatei. Die Chrome-Extension ist im Grunde nichts weiter als der Aufruf der WhatFont-Web-App. Die anderen beiden Extensions setzen WhatFont ins Kontextmenü.
Einen Vorteil gegenüber WhatTheFont kann ich nicht erkennen. Ich würde den Dienst also nur da einsetzen, wo andere schon gescheitert sind – als last resort quasi.
Font Matcherator
Der Font Matcherator funktioniert ebenfalls auf der Basis hochzuladender Bilder. Sein Wettbewerbsvorteil besteht darin, dass das gesamte Fontspring-Portfolio hinter ihm steht. So ist er ähnlich stark wie WhatTheFont. Fontspring selber sieht den Matcherator noch weiter vorne, weil er etwa auch Open-Type-Features und einige andere Spezialitäten erkennen kann. In meinem Alltagstest spielte das indes keine entscheidene Rolle. Die Tools waren vergleichbar gut.
Außer Konkurrenz sei noch erwähnt:
Identifont – Dieser Vertreter seiner Gattung versucht Schriftarten zu identifizieren, indem er dem Suchenden eine Vielzahl von Fragen stellt. Man muss also Geduld und ein Basiswissen mitbringen, um (möglicherweise) erfolgreich zu sein.
(Artikelbild: Depositphotos)
Vielen Dank für die Einblicke in die Möglichkeiten der Schrifterkennung auf Websites. Es ist sehr wertvoll, über solche Werkzeuge und Methoden Bescheid zu wissen, die uns helfen, Schriftarten schnell und effizient zu identifizieren.
Sehr hilfreicher Artikel. Vielen Dank!
Vielen Dank für diesen interessanten und hilfreichen Artikel! Die Schriftart eines Logos rauszufinden, hat mich schon so oft zum Verzweifeln gebracht. Jetzt bestimmt nicht mehr 🙂
Wow, danke für die wervollen Tipps!
Das ist ja der Hammer! Klar, wenn es sich um Webfonts handelt, genügt ein Blick in den Code. Aber gerade bei Logos, ist dies kaum möglich. In sofern ist dies einer der hilfreichsten Artikel, die ich 2020 gelesen habe.
kleine Korrektur: mit dem Bookmarklet „Fontdropper“ kann man beides machen, Schriftarten anzeigen lassen (Häckchen setzen bei: „Show Font Info on Hover“) oder auch temporär per Drag&Drop verändern (oder per Klick – Häckchen setzen bei: „Click on Text then Font to Apply“)
Mein Favorit unter den Bookmarklets ist seit zig-Jahren „WhatFont“, da es im Gegensatz zum hier erwähnten „Fount“ nicht nur die verwendete Schriftart und Schriftgröße darstellt, sondern auch gleich die Angabe der Alternativschriften (WhatFont stellt die Schriftarten die nicht auf dem meinem System vorhanden sind, durchgestrichen dar), sowie den HTML-Farbcode und die Zeilenhöhe des auszuspähenden Textes, exakt so wie es im CSS niedergeschrieben wurde. Ob im Gegensatz dazu „font dragr“ bei dem man wie der Name schon vermuten lässt, einen kurzen Textauszug oder ein betreffendes Wort auf das Menü des Bookmarklets per Drag&Drop zieht, noch funzzt, – habe ich länger nicht mehr getestet.
Zu nennen wäre bei den Bookmarklets auch noch „Fontdropper“, mit dem man zwar keine Schriften ausliest, dafür aber als Websiteentwickler Textabschnitte und Überschriften einer Seite im Browser in zahlreichen auswählbaren Google-Fonts per Klick darstellen lassen bzw. testen kann.
Dann gibts auch nocht Font Squirrel
https://www.fontsquirrel.com/matcherator
WhatTheFont ist echt ein Oldtimer, den ich auch immer wieder nehme.
Sehr interessanter Artikel. Ich kannte die Tools noch gar nicht.
Nice!
Meistens reicht ein Blick in den Quelltext!
Recht hast Du; dann nämlich nicht, wenn der mutmaßliche Font als Bild daherkommt. Und schon braucht es eine Bilderkennung, die zum hoffentlich ähnlichen oder passenden Font führt.