So sehen Sie, welche Schriftart eine Website verwendet

Veröffentlicht: 2020-09-27

Wenn Sie jemals von einer Schriftart, die Sie auf einer Website gesehen haben, völlig begeistert waren, haben Sie sich vielleicht gefragt, wie Sie herausfinden können, wie sie heißt, damit Sie sie in Ihren eigenen Inhalten verwenden können. Eine qualitativ hochwertige Typografie kann das Leseerlebnis Ihrer Besucher verbessern, daher kann es sich lohnen, sich zu bemühen, sie zu finden. Unabhängig davon, warum Sie überprüfen, welche Schriftart auf einer Website verwendet wird, gibt es viele Tools, die Ihnen helfen können.

In diesem Artikel erläutern wir, warum Sie möglicherweise sehen möchten, welche Schriftart eine Website verwendet. Wir zeigen Ihnen auch, wie das geht.

Lass uns anfangen!

Abonnieren Sie unseren Youtube-Kanal

Warum Sie möglicherweise überprüfen möchten, welche Schriftart eine Website verwendet

Wie bereits erwähnt, können schöne und lesbare Schriftarten die Benutzererfahrung (UX) und Lesbarkeit Ihrer Website verbessern. Es stellt auch sicher, dass Besucher bequem mit Ihren Inhalten interagieren können, ohne sich zu mühen, sie zu entziffern. Wenn Ihr Text stilvoll, aber unleserlich ist, wird es den Lesern schwerfallen, Ihr Material zu verstehen oder zu schätzen.

Call-to-Action (CTA)-Buttons können sich auch als nutzlos erweisen, wenn ihr Text nicht lesbar ist. Aus diesem Grund ist es möglicherweise praktisch, eine Liste von Schriftarten zu führen, die Ihre Aufmerksamkeit auf sich ziehen, da sie sowohl stilvoll als auch lesbar sind. Sie können sie dann auf Ihrer Website oder in Zukunft für einen Kunden verwenden.

So sehen Sie, welche Schriftart eine Website verwendet (3 verfügbare Methoden)

Es gibt mehrere Methoden, mit denen Sie überprüfen können, welche Schriftart eine Website verwendet. Die Inspektionsfunktion Ihres Browsers ist eine ausgezeichnete Lösung, aber es gibt Erweiterungen, die ähnliche Effekte erzielen können. Mit Online-Tools können Sie sogar Schriftarten aus Bildern finden. Werfen wir einen Blick auf jede dieser Optionen.

1. Identifizieren Sie Schriftarten mit dem Browser-Inspektor-Tool

Eine der einfachsten Möglichkeiten, um zu überprüfen, welche Schriftart eine Website verwendet, ist das Inspektor-Tool Ihres Browsers. Obwohl wir in diesem Beispiel mit dem Chrome Inspector arbeiten, ist es erwähnenswert, dass andere Browser über gleichwertige Funktionen verfügen.

Klicken Sie zunächst mit der rechten Maustaste auf die Webseite, die die gesuchte Schriftart enthält. Wählen Sie im resultierenden Menü Prüfen:

Öffnen des Chrome Inspector-Tools.

Wenn Sie lieber eine Tastenkombination verwenden möchten, versuchen Sie es mit Strg+Umschalt+I für Windows oder Linux. Wenn Sie einen Mac verwenden, ist das Äquivalent Cmd+Shift+I.

Suchen Sie im Fenster auf der rechten Seite des Bildschirms nach dem Text mit der Schriftart, die Sie auschecken möchten. Es wird hervorgehoben, wenn Sie das entsprechende HTML-Element auswählen:

Auswählen eines Textelements im Chrome Inspector-Tool.

Klicken Sie anschließend auf die Registerkarte Berechnet und suchen Sie nach „font-family“:

Anzeigen der Schriftfamilie im Chrome Inspector-Tool.

Sie sollten den Namen der Schriftart und ihren Stil hier aufgelistet sehen.

Um das CSS für die Schriftart anzuzeigen, sehen Sie auf der Registerkarte Stile nach . Sie können durchblättern, um nach schriftartbezogenen Werten zu suchen. Da es hier jedoch Überschreibungen und irrelevante Stilregeln geben kann, ist die Registerkarte Berechnet normalerweise hilfreicher.

2. Schriftarten über eine Browsererweiterung finden

Browsererweiterungen bieten eine einfachere Möglichkeit, Schriftdetails auf einer Website zu finden, insbesondere wenn Sie mit dem Inspektor nicht vertraut sind. Außerdem können sie die gesuchte Antwort in der Regel schneller liefern, sodass Sie sich wieder der eigentlichen Aufgabe zuwenden können.

Einige dieser Add-Ons umfassen:

  • Fontanello: Mit dieser kostenlosen Erweiterung können Sie den Namen, die Stärke, den Stil und mehr einer Schriftart einfach finden, indem Sie sie markieren und mit der rechten Maustaste darauf klicken, während Sie surfen.
  • WhatFont: WhatFont optimiert die Schrifterkennung noch weiter und ermöglicht es Ihnen, den Namen einer Schriftart anzuzeigen, indem Sie einfach mit der Maus darüber fahren.
  • CSS Peeper: Diese Erweiterung wurde speziell für Webdesigner entwickelt und ist etwas robuster und kann Ihnen zusätzliche Details aus dem CSS-Code der Webseite mitteilen.

Jede dieser Erweiterungen verfügt jedoch über eine unterschiedliche Browserunterstützung. WhatFont ist für Firefox, Chrome, Safari und Internet Explorer verfügbar. Fontanello hingegen ist nur für Firefox und Chrome verfügbar. CSS Peeper ist ein Chrome-spezifisches Tool, das Sie mit keiner anderen Plattform verwenden können.

Um den Namen einer bestimmten Schriftart schnell zu finden, ist WhatFont die einfachste Option. Da es auch die meisten Browser unterstützt, verwenden wir es für eine schnelle Demonstration.

Sobald Sie WhatFont installiert haben, können Sie überprüfen, welche Schriftart eine Website verwendet, indem Sie sie in der Symbolleiste Ihres Browsers aktivieren und den Mauszeiger über einen Text bewegen:

Verwenden der Browsererweiterung WhatFont, um zu überprüfen, welche Schriftart eine Website verwendet.

Wenn Sie den Mauszeiger zum ersten Mal über den Text bewegen, sehen Sie nur den Namen der Schriftart. Wenn Sie jedoch auf den Namen klicken, wird ein erweitertes Popup mit weiteren Details wie Größe, Gewicht, Farbe und Zeilenhöhe angezeigt. Es kann auch erkennen, ob eine Schriftart über Typekit oder Google Fonts verfügbar ist.

Nachdem Sie die Schriftdetails überprüft haben, können Sie das Tool über die Schaltfläche WhatFont beenden in der oberen rechten Ecke Ihres Browserfensters beenden .

3. Schriftarten in Bildern erkennen

Schließlich können Sie auch versuchen, die in Bildern verwendeten Schriftarten anzuzeigen. Dazu gehören Schriftarten, die Sie in Logos oder Infografiken gesehen haben. Nach unserer Erfahrung mit Font-Detektoren ist WhatTheFont das effektivste Online-Tool für diese Aufgabe.

Um WhatTheFont zu verwenden, müssen Sie das betreffende Bild hochladen und den Abschnitt mit der entsprechenden Schriftart auswählen:

Auswählen von Text aus einem Bild in WhatTheFont.

Es wird dann eine Ergebnisseite mit mehreren Schriftarten zurückgegeben, die ähnlich, wenn nicht sogar exakt mit der Schriftart übereinstimmen, die Sie identifizieren möchten:

WhatTheFont-Ergebnisse.

Ihre Erfolgsquote kann hier je nach Quelle und Popularität der Schriftart variieren. Wenn Ihnen der genaue Name der Schriftart sehr wichtig ist, kann es schwierig sein, ein Werkzeug zu finden, das Ihnen das liefert, was Sie wollen.

Wenn Sie jedoch offen für die Verwendung einer Schriftart sind, die der in einem Bild gefundenen ähnelt, sollte ein Online-Detektor Ihren Anforderungen gerecht werden.

Abschluss

Optisch ansprechende und lesbare Schriftarten können das Leseerlebnis für die Besucher Ihrer Website verbessern. Dies könnte Sie dazu veranlassen, nach neuen Schriftarten Ausschau zu halten, die Sie entweder auf Ihrer Website oder für Ihre Kunden verwenden könnten. Unabhängig davon, warum Sie überprüfen möchten, welche Schriftart eine Website verwendet, gibt es viele Tools, die Ihnen helfen können.

In diesem Beitrag haben wir drei Methoden besprochen, um zu sehen, welche Schriftart eine Website verwendet:

  1. Identifizieren Sie Schriftarten mit Ihrem Browser-Inspektor-Tool.
  2. Suchen Sie Schriftarten mit einer Browsererweiterung wie WhatFont.
  3. Erkennen Sie Schriftarten in Bildern mit WhatTheFont.

Haben Sie Fragen, wie Sie überprüfen können, welche Schriftart auf einer Website verwendet wird? Lass es uns im Kommentarbereich unten wissen!

Bild von rudall30 / shutterstock.com