Gerrys Kurzanleitung mit Google Chrome Browser
- Schriftart auf der Website wählen
- Kontextmenü (rechte Maustaste). “Untersuchen” wählen
- Auf Tabreiter “Computed” klicken
- 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.
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.
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.
