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

Gerry Webgärtner

Gerrys Kurzanleitung mit Google Chrome Browser

  1. Schriftart auf der Website wählen
  2. Kontextmenü (rechte Maustaste). "Untersuchen" wählen
  3. Auf Tabreiter "Computed" klicken
  4. Scrollen bis Eintrag "Font-Family" erscheint. Die erste aufgeführte Schriftart ist die gesuchte. ("Roboto Slab" in diesem Fall für unsere Überschriften)

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 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.

Siehe auch

Fassungslosigkeit vorm Bildschirm: Browser zeigt nicht das Gewünschte an

Hilfe, mein Firefox, Chrome, Safari, Edge zeigt mir alte oder kaputte Inhalte an…

3. August 2020

Immer wieder unschön: Man schlägt sich die Nacht mit Änderungen um die Ohren, stellt alles online, schickt die Mail an den Kunden, freut sich, dass alles termingerecht erledigt wurde und dann kommt die Rückmeldung: „Bei mir sieht noch alles so […]

Bilder, Schere, Messwerkzeuge, um Bilder auf die richtigen Maße zu bringen

Wie groß müssen eigentlich Fotos sein, die man am Rand oder in einer Galerie platziert?

3. Dezember 2019

1. Welche Größe? Aus technischer Sicht allgemeingültige Vorgaben zu machen für die Mindest- oder Höchstgrößen von Bildern im Web ist zunehmend schwierig. Die sich weiterentwickelnde Display-Technik mit immer besserer Darstellungsqualität einerseits und immer höhere Geschwindigkeiten bei der Datenübertragung andererseits machen […]

Screenshot einer Homepage Anwendung

Wie man einen Screenshot der kompletten Homepage macht

20. August 2019

Gerry der Web-Gärtner beantwortet die Frage, wie man einen Screenshot einer kompletten Homepage anfertigt.

Wir rufen Sie gerne zurück.

Scroll to Top