Haben Sie jemals den klaren Text auf einer Website bewundert und sich gefragt, „Welche Schriftart ist das?“ Schriftarten spielen eine große Rolle bei der Gestaltung der Persönlichkeit einer Website. Sie setzen die Stimmung, etablieren eine Markenidentität und beeinflussen vor allem, wie leicht Besucher Ihre Inhalte lesen können. Wenn Sie einen bestimmten Look nachahmen, die Typografie Ihrer eigenen Website verbessern oder einfach nur Ihre Neugier befriedigen möchten, ist der erste Schritt herauszufinden, welche Schriftarten verwendet werden.

Warum ist es so wichtig, die richtigen Schriftarten für Ihre Website auszuwählen?

  • Branding: Schriftarten helfen dabei, den Ton Ihrer Marke zu vermitteln – ob verspielt, anspruchsvoll, modern oder traditionell.
  • Lesbarkeit: Die richtige Schriftgröße und -stil machen Ihre Inhalte leicht konsumierbar und verbessern die Benutzererfahrung.
  • Ästhetik: Schriftarten schaffen eine schöne visuelle Anziehungskraft und Harmonie im Design Ihrer Website.

In diesem Leitfaden behandeln wir alles, was Sie über die Identifizierung von Schriftarten auf jeder Website wissen müssen.

Verwendung der Entwicklertools Ihres Browsers

Jeder moderne Webbrowser verfügt über integrierte Tools, mit denen Sie hinter die Kulissen des Designs einer Website blicken können. Diese Entwicklertools sind Ihr Geheimwaffe, um herauszufinden, welche Schriftarten verwendet werden! So greifen Sie in den beliebtesten Browsern darauf zu:

Chrome, Firefox und Safari

  1. Rechtsklick oder F12 auf den Text, dessen Schriftart Sie identifizieren möchten.
  2. Wählen Sie Untersuchen (oder Element untersuchen). Dies öffnet das Entwicklertools-Panel.
  3. Suchen Sie im Panel nach dem Stile– oder Berechnete-Tab.
  4. Scrollen Sie durch die CSS-Stile, bis Sie die Eigenschaft Schriftfamilie finden. Dies wird den Namen der Schriftart enthüllen.

Verständnis von CSS-Schriftstapeln

Die Eigenschaft Schriftfamilie listet oft mehrere Schriftarten auf, die durch Kommas getrennt sind. Dies wird als „Schriftstapel“ bezeichnet und bietet ein Sicherheitsnetz. Wenn die erste Schriftart auf dem Gerät eines Benutzers nicht verfügbar ist, versucht der Browser die nächste Schriftart in der Liste und so weiter.

Fehlerbehebung: Wenn die Schriftart nicht angezeigt wird

Manchmal muss die Schriftart im CSS gefunden werden. Dies könnte passieren, wenn:

  • Die Schriftart aus einer externen Datei geladen wird: Untersuchen Sie den Code nach Links zu Schriftdateien (häufige Erweiterungen sind .woff, .woff2, .ttf, .otf).
  • Die Schriftart über ein CDN geladen wird: Suchen Sie nach Verweisen auf ein Content Delivery Network (CDN) wie Google Fonts oder Adobe Fonts.

Schriftart-Erkennungs-Erweiterungen

Möchten Sie eine super-schnelle Möglichkeit, Schriftarten zu entdecken? Browser-Erweiterungen sind Ihr bester Freund! Einige der beliebtesten Optionen sind WhatFont, Fontanello und Font Ninja. Diese Erweiterungen vereinfachen den Prozess, indem Sie über jeden Text auf einer Website fahren und sofort Informationen über dessen Schriftart erhalten.

So funktionieren sie im Allgemeinen:

  1. Installieren Sie die Erweiterung in Ihrem bevorzugten Browser.
  2. Besuchen Sie die Website, die Sie interessiert.
  3. Aktivieren Sie die Erweiterung (normalerweise durch Klicken auf das Symbol in der Symbolleiste Ihres Browsers).
  4. Fahren Sie mit der Maus über den Text, den Sie analysieren möchten.
  5. Ein Pop-up erscheint und zeigt den Namen, die Größe, das Gewicht, den Stil und manchmal sogar die Farbe und den Zeilenabstand der Schriftart an.

Vorteile der Verwendung von Schriftart-Erweiterungen:

  • Geschwindigkeit und Benutzerfreundlichkeit: Umgehen Sie die Notwendigkeit, in den Code der Website einzutauchen.
  • Zusätzliche Informationen: Einige Erweiterungen bieten detailliertere Schriftart-Informationen.

