Welche Schrift ist das? …. Hast du dir beim Surfen auf einer Website schon mal gedacht: „Was ist das für eine schöne Schriftart? Die will ich auch!“? Auch ich höre oft von meinen Kunden, „ich möchte so eine Schriftart wie auf Seite … “ Kein Problem! Denn die Schriftart, Schriftgröße und Schriftfarbe lassen sich mit wenigen Handgriffen ganz leicht herausfinden. Ich zeige dir wie.
Hinweis: Dieses Video wird über Youtube gehostet. Wenn du das Video ansiehst, werden möglicherweise Daten von dir via Youtube erfasst. Mehr Infos in meiner Datenschutzerklärung.
YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Schritt für Schritt Anleitung:

So findest du die Schriftarten, Schriftgrößen und Schriftfarben von anderen Webseiten heraus:

Wenn du die Website in Chrome oder Firefox geöffnet hast, klicke auf die rechte Maustaste und gehe auf „Untersuchen“ oder „Element untersuchen.
Klicke auf den linken Pfeil mit dem Quadrat.

schrift anderer websites herausfinden

Und dann klicke gleich auf die Textstelle, dessen Schrift du wissen möchtest.

schnellstarter homepage selbst erstellen welche schrift

Es ist wichtig, dass du weißt, ob es ich um einen Fließtext (=body) oder um eine Überschrift (= h1-h6 handelt)

In der markierten Text-Ziele  liest du den Hinweis h3. (am oberen Bild, links oben im schwarzen Kasten)
In WordPress heißt das folgendes: Es gibt 6 verschiedene Überschriftengrößen…. h1 ist die größte und h6 die kleinste. Hier wird also eine mittelgroße Überschrift (h3) verwendet.

Im unteren Kasten in der rechten Spalte suchst du nach font-family = Schriftart. Da wir wissen, dass es sich um eine Überschrift handelt, müssen wir darauf achten, die Schriftart / font-family von h3 zu finden. Die erste Schriftart ist die, die verwendet wurde. die anderen sind nur Alternativen, falls die eigentliche Schriftart nicht ausgewählt wurde.

Die Schriftart lautet also: Open Sans   (font-family von h1-h6)

Im nächsten Feld siehst, du die Schriftgröße = font size von unserer h3 großen Überschrift lautet 29px.

Scrollst du noch etwas weiter runter, siehst du auch, welche Farbe die Schrift hat. Schriftfarbe = color

schriftfarbe herausfinden website

Auch die Zeilenhöhe und Abstand der Buchstaben können interessant für dich sein.
letter-spacing = Abstand zwischen den Buchstaben
line-height = Zeilenhöhe

Mit diesen Angaben (Schriftart, Schriftgröße, Schriftfarbe) hast du alles was du brauchst, wenn du eine Schrift übernehmen möchtest. Du kannst die Typographie (=Schrift) auf deiner Website mit diesen Angaben genauso einstellen.

Alternativ kannst du die Schriften in Chrome mit der Zusatz-App Whatfont herausfinden.

(erhältlich im Chrome Web Store)

Nachdem du die App bei dir in Chrome hinzugefügt hast, findest du in deiner oberen Leiste ein neues Zeichen: “ f? “ Klicke es an und fahre über die Textpassage, über die du die Infos haben möchtest. Klicke auf den Text und es öffnet sich ein schwarzes Fenster. Darin findest du alle Infos zur verwendeten Schriftart. Das sieht dann so aus:

Family: Schriftart
Style: Stil
Weight: Stärke der Buchstaben
Size: Schriftgröße
Line Height: Zeilenhöhe
Color: Schriftfarbe

Um wieder auf den normalen Cursor umzusteigen klicke wieder auf den Icon von Whatfont in der oberen Leiste. Exit ..

Wenn es dich nicht stört, eine extra App dafür zu installieren, ist das der schnellste Weg die Infos über Schriften fremder Webseiten zu bekommen.

Welches Tool verwendest du? Ich bin gespannt auf dein Kommentar!

Hol dir deine gratis Website Checkliste

Die Checkliste enthält 16 wichtige Schritte, sowie Tool- und Anbieter-Empfehlungen. Der Fahrplan für dein Webprojekt.
Abonniere meinen Newsletter für Website Tipps für Anfänger, inkl. Checkliste, direkt in dein E-Mail-Postfach. 

Du kannst dich jederzeit vom Newsletter wieder abmelden. Infos zum Datenschutz findest du hier.

Hi, ich bin Birgit.
Bei mir geht’s um deine Website. Ich zeige dir, wie du mit WordPress, dem Divi Theme und strategischem Webdesign mehr aus deiner Website herausholst und die Technik meisterst. Damit dein Online Business durch deine Website als Dienstleister, Berater, Trainer oder Coach wächst.

11+ Tipps für dein Business-Shooting für die Website
fotografin beim website shooting

Welche Outfits sollte ich beim Business-Shooting tragen? Müssen alle Fotos den gleichen Hintergrund haben? Sind neue Portraits fällig, wenn ich Read more

7 Elemente die deine Website haben sollte, damit sie dir mehr Kunden bringt
kunden-gewinnen-Website

Wie gewinne ich mehr Kunden mit meiner Website? Das ist eine häufige Frage, die sich Webseitenbetreiber stellen. Die Basis für Read more

7 Seiten, die jede Business-Website haben sollte
7 must have Seiten deiner Business Website Sitemap Inhalte

"Welche Seiten sollte meine Website haben?" Das ist eine sehr häufige Frage, die alle Unternehmer, egal ob Online-Unternehmer und Kleinunternehmer, Read more

Teile diese Seite mit einem Klick auf: