Startseite » Blog » Welche Schriftarten werden für Überschriften und Texte auf unserer Seite benutzt?

Welche Schriftarten werden für Überschriften und Texte auf unserer Seite benutzt?

Schriftarten erkennen und identifizieren und weitere Analysen zu Aufbau und Gestaltung von Websites

"Das sieht aber nett aus, was das wohl für eine Schriftart ist? Und was für
eine Farbe?" Im Web wie im Garten ist es immer wieder anregend und interessant,
sich mit den Ergebnissen der Bemühungen anderer Schaffender zu befassen.
Praktischerweise bekommt der neugierige Web-Gärtner mit einem zeitgemäßen
Browser alle Werkzeuge an die Hand, um die Styling-Geheimnisse seiner
Lieblings-Internet-Seiten aufzudecken. Mit der einfachen Tastenkombination <Umschalt> +
<Strg> + i wird der Werkzeugkoffer geöffnet: Die Developer-Tools (auch
Entwicklertools, Werkzeuge für Entwickler oder Entwicklungstools). Einen Teil
des Bildschirms nimmt jetzt ein - auf den ersten Blick recht unübersichliches -
Feld ein. Eine Menüleiste und verschiedene Quelltextausgaben sind typischerweise
zu sehen.

Schaltflächen DOM-Inspektor
Buttons DOM-Inspektor in Firefox, Chrome, Edge

Diesen Informationswust zur Beantwortung unserer Fragen zu nutzen ist, wie bei
jedem Werkzeugkoffer, eine Frage der gezielten Anwendung. Erster Schritt für uns
ist der Klick auf das Symbol eines Mauszeigers auf einem Rechteck, dass sich
stets in der linken oberen Ecke jedes Entwicklertools-Fensters befinden sollte.

Auftritt: Der Inspektor

Wird diese Schaltfläche geklickt und man fährt anschließend mit dem
Mauszeiger über die zu untersuchende Web-Seite, so tun sich erstaunliche Dinge.
Teile des Bildschirms verfärben sich, so wird die Ausdehnung des Elements, auf
dem der Mauszeiger gerade ruht, dargestellt. Dazu werden am Element weitere
Informationen eingeblendet, wie der Elementtyp (div, span, p etc.), die Zuordnung
von Klassen und IDs für das Element und seine Pixelgröße. Im Chrome-Browser sind
diese Information noch detaillierter, so dass hier praktischerweise unsere Frage
nach der Schriftart bereits direkt beantwortet ist: Es handelt sich zum Beispiel
bei der Seitenüberschrift um den Font Roboto Slab.

Inspektor-Ansicht auf die Hauptüberschrift auf mainetcare.de
Keine weiteren Fragen - der Inspektor hat den Fall gelöst

Verstärkung: FontFace Ninja

Wer es noch bequemer mag, kann statt des Inspektors auch gleich einen Ninja ins Rennen schicken. Die für Firefox und Chrome frei verfügbare Browser-Erweiterung FontFace Ninja ist rein auf die Untersuchung der auf Websites verwandten Schriftarten spezialisiert und löst diese Aufgabenstellung in besonders komfortabler Weise. Klickt man das FontFace Ninja-Symbol, so werden in einem Kasten alle in der gerade aktiven Website verwendeten Fonts aufgelistet. Klickt man einen dieser Fonts an, so kann man anhand vorgegebener Platzhaltertexte oder selbst eingegebener Textpassagen die Optik der jeweiligen Schriftart in Augenschein nehmen. Auch Bookmarks auf die Fonts können gesetzt werden, außerdem erscheint zu jedem Font ein Link. Je nach Verfügbarkeit der Schriftart wird man damit auf eine Google-Suche zum Font oder direkt auf die Seite geleitet, unter der der Font zum Kauf oder zum freien Download angeboten wird.

Eine sehr nützliche weitere Funktion des FontFace Ninja, die aktuell noch als beta gekennzeichnet ist, ist die Analyse von Schriftarten in Bitmap-Grafiken. Klickt man bei aktivierter FontFace-Ninja-Box eine Grafik in der gerade geöffneten Website, so wird das Bild mithilfe des einschlägigen Dienstes WhatTheFont analysiert und als Ergebnis werden zu den in der Grafik erkannten Texten die verwendeten - oder ähnliche - Schriftarten vorgeschlagen. Je nach Beschaffenheit des Bildes klappt das oft erstaunlich gut.

Fazit: Web-Schriftarten entschlüsselt

Mit Spitzenpersonal wie Inspektoren und Ninjas an Bord müssen im Web entdeckte Schriftarten kein Geheimnis bleiben. Mit wenigen Mausklicks sind sie zu identifizieren und in vielen Fällen auch zur eigenen Verwendung verfügbar.

Scroll to Top