Dinge, die zu beachten sind:

  • Die Genauigkeit kann variieren: Erweiterungen sind möglicherweise nicht immer zu 100 % genau, insbesondere bei benutzerdefinierten oder weniger bekannten Schriftarten.
  • Verfügbarkeit: Überprüfen Sie, welche Browser jede Erweiterung unterstützt.

Beliebte Schriftart-Erweiterungen:

  • WhatFont: Einfach und weit verbreitet.
  • Fontanello: Bietet eine saubere Benutzeroberfläche und zusätzliche Schriftart-Daten.
  • Font Ninja: Leistungsstark, mit erweiterten Funktionen für Designer.

Die Wahl der besten Erweiterung hängt von Ihren Vorlieben und dem gewünschten Detailgrad ab.

Schriftarten aus Bildern identifizieren

Manchmal ist die Schriftart, die Sie anspricht, Teil des Logos, Banners oder anderer grafischer Elemente einer Website. Glücklicherweise gibt es Tools, die speziell dafür entwickelt wurden, Ihnen bei der Identifizierung von Schriftarten in Bildern zu helfen.

Beliebte bildbasierte Schriftart-Identifikatoren

  • WhatTheFont (von MyFonts): Ein vielseitiges Tool mit einer riesigen Datenbank von Schriftarten zum Vergleich. Laden Sie einfach ein Bild hoch, und es wird versuchen, die verwendete Schriftart zuzuordnen.
  • Fontspring Matcherator: Eine weitere großartige Option mit fortschrittlichen Matching-Algorithmen, die eine feinere Kontrolle zur Eingrenzung der Ergebnisse bieten.

So verwenden Sie bildbasierte Schriftart-Identifikatoren:

  1. Bereiten Sie Ihr Bild vor: Stellen Sie sicher, dass der Text klar und leicht lesbar ist. Schneiden Sie das Bild zu, um sich nur auf die Schriftart zu konzentrieren, die Sie identifizieren möchten.
  2. Laden Sie Ihr Bild hoch auf die Website Ihres gewählten Tools.
  3. Passen Sie die Einstellungen an (falls verfügbar): Einige Tools ermöglichen es Ihnen, den Auswahlbereich zu verfeinern oder Hinweise zu den Eigenschaften der Schriftart zu geben.
  4. Erhalten Sie Ihre Ergebnisse: Das Tool liefert eine Liste potenzieller Übereinstimmungen, oft nach Ähnlichkeit sortiert.

Erfolgsfaktoren für Genauigkeit:

  • Bildqualität: Höhere Auflösung und klarer Kontrast führen zu besseren Ergebnissen.
  • Schriftkomplexität: Einfache, markante Schriften sind leichter zu identifizieren als stark dekorative oder stilisierte.

Wann Bildidentifikatoren versagen können:

  • Benutzerdefinierte oder stark modifizierte Schriften: Diese könnten in bestehenden Datenbanken nicht gefunden werden.
  • Begrenzte Textproben: Je mehr Text das Tool analysieren kann, desto genauer wird es sein.

Tipps zur Verbesserung Ihrer Ergebnisse

  • Probieren Sie mehrere Tools aus: Experimentieren Sie mit verschiedenen bildbasierten Schriftidentifikatoren, da ihre Stärken variieren können.
  • Suchen Sie nach ähnlichen Schriften: Wenn Sie keine exakte Übereinstimmung finden, durchsuchen Sie die vorgeschlagenen Schriften nach nahen Alternativen, die Ihrem Zweck dienen könnten.

Schriften in Themes und Plugins erkunden

Viele WordPress-Themes und -Plugins bieten integrierte Schriftoptionen, die möglicherweise die Standardeinstellungen Ihres Browsers oder die von Ihnen anderswo ausgewählten Schriften überschreiben. So finden Sie heraus, wo sich diese Schriftarten-Einstellungen befinden:

Überprüfen der Theme-Einstellungen:

  1. Gehen Sie zu Darstellung > Anpassen in Ihrem WordPress-Dashboard: Dies öffnet den WordPress-Customizer.
  2. Suchen Sie nach einem Abschnitt mit dem Titel „Typografie“ oder „Schriften“: Nicht alle Themes haben dies, aber es ist ein häufiger Ort für Schriftanpassungseinstellungen.
  3. Erkunden Sie die Optionen: Sehen Sie, ob Sie globale Schriften für Überschriften, Fließtext usw. ändern oder Schriften für bestimmte Elemente anpassen können.

Untersuchung der Plugin-Einstellungen

  1. Plugins sollten sich auf Website Builder (wie Elementor), Formular-Plugins oder jedes Plugin konzentrieren, das bedeutende Inhaltsblöcke zu Ihrer Website hinzufügt.
  2. Überprüfen Sie den Einstellungsbereich jedes Plugins: Suchen Sie nach Abschnitten oder Tabs, die sich auf Design, Erscheinungsbild oder Styling beziehen.
  3. Identifizieren Sie Schriftsteuerungen: Sehen Sie, ob sie die Auswahl oder Anpassung von Schriften ermöglichen.

Überschreiben von Theme/Plugin-Schriften

Elementor bietet unvergleichliche Flexibilität bei der Verwaltung der Typografie auf Ihrer WordPress-Website. So wird es ermöglicht:

  • Individuelle Elementsteuerung: Jedes Elementor-Widget hat eigene Typografie-Einstellungen, die es Ihnen ermöglichen, Schriften auf granularer Ebene genau zu definieren.
  • Globale Typografie: Elementor ermöglicht es Ihnen, Standardschriften für Überschriften, Absätze und mehr festzulegen, was Ihren Designprozess vereinfacht.
  • Benutzerdefinierte Schriften: Sie können Ihre eigenen Schriften einfach hochladen und auf Ihrer mit Elementor erstellten Website verwenden.

Erweiterte Schriftidentifikation und -verwaltung

Untersuchen des Quellcodes der Website

Manchmal ist der schnellste Weg, um Schriftdetails zu entdecken, in den zugrunde liegenden HTML- und CSS-Code der Website einzutauchen. So geht’s:

  1. Rechtsklick irgendwo auf der Seite und wählen Sie Seitenquelltext anzeigen (oder eine ähnliche Option).
  2. Verwenden Sie die Suchfunktion Ihres Browsers (normalerweise Strg+F oder Cmd+F), um nach Folgendem zu suchen:
    • Schriftfamilie: Dies wird die angegebenen Schriften offenbaren.
    • .woff, .woff2, .ttf, .otf: Dies sind gängige Schriftdateierweiterungen.
    • Links zu CDNs: Überprüfen Sie Verweise auf Dienste wie Google Fonts oder Adobe Fonts.

Verstehen von Schriftdateiformaten

Sie werden wahrscheinlich auf diese Dateiformate stoßen, wenn Sie in den Code eintauchen:

  • WOFF (Web Open Font Format): Das am weitesten verbreitete Format aufgrund seiner guten Kompression und breiten Browsersupport.
  • WOFF2: Eine noch optimierte Version von WOFF, die eine bessere Kompression für schnelleres Laden bietet.
  • TTF (TrueType Font): Ein älteres Format mit hervorragender Kompatibilität.
  • OTF (OpenType Font): Ein flexibles Format, das erweiterte typografische Funktionen bietet.

Überlegungen zur Schriftlizenzierung

Bevor Sie eine Schriftart verwenden, die Sie entdecken, ist es wichtig, ihre Lizenzierung zu respektieren:

  • Kostenlose Schriften: Viele Websites wie Google Fonts bieten frei verwendbare Schriften an; überprüfen Sie immer deren Nutzungsbedingungen.
  • Premium-Schriften: Einige Schriften erfordern den Kauf einer Lizenz für die kommerzielle Nutzung. Überprüfen Sie die Website der Schriftgießerei für Details.
  • Urheberrechtsverletzung: Vermeiden Sie die Verwendung von Schriften ohne ordnungsgemäße Genehmigung, da dies zu rechtlichen Problemen führen kann.

Elementor vereinfacht die Schriftverwaltung:

  • Integration mit Google Fonts und Adobe Fonts: Elementor bietet nahtlosen Zugriff auf umfangreiche Bibliotheken hochwertiger Schriften.
  • Benutzerdefinierter Schrift-Upload: Haben Sie eine bestimmte Schrift im Sinn? Laden Sie sie einfach hoch und verwenden Sie sie überall auf Ihrer Elementor-Website.
  • Globale Schrifteinstellungen: Verwalten Sie die gesamte Typografie Ihrer Website effizient.

Typografie Best Practices

Tipps zur Schriftpaarung

Das durchdachte Kombinieren von Schriften ist eine Kunstform. Hier sind einige Richtlinien:

  • Kontrast ist der Schlüssel: Kombinieren Sie Schriften mit unterschiedlichen Stilen – versuchen Sie, eine Serifenschrift mit einer serifenlosen Schrift oder eine fette Displayschrift mit einer einfachen Fließtextschrift zu kombinieren.
  • Begrenzen Sie Ihre Palette: Zwei bis drei Schriften sind normalerweise ausreichend für ein kohärentes Erscheinungsbild.
  • Visuelle Hierarchie: Verwenden Sie unterschiedliche Schriftgrößen und -gewichte, um eine klare Reihenfolge der Wichtigkeit für Ihre Überschriften und Inhalte zu etablieren.

Lesbarkeit und Zugänglichkeit

  • Wählen Sie lesbare Schriften: Vermeiden Sie übermäßig dekorative oder stilisierte Schriften für Fließtext.
  • Schriftgröße: Stellen Sie sicher, dass Ihr Text groß genug ist, um gelesen zu werden, insbesondere auf kleineren Bildschirmen.
  • Zeilenhöhe (Durchschuss): Ausreichender Abstand zwischen den Zeilen verbessert die Lesbarkeit.
  • Farbkontrast: Stellen Sie sicher, dass es ausreichend Kontrast zwischen Ihrem Text und den Hintergrundfarben gibt, insbesondere für Benutzer mit Sehbehinderungen.

Integration von Google Fonts und Adobe Fonts

Elementor vereinfacht das Hinzufügen von Schriftarten aus beliebten Diensten:

  1. Google Fonts:
    • Gehen Sie zu Elementor > Einstellungen > Integrationen > Google Fonts.
    • Fügen Sie Ihren Google Fonts API-Schlüssel hinzu.
    • Wählen Sie die Schriftarten aus, die Sie auf Ihrer Website einbinden möchten.
  2. Adobe Fonts:
    • Gehen Sie zu Elementor > Einstellungen > Integrationen > Adobe Fonts.
    • Fügen Sie Ihre Adobe Fonts Projekt-ID hinzu.
    • Wählen Sie die gewünschten Schriftarten aus.

Verwendung der globalen Typografie-Einstellungen von Elementor

Vereinfachen Sie Ihren Designprozess mit den leistungsstarken Typografie-Steuerelementen von Elementor:

  • Gehen Sie zu Elementor > Website-Einstellungen > Typografie.
  • Legen Sie Standard-Schriftarten, -Größen und -Gewichte für Überschriften (H1-H6) und Fließtext fest.
  • Diese Einstellungen werden auf alle von Elementor erstellten Seiten angewendet.

Inspiration finden und Ihr Schriftartenwissen erweitern

Wo Sie Schriftarten-Inspiration finden

  • Schriftarten-Websites: Erkunden Sie Plattformen wie Google Fonts, Adobe Fonts, Font Squirrel (für kostenlose Schriftarten) und MyFonts (für Premium-Schriftarten).
  • Design-Inspirations-Websites: Seiten wie Behance, Dribble und Awwwards zeigen Websites mit exzellenter Typografie.
  • Webdesign-Blogs und -Artikel: Folgen Sie Branchenpublikationen für Trendanalysen und Diskussionen über Schriftartenwahl in der realen Welt.

Mit Typografie-Trends auf dem Laufenden bleiben

Typografie, wie andere Aspekte des Webdesigns, entwickelt sich ständig weiter. So bleiben Sie informiert:

  • Schriftgießereien folgen: Viele Schriftgießereien haben Blogs oder Newsletter, die neue Veröffentlichungen und Designtrends hervorheben.
  • Design-Konferenzen und -Workshops: Besuchen Sie Veranstaltungen, die sich auf Webdesign und Typografie konzentrieren, um tiefgehendes Wissen und Einblicke zu erhalten.

Fazit

Bis jetzt haben Sie die Geheimnisse zur Identifizierung von Website-Schriftarten entschlüsselt. Denken Sie daran, dass Schriftarten immense Macht besitzen. Sie prägen die Persönlichkeit, Lesbarkeit und das gesamte ästhetische Erscheinungsbild Ihrer Website. Eine sorgfältige Auswahl der Schriftarten hat einen tiefgreifenden Einfluss darauf, wie Besucher Ihre Inhalte wahrnehmen und mit ihnen interagieren.