Schriftarten fĂŒr die Yoga-Website

Schriftarten fĂŒr die Yoga-Website

Auch wenn der Titel dieses Beitrags es anders vermuten lĂ€sst: es gibt keine Schriftarten, die total „yogisch“ sind. Aber ich habe trotzdem ein paar Empfehlungen und Tipps, die ich euch weitergeben möchte.

Anzahl der verwendeten Schriftarten

Auch bei der Anzahl der verwendeten Schriftarten gilt: Weniger ist mehr!

Dies hat mehrere GrĂŒnde: Zum einen fĂ€llt das Lesen leichter, wenn sich der Blick nicht stĂ€ndig auf eine andere Schrift einstellen muss.

Zum anderen wird jede Schriftart beim Aufruf einer Website geladen. Je mehr Schriftarten verwendet werden und vom Server geladen werden mĂŒssen, umso negativer wirkt sich das auf die Performance der Website aus.

Aus diesem Grund ist mein Tipp, sich auf zwei Schriftarten zu beschrÀnken:

  • Eine Schriftart fĂŒr den normalen Text
  • Und eine Schriftart fĂŒr Überschriften
  • Schriften, die man bspw. im Logo oder auf Flyern verwendet, kommen zusĂ€tzlich dazu

Verschnörkelt oder nicht?

Die Frage, ob die verwendeten Schriftarten verschnörkelt sein sollen oder nicht, lÀsst sich relativ leicht beantworten.

Bei der Schriftart fĂŒr Überschriften kann es gerne etwas verschnörkelt (aber dennoch lesbar) sein. Die fĂŒr den normalen Text verwendete Schriftart sollte aber gut lesbar sein. Hier sollte man beim Rumprobieren prĂŒfen, ob die Schrift auch auf dem Smartphone gut und einfach lesbar ist.

Schriftarten fĂŒr den "normalen" Text

Hier findest du ein paar Schriftarten, die sehr hÀufig verwendet werden, da sie modern wirken und leicht zu lesen sind:

Poppins

Poppins ist die Schriftart, die ich auch auf dieser Website u.a. fĂŒr den Haupttext verwende.

Raleway

Schriftart Raleway

Open Sans

Schriftart Open-Sans

Schriftarten fĂŒr Überschriften

Es folgen ein paar Beispiel-Schriftarten, die bspw. fĂŒr Überschriften oder auch Logos genutzt werden können.

Merienda One

Schriftart Merienda One

Mali

Schriftart Mali

Itim

Schriftart Itim

Aus tausende Schriftarten wÀhlen

Du möchtest noch etwas weiter stöbern? Dann schaue dich einfach bei Google Fonts um. Diese Schriftarten sind kostenlos und können frei verwendet werden.

https://fonts.google.com/

Das Verzeichnis von Google Fonts umfasst mehr als 1.000 Schriftarten.

Auf der Website könnt ihr auch einen Beispieltext eingeben und so sehen, wie genau die Schriftart aussieht.

Suchst du etwas verschnörkelten Schriftarten, solltest du bei „Categories“ alle Haken rausnehmen, bis auf „Handwriting“:

Tipps zum Einbau und zur Darstellung

Wenn du die fĂŒr deine Seite passende Schriftart(en) gefunden habt, geht es weiter mit den Einbau auf deiner Seite. Hierzu habe ich noch folgende Tipps:

Schriften lokal einbinden

Auf sehr vielen Websites sind die Schriftarten nicht auf dem eigenen Server eingebunden, sondern werden bspw. direkt von Google abgefragt. Dies sorgt dafĂŒr, dass jeder Besucher der Website (meist unwissentlich) Daten, wie die IP-Adresse, an Google weitergibt. Dies ist lt. DSGVO bedenklich. Aktuell ist noch in KlĂ€rung, ob dies sogar rechtlich nicht zulĂ€ssig ist.

Ich verwende Elementor Pro, damit lassen sich Schriftarten lokal einbinden, so dass keine Verbindung zum Google-Server aufgebaut wird. In einem spÀteren Artikel gehe ich nochmal genauer auf die Einbindung mit Elementor ein.

Als Alternative kann auch das WordPress-Plugin Use Any Font genutzt werden. Auch damit lassen sich Schriftarten lokal einbinden. Dieses Plugin hat ebenfalls sehr gute Bewertungen, ich habe aber bisher keine Erfahrungen damit gemacht.

Schwarze Schrift vermeiden

Wenn man sich ĂŒberlegt, welche Schriftfarbe man verwenden soll, wird der erste Gedanke natĂŒrlich „schwarz“ sein. TatsĂ€chlich ist es so, dass schwarz aber nicht unbedingt harmonisch wirkt. WĂ€hle stattdessen lieber ein dunkles grau. Ich verwende Beispielsweise den Farbcode #565656

Dieser Text ist in schwarz geschrieben, du solltest einen doch deutlichen Unterschied erkennen.

Schriftschnitt - es darf auch etwas dĂŒnner sein

Der Schriftschnitt beschreibt – einfach gesagt – die Dicke der Schrift. Eine Überschrift muss nicht immer „fett“ sein. Auch eine dĂŒnne Überschrift kann sich harmonisch ins Gesamtbid einfĂŒgen.

Hier siehst du drei Variationen:

Fette Überschrift (Schriftschnitt: 700)

Normale Überschrift (Schriftschnitt: 400)

DĂŒnne Überschrift (Schriftschnitt: 200)

Der Schriftschnitt lĂ€sst sich in den meisten Themes und Texteditoren anpassen. LĂ€dt man sich die gewĂŒnschte Schriftart bei Google Fonts herunter sind oftmals auch verschiedene Schriftschnitte in der Downloaddatei dabei. Mein Tipp: Nur die Schriftschnitte hochladen, die letztendlich auch verwendet werden sollen, da auch diese beim Seitenaufruf geladen werden und im Übermaß die Performance der Website verschlechtern.

Anbei ein Beispiel, wie in Elementor (auch in der kostenlosen Version) der Schriftschnitt global (also fĂŒr die komplette Website) fĂŒr Überschriften, Haupttext, etc. eingestellt werden:

Noch Fragen?

Hast du noch Fragen? Oder möchtest du deine eigenen Erfahrungen teilen? Dann nutze gern die Kommentarfunktion 😉

Schreibe einen Kommentar

Abonnieren
Benachrichtige mich bei
0 Kommentare
Inline Feedbacks
View all comments

Die mit Sternchen (*) gekennzeichneten Verweise sind sogenannte Provision-Links. Wenn du auf so einen Verweislink klickst und ĂŒber diesen Link einkaufst, bekomme ich von deinem Einkauf eine Provision. FĂŒr dich verĂ€ndert sich der Preis nicht. 

0
Hast du Fragen? Dann schreibe einen Kommentar ;-)x
()
x
Newsletter abonnieren

Erhalte regelmĂ€ĂŸig Informationen zu neuen Tipps und Tutorials.