Website Schriften erkennen und auswählen

Website Schriften erkennen

Hast du beim Surfen durchs Internet auch schon mal auf einer Website gedacht: 
„Was ist das für eine schöne Website Schrift, die will ich auch“ oder
„So eine Schriftart wie auf Seite XZ möchte ich auch gerne … „

In Kursen und von meinen Kund:innen höre ich das immer wieder.

Meine Antwort: „Kein Problem!“ Finde die Schriftart, Schriftgröße und Schriftfarbe mit wenigen Handgriffen ganz leicht heraus.

Du hast verschiedene Möglichkeiten, um die Schriftarten auf einer beliebigen Website zu bestimmen:

1. Browser-Entwicklertools: 
   Die meisten modernen Browser verfügen über Entwicklertools, mit denen du dir die Schriftarten einer Website anzeigen lassen kannst. Öffne dafür die Entwicklertools, navigiere zum „Elements“-Tab und suche nach dem Abschnitt, der dem Text entspricht, dessen Schriftart du überprüfen möchtest. Dort solltest du die Schriftart und andere damit verbundene Eigenschaften wie Schriftgröße und Farbe einsehen können. (Beschreibung:Bild und Infografik zum Download)
   • Schriften erkennen mit Google Chrome:
     Gehe mit dem Mauszeiger zu der Stelle, an der die Schrift verwendet wird, die du gerne herausfinden möchtest. Dann klicke auf die rechte Maustaste und wähle “Untersuchen”. 
     Es öffnet sich eine Ansicht: Dort musst du auf das Symbol mit dem kleinen Pfeil (links) klicken. Ganz unten bei “Styles” findest du dann mehr Infos zur Schriftart.
   • Schriften erkennen mit Mozilla Firefox
     Auch bei Firefox kannst du Schriftarten leicht herausfinden. Gehe dafür mit dem Mauszeiger auf den Text, dessen Schrift du erkennen möchtest.
     Klicke mit der rechten Maustaste darauf und wähle “Element untersuchen”. Es öffnet sich ein Fenster am unteren Fensterrand, in dem du die gewünschten Informationen zur Website findest. Unter dem markierten “Inspektor” findest du die Worte “HTML durchsuchen”. Rechts davon befindet sich ein zweites Fenster, bei dem du “Stile filtern” kannst. Scrolle dort etwas nach unten und du findest unter font-family den Namen der Schriftart inkl. der Schriftgröße (font-size) und des Schriftschnittes (font-weight).
   • Schriften herausfinden mit Safari (MAC)
     Im Safari Browser klickst du einmal mit der rechten Maustaste auf den Text, dessen Schrift du herausfinden möchtest. Danach wählst du “Element erkennen” und es öffnet sich ein Fenster: Bei der rosa Markierung im Bild siehst du ein kleines Stift-Symbol. Wenn du auf den Stift klickst, öffnet sich rechts ein kleines Fenster mit weiteren Eigenschaften. Unter font-family findest du den Namen der Schriftart sowie unter font-size die Größe und unter color den Code für die verwendete Farbe.
2. Online-Tools: 
   Falls du über die Entwickler-Tools nicht weiterkommst kannst du verschiedene Online-Tools nutzen, die dir die Schriftarten auf einer Website identifizieren können. Ein Beispiel-Tool ist WhatFontIs.com. Auf der Seite gibst du einfach die URL der Website ein und ermittelst die Schrift. Alternativ kannst du auch einen Screenshot hochladen, um die verwendeten Schriftarten zu identifizieren.
3. Manuelle Überprüfung: 
   Wenn die oben genannten Optionen bei dir beide nicht funktionieren, kannst du die Schriftart manuell überprüfen, indem du den Text auf der Website kopierst und diesen in ein Textverarbeitungsprogramm einfügst. Dort wird dir die Schriftart dann einfach angezeigt, indem du die verfügbare Schriftart durchsuchst und mit der auf der Website verwendeten Schriftart vergleichst. Leider ist das eine aufwändigere Lösung.

Bitte beachte, dass einige Websites ihre Schriftarten über externe Quellen wie Google Fonts oder Adobe Fonts laden. Das ist in Europa und lt. der Datenschutz-Grundverordnung (DSGVO) nicht erlaubt.

Und… Sollte dies der Fall sein, greifen die oben genannten Methoden nicht und die verwendeten Schriftarten werden evtl. nicht angezeigt.

Website Schriften auswählen und kombinieren

Auswahl der Website Schriften

Die Auswahl und Kombination von Schriftarten für eine Website ist für viele Website-Besitzer:innen eine echte Herausforderung. Es gibt aber einige bewährte Methoden, die dir dabei helfen können, dich zu entscheiden:

1. Begrenze die Anzahl der Schriftarten: 
   Verwende nicht zu viele verschiedene Schriftarten auf deiner Website, das wirkt unruhig und wenig sortiert. Ich empfehle dir, dich auf 2 Schriftarten zu beschränken und evtl. eine Schmuckschrift hinzuzufügen. Damit schaffst du ein schönes und einheitliches Erscheinungsbild und sorgst für eine gute Lesbarkeit.
2. Verwende nur Schriftarten, die sehr gut lesbar sind: 
   Wähle klare Schriftarten, die ein gleichmäßiges Schriftbild haben und damit leicht lesbar sind. Besonders wichtig ist das auf mobilen Endgeräten!
3. Nutze ergänzende Schriftarten: 
   Wähle Schriftarten, die sich ergänzen. D. h. kombiniere solche Schriftarten, die gut zusammen passen und gemeinsam eine harmonische Erscheinung haben. Dies ergibt sich vor allen Dingen bei Schriftarten mit ähnlichen Merkmalen: 
   – gleiche Strichstärke, 
   – ähnliche Buchstabenhöhe und 
   – gleiche Proportionen.
4. Achte auf Kontraste: 
   Mehrere Schriftarten schaffen bei geschickter Auswahl ein interessantes Spannungsfeld und sorgen für ein schönes Erscheinungsbild. Je deutlicher sich die Schriftarten also voneinander unterscheiden desto besser. Stelle sicher, dass die von dir gewählten Schriftarten in Größe, Farbe und Stil einen guten Kontrast ergeben. Damit kannst du den Blick des Websitebesuchenden lenken und für dich wichtige Elemente hervorheben.
5. Teste deine Schriftarten: 
   Bevor du alles komplett aufbaust, solltest du die Schriftarten auf verschiedenen Endgeräten und Bildschirmgrößen testen. Damit stellst du sicher, dass deine Websiteinhalte auf jedem Gerät lesbar sind. Achte auf „Barrierefreiheit“, damit deine Inhalte für alle Benutzer:innen zugänglich sind.
6. Achte auf die Darstellung von Umlauten:
   Da wir in Deutschland oder in der Schweiz und Österreich auf Umlaute angewiesen sind, solltest du eine Schrift wählen, die über Umlaute wie „ä“ und „ü“ verfügt. Am besten schreibst du mehrere Sätze auf und schaust, wie diese Sätze in der jeweiligen Schrift aussehen: Gibt es Umlaute, kann man die Schrift lesen, wie ist der Zeilenabstand, verlaufen die Zeilen durch die Strichelchen?
7. Denk auch an Sonderzeichen:
   In Deutschland, in der Schweiz und in Österreich gibt es im normalen Schriftbild auch das „scharfe S“. Dieses Satzzeichen gibt es bei vielen Schriftarten entweder nicht oder es ist unlesbar. Um deutsche Texte gut darstellen zu können, ist auch dieses Zeichen wichtig für eine gute Lesbarkeit.

Beliebte Schriftkombinationen sind:

• Roboto und Open Sans
• Lato und Merriweather
• Montserrat und Raleway
• Source Sans Pro und Source Serif Pro
• Proxima Nova und Avenir

Letztendlich hängt die Auswahl und Kombination von Schriftarten von deinen persönlichen Vorlieben und dem Design deiner Website ab. Am besten probierst du verschiedene Kombinationen aus und wählst diejenige aus, die am besten zu deinem Design und deinem Anspruch passt.

So definierst du Schriften auf anderen Websites.