Willst du eine Webseite, die verkauft?

Dazu brauchst du Kunden!

Abonniere meinen kostenlosen Newsletter mit exklusiven Tipps und Angeboten rund um “Webseiten, die verkaufen”, Kundengewinnung, Verkaufsprozesse und Online-Marketing.
Als Willkommens-Geschenk erhältst du mein E-Book “10 Gesetze für Webseiten die verkaufen”.

Du kannst dich jederzeit mit einem Klick wieder abmelden. Etwa 2-4 Mails im Monat. Ich analysiere meine Newsletter Kampagnen um dir nur relevante Informationen zu senden, detaillierte Information in der Datenschutzerklärung.

Schriftart herausfinden: Die ultimative Anleitung inkl. Tool-Überischt

Inhaltsverzeichnis

Wenn du dir andere Webseiten anschaust, dann fragst du dich sicher oft: Welche Schrift ist das?

Als Webdesignerin höre ich von meinen Kunden auch oft: „ich will so eine Schriftart wie …“ Kein Problem! Denn die Schriftart, Schriftgröße und Schriftfarbe lassen sich mit wenigen Klicks unkompliziert ermitteln.

Wie kann ich die Schriftart identifizieren und kann ich die Schrift für meine Webseite nutzen? 

Heute zeige ich dir gleich mehrere Möglichkeiten, Schriftarten zu erkennen. Mit einfachen Tools in wenigen Minuten.
Am Ende des Artikels erkläre ich noch kurz, worauf du achten musst, wenn du Schriften auf deiner Webseite nutzt, das kann nämlich teuer werden.

Schriftart herausfinden im Browser

Du kannst dazu super einfach eine Browser-Erweiterung installieren oder direkt mit deinem Internet-Browser herausfinden, welche Schriftart verwendet wird.

Chrome

Schriftarten bestimmen mit der Browser-Erweiterung WhatFont

  1. Browser-Erweiterung WhatFont installieren.
  2. WhatTheFont die Schriftart ermitteln lassen.

Aber Stopp: Noch mal ganz langsam 😉

Gerade, wenn du dabei bist, deine Webseite zu erstellen (oder einen Relaunch planst) ist das perfekt. Du kannst die Erweiterung WhatFont in Chrome hinzuzufügen.

Chrome-BRowser-App-What-Font, Safari-Browser-App-What-Font

Wenn du die Erweiterung aktiviert hast, bekommst du direkt im Browser Informationen zur verwendeten Schrift (im kleinen schwarzen Kasten):

Chrome-BRowser-App-What-Font

Informativ: Du bekommst die Schrift und Schriftgröße angezeigt.

Ulli von Versavista Coaching verwendet die Schriftart Nunito. Eine Google Font.

Schriftart testen bei Google Fonts

Was ich bei den Google Fonts sehr mag: Es gibt keine Probleme mit den Nutzungsrechten. Und du kannst dir direkt bei Google eine Schrift aussuchen, die sich gut kombinieren lässt.

Google-Font-Kombinationen, Google Font aussuchen

Um die Anwendung zu beenden und wieder auf den normalen Cursor umzusteigen, klicke einfach auf das Icon von WhatFont in deiner Browser-Leiste. Damit schließt du die App.

Schriftart finden direkt im Chrome-Browser

Ist eigentlich genauso einfach. Du darfst nur keine Angst davor haben, dass Google dir den Code zu der Webseite zeigt, auf der du gerade surfst.

Gehe mit der Maus zu der Schrift, die du gerne herausfinden möchtest. Dann klicke auf die rechte Maustaste und wähle „Untersuchen“.

Es öffnet sich eine beängstigende Ansicht 😉

Schrift erkennen im Chrome Browser

Angst haben brauchst du deswegen aber noch lange keine.

Unter Elements findest du die gleichen Informationen, die dir auch die Browser-Erweiterung zeigen würde.

Schrift erkennen im Chrome Browser

Weiter unten erkläre ich auch genau, was diese Code-Schnipsel bedeuten.

Und wenn du fertig bist, die Schriftarten zu untersuchen, dann kannst du den „Untersuchen“ Modus oben rechts mit dem Kreuz wieder schließen.

Schrift erkennen im Chrome Browser

Firefox

Font herausfinden direkt im Firefox-Browser

Bei Firefox kannst du genauso wie bei Google Schriftarten rausfinden. Gehe mit der Maus auf die Schrift, die dir gefällt.

Klick mit der rechten Maustaste auf diesen Text und wähle „Untersuchen“.

Schrift erkennen im Firefox Browser

Unter dem Reiter „Inspektor“ findest du die Informationen zur Schrift, die du suchst.

So kannst du dann auch gleich die Stärke deiner Font identifizieren (font-weight) und die Schriftgröße messen (font-size).

Schrift erkennen im Firefox Browser

Weiter unten erkläre ich auch genau, was diese Code-Schnipsel bedeuten.

Schließen kannst du die Ansicht mit dem Kreuz oben rechts.

Schrift erkennen im Firefox Browser

Safari

Schriftarten erkennen mit der Erweiterung WhatFont

Die Browser-Extension WhatFont gibt es auch für Safari.

Safar-Browser-Erweiterung-What-Font

Ich habe weiter oben genau beschrieben, wie du sie nutzen kannst.

Was bedeutet der Code im Browser?

Wenn du den „Untersuchen“ Modus in deinem Browser nutzen willst, dann solltest du den Code auch verstehen können. Ich erklär dir mal die Grundlagen.

Schriftart im Browser herausfinden Safari

Auf Webseiten gibt es (wie in Büchern übrigens auch) Überschriften und Fließtext. Die Überschriften heißen im Internet „Heading“ (englisch für Überschrift). Weil es auch Unterüberschriften gibt, um Texte zu gliedern, kürzt man das dann ab mit „h1“ (sehr wichtige Überschrift, Titel) bis „h6“ (Unterüberschrift). Der Fließtext heißt im Internet „body“ (auch englisch).

Es ist oft so, dass die Überschriften eine andere Schriftart und/oder Farbe nutzen als der Fließtext.

In der markierten Textzeile hast du eine h2.

Schriftart im Browser herausfinden Safari

Im unteren Kasten wird es spannend: Du siehst hier die font-family (Schriftart, auch wieder englisch).

So kannst du die Schriftart erkennen: „Nunito“.

In der nächsten Zeile siehst du die Schriftgröße „font-size“ (auch englisch). Die Überschrift hier ist 65px groß und so mitteldick. „font-weight“ geht oft von 100 (sehr feine Linien) bis 600 (fett gedruckt).

Der Zeilenabstand oder „line-height“ ist 1.2em. Die Zeilen sind also nicht ganz so eng abgebildet.

Leerraum zwischen den Zeichen oder „letter-spacing“: hier 3.6px. Die Schrift ist also etwas gestreckt.

Die Farbe ist übrigens auch angegeben „color“. Ganz oben und mit Hex-Code.

Jetzt weißt du schon ganz schön viel über die Schriftart, die du gesucht hast.

Als Bild / Vom Bild oder PDF

Wenn du ein Bild oder PDF hast und eine Schrift erkennen willst, dann kannst du die Web-App WhatThe Font nutzen. Dazu musst du keine Browser-Erweiterung installieren.

Schriften erkennen mit der Web-App WhatTheFont von MyFonts

So nutzt du die Web-App:

Unter https://www.myfonts.com/WhatTheFont/ findest du in wenigen Sekunden die Schriftart heraus, die du suchst.
Das automatische Schrifterkennungssystem identifiziert Web-Fonts aufgrund der charakteristischen Form ihrer einzelnen Buchstaben.

Du brauchst nur einen Screenshot der Schrift.

  • Mac: Mit [Cmd]+[Shift]+[4] erstellst du ein Bild vom ausgewählten Bereich.
  • Windows: Mit [Win]+[Umschalt]+[S] erstellst du ein Bild vom ausgewählten Bereich. Das Microsoft Snipping-Tool ist ja installiert.
Schriftart herausfinden mit der App MyFonts, what's the font

Den Screenshot speicherst du lokal ab. Danach kannst du die Upload Funkion von What The Font nutzen.

Einfach die Datei in das Feld ziehen und auf den Pfeil klicken. Sehr einfach!

ACHTUNG: What The Font ist eine kleine Diva. Dein Screenshot sollte ca. 100px hoch sein und die Buchstaben dürfen sich nicht berühren.

Schriftart herausfinden mit der App MyFonts

Danach kannst du die Lizenz für die Schrift auch bei MyFonts direkt kaufen.

Das spart dir richtig Zeit: So kannst du die passenden Fonts finden und die Nutzungsrechte direkt erwerben. Da es viele Vorschläge gibt, kannst du direkt auch ähnliche Fonts finden (und so noch Geld sparen).

Es gibt übrigens auch eine Handy-App dazu. Hier kannst du What The Font im App Store und im Play Store herunterladen.

Worauf du achten musst, wenn du Schriften auf deiner Webseite nutzt, das kannst du am Ende des Artikels nachlesen.

Schriftart online erkennen mit Whatfontis.com

Auf Whafontis.com kannst du genau so ein Bild hochladen. Erkannt wird sowohl JPG- als auch PNG-Format. Du kannst auch einen Direktlink nutzen.

Schriftarten Erkennung online mit Matcherator

Fontspring bietet den Matcherator an.  Hier lädst du dein Bild hoch oder gibst direkt eine URL an.

Handy-App: „Find my Font”

Wenn du auf dem Handy fragst “Welcher Font ist das?”, dann kannst du dir die Find-my-Font-App über den Store herunterladen. Sie ist für Apple und Android verfügbar.

In der kostenlosen Version sucht die App in 900 Schriften. Für 49 Euro dann in einer größeren Schriften-Datenbank.

Font Suche als Quiz mit ja/nein Fragen

Etwas verspielter, dafür sehr ungenau ist Identifont.com.

Das ist eher ein Schriftarten Finder als ein identifizierer. Die Webseite fragt nach Merkmalen deiner Schriftart. Also, ob sie serifenlos ist. So würde ich keine Schrift suchen, wenn ich sie schon auf einer Webseite gesehen habe. Aber die Methode mag ich wirklich, wenn ich ein Branding komplett neu erstelle.

Ich nutze dazu gerne das Buch “How to style your brand“*

Die Autorin startet damit, jede Marke in Jahreszeiten einzuteilen und daraus ergibt sich dann, welche Farben und Schriften (nach welchen Kriterien) ausgesucht werden können. Das klappt mit Identifont hervorragend.

Darauf musst du achten, wenn du Schriften suchen willst

Schriften haben Nutzungsrechte (Commercial!)

Wenn du eine Schrift für deine Webseite nutzt, achte darauf, ob du dich damit strafbar machst.

Was du über Schriften wissen musst: 

Es gibt kostenlose und kostenpflichtige Schriften.

Wichtig: Du kaufst gar nicht die Schrift, sondern ein Nutzungsrecht. Also selbst, wenn du für eine Schrift bezahlt hast, kann es sein, dass du sie nur für Social Media oder deine Webseite nutzen darfst, aber nicht für dein Buch oder deine Flyer. Oder nur für eine bestimmte Auflagenzahl. Der Teufel steckt hier im Detail.

Es ist wichtig, sich den Lizenzvertrag und die Nutzungsrechte genau durchzulesen. Hier festgelegt wird, auf wie vielen Computern du die Schrift installieren darfst und in welchem Umfang du sie in Print und digital verwendet werden kannst.

Es gibt viele kostenlose Schriftarten im Internet, die allerdings lediglich für den privaten Gebrauch freigegeben sind. Darüber ist nicht nur ein Firmeninhaber gestolpert.

Achtung: Prüfe beim Nutzungsrecht, ob du als Webdesigner die Schrift für Kundenprojekte nutzen darfst oder ob der Kunde die Schrift selbst kaufen muss. Käufer = Nutzer.

Bei Schriftarten auf Umlaute achten

Wenn du eine Schrift findest, die dir gefällt, achte darauf, ob sie Umlaute hat, bevor du sie für deine Webseite nutzt. Die amerikanischen Schriften können nicht alle ä-ö-ü abbilden. Das schränkt dich schon sehr ein 😉

So erstellst du dein Corporate Design

Wenn du deine Schriften ausgesucht hast, dann bist du nur einen kleinen Schritt davon entfernt, dein Corporate Design zu erstellen.

Was sich für mich als Webdesignerin bewährt hat? Eine Vorlage, auf der ich Schriften und Farben für meine Kunden ganz ordentlich eintragen kann. Denn dann kann man es auch nach JAHREN immer wieder nachlesen. Und das ist dann schon ein Mini-Corporate Design.

Schau dir das Style Sheet gern bei mir im Shop an:

Willst du eine Webseite, die verkauft?

Dazu brauchst du Kunden!

Abonniere meinen kostenlosen Newsletter mit exklusiven Tipps und Angeboten rund um “Webseiten, die verkaufen”, Kundengewinnung, Verkaufsprozesse und Online-Marketing.
Als Willkommens-Geschenk erhältst du mein E-Book “10 Gesetze für Webseiten die verkaufen”.

Du kannst dich jederzeit mit einem Klick wieder abmelden. Etwa 2-4 Mails im Monat. Ich analysiere meine Newsletter Kampagnen um dir nur relevante Informationen zu senden, detaillierte Information in der Datenschutzerklärung.
Willst du eine Webseite, die verkauft?

Dazu brauchst du Kunden!

10-Regeln

Abonniere meinen kostenlosen Newsletter mit exklusiven Tipps und Angeboten rund um “Webseiten, die verkaufen”, Kundengewinnung, Verkaufsprozesse und Online-Marketing.
Als Willkommens-Geschenk erhältst du mein E-Book “10 Regeln für Webseiten die verkaufen”. 

Cookie Consent mit Real Cookie Banner