Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
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.
Und dann klicke gleich auf die Textstelle, dessen Schrift du wissen möchtest.
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
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!
Kostenfreie Website Checkliste
Mit dem PDF – Fahrplan kommst du schnell und gut zur eigenen Website. Du bekommst meine besten Tool Tipps und behältst den Überblick über alle wichtigen Schritte der Website-Erstellung.
On Top bekommst du meine Website Tipps, für Anfänger und leicht Fortgeschrittene, 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.
