Schriftarten für deine Website wählen und kombinieren

Schriftarten für deine Website wählen und kombinieren

Wenn du dir deine Website selbst erstellen möchtest, wirst du früher oder später auch deine Schriften aussuchen. Nutzt du die weit verbreiteten Google Fonts, die bei WordPress in einigen Themes dabei sind oder sonst über ein Plugin (z.B. Easy Google Fonts) eingebunden werden können, dann hast du allein schon gut 900 Schriftarten zur Auswahl.
Wie solltest du also bei der Auswahl vorgehen?

Zunächst macht es Sinn, sich kurz die fünf Kategorien der Schriften anzuschauen:

Welche Schriftarten gibt es?

In der Typographie unterscheidet man grob zwischen fünf Kategorien von Schriftarten:

  1. Schriftarten mit Serifen,
  2. Schriftarten ohne Serifen (sans serif),
  3. handschriftliche Schriftarten,
  4. Schreibschriften und
  5. Egyptienne.

Serifen sind sozusagen die Schnörkel, die Füßchen, die sich an den Enden befinden – vergleiche einmal Times New Roman (mit Serifen) mit Arial (ohne Serifen):

Serifenschriften sind die klassischsten Schriftarten und werden am häufigsten verwendet. Längere Texte lassen sich in der Regel besser mit Serifen lesen.

Beispiel Serifenschrift (Times New Roman)

Serifenlose Schriften wirken etwas moderner und werden in der digitalen Welt häufiger eingesetzt.

Beispiel serifenlose Schrift (Arial)

Bei Egyptienne Schriften – auch Slab Serif genannt – ist die Schriftstärke der einzelnen Buchstaben genau gleichen. Sie wirken dadurch eher massiv und erzeugen einen „Vintage-Look“.

Beispiel Egyptienne Schrift (Josefin Slab)

Hand- und Schreibschriften geben dem Text einen sehr persönlichen Stil und sind auf Websites bei Überschriften oder einzelnen Worten in der Überschrift sehr beliebt. Schreibschriften können altbacken wirken, werden aber z.B. bei Hochzeitscovern gern verwendet. Bei Schreibschriften gibt es keine Zwischenräume, da „der Stift“ nicht abgesetzt wird. Man muss jedoch vor allem bei Handschriften darauf achten, dass die Schrift trotzdem noch gut lesbar bleibt und man sie nicht zu viel, vor allem nicht für längere Texte einsetzt.

Beispiel Handschrift (Amithen)

Beispiel Schreibschrift (Sentania)

 

Wie finde ich die richtigen Schriftarten für mich und mein Branding?

Wie auch Farben haben Schriftarten bestimmte Wirkungen auf den Betrachter. Wenn wir durch das Lesen eines einzelnen Blogartikels genau wüssten, welche Schrift wir auswählen sollen, würde es wohl nicht so viele Branddesigner*innen geben. Eine klare Antwort auf die Frage lautet also: Frag am besten einen Profi! Ich kann hier wärmstens Lena Küssner von goingneon.de empfehlen, die dir nach eingehender Analyse ein Brand Design erstellen kann, dass dich vom Hocker holt.

Was du bedenken solltest bei der Auswahl deiner Schriften:

  • Wer genau ist deine Zielgruppe? Wen sprichst du an? Ist diese eher seriös? Verspielt? Feminin? Elegant? Klar? Kantig? Bodenständig? – Dies darf sich in einer Schrift wiederspiegeln.
  • Was bietest du an? Musikinstrumente erfordern andere Schriften als Spielsachen oder Interior-Design-Beratung!
  • Was macht dich aus? Bist du witzig, schnell, perfektionistisch, laut, zurückhaltend, umsetzungsstark? Auch das kannst du durch die Wahl der richtigen Schrift zeigen, ohne Worte zu benutzen.

Um genau einschätzen zu können, welche Schrift was genau aussagt, solltest du dich entweder ausführlich mit dem Eindruck von Schriften befassen oder einen Profi damit beauftragen – es lohnt sich wirklich.

Außerdem gibt es diverse Links, unter denen du schon ein paar schöne Auswahlen an Schriften finden kannst, wie z. B. hier direkt bei Canva.

 

Welche Schriftarten passen zusammen?

Kontrast ist wichtig! Wichtig ist beim Mischen, dass man keine zwei Schriften der gleichen Art mischen sollte – also keine zwei serifenlosen oder zwei handschriftliche Schriftarten mischen. Sie sollten genügend Unterschiede zeigen, sonst wird unbewusst eine Verwirrung hervorgerufen.

Ein guter Start für dein Personal Branding, also deinen Markenstil ist es, wenn du dir

  • eine Schriftart für Überschriften aussuchst und
  • eine Schrift für den Fließtext (also den ganz normalen Text auf deiner Website).

Möglich ist es, dir noch eine dritte Schriftart für spezielle Betonungen auszusuchen, z.B. so etwas wie Buttons. Aber das Ganze sollte nicht zu „bunt“ werden und immer noch harmonisch wirken.

Auf fontjoy.com kannst du dir zufällige Schriftenkombinationen generieren lassen und direkt sehen, wie diese zusammenpassen.

Online Tools für Schriftarten

  • Direkt auf Google Fonts kannst du dir die Schriftarten anschauen, die z.B. vom Divi Theme und vielen anderen WordPress Themes automatisch eingebunden werden
  • Calligraphr – Hiermit kannst du deine eigene Handschrift einscannen und am Computer verwenden
  • Es gibt noch weitere Websites, auf denen du dir Schriftarten herunterladen kannst (z.B. Dafont), jedoch sind viele nicht kostenlos für kommerzielle Zwecke und die jeweiligen Lizenzbedingungen sind teilweise nicht so leicht herauszufinden
  • In Canva kannst du in der Premium Version deine Branding Schriftarten hochladen, falls diese nicht schon vorhanden sind, und damit all deine Grafiken schnell und einfach erstellen.

 

Wie kann ich Schriftarten auf anderen Websites herausfinden?

Dafür nutzt du im Browser die Entwicklertools, in Google Chrome kannst du dazu einfach mit der rechten Maustaste auf ein Wort klicken und „Untersuchen“ auswählen. Falls beim Rüberfahren über die Schrift noch kein Fenster erscheint, musst du einmal auf das Pfeilsymbol klicken:

Element untersuchen auf einer Website

 

Wenn du anschließend mit der Maus über den gewünschten Text fährst, wird dir in einem separaten Fenster neben Infos zu der Schriftfarbe (Color) und Größte auch die Schriftart selbst angezeigt – hier z. B. bei Font: „Overpass Light“:

Schrift auf einer Website herausfinden

Schriftarten lokal einbinden (datenschutzkonform)

Mit dem kostenlosen Plugin OMGF kannst du die von dir verwendeten Schriften ganz einfach DSGVO-konform (lokal) einbinden. In der OMGF Anleitung zeige ich dir ganz genau, wie dies geht.

Newsletter Plugins für WordPress

Newsletter Plugins für WordPress

Wenn du endlich mit deinem Newsletter starten möchtest, bekommst du von überall großartige Tipps für das Newsletter-Tool: Nimm Active Campaign! MailerLite ist das einzig Wahre! Mailchimp gibt es schon ewig! CleverReach wird von vielen Großen genutzt – nimm doch das!

Klar sind die „großen“ Anbieter alle sehr gut. Aber ganz ehrlich?

Wenn du gerade erst mit deinem Newsletter startest, ist das oft wie mit Kanonen auf Spatzen geschossen!

Vielleicht möchtest du erst einmal:

  • Ausprobieren, ob du es überhaupt schaffst, regelmäßig Newsletter zu verschicken?
  • Gucken, ob dir das überhaupt Spaß macht?
  • Prüfen, ob du mit der Technik gut klar kommst?

Da ist so  ein Tool wie Active Campaign ganz schön abschreckend:

Active Campaign

(ich hätte nach meinem ersten Blick in Active Campaign am liebsten geweint – mittlerweile geht’s aber).

Das Tolle ist: Es muss gar nicht so kompliziert sein!

Statt einem externen Tool – welches du über eine andere Website aufrufst und bedienst – kannst du auch einfach direkt in WordPress einen Newsletter verschicken. Wie das geht? Mit einem Newsletter-Plugin!

In diesem Blogartikel stelle ich dir 4 WordPress Newsletter-Plugins vor und zeige dir jeweils die Vor- und Nachteile. Ich selbst habe übrigens die ersten 2 Business-Jahre auch MailPoet genutzt, bevor ich auf Active Campaign umgestiegen bin.

1. MailPoet

MailPoet ist das beliebteste und meistgenutzte Newsletter-Plugin für WordPress und bietet eine sehr benutzerfreundliche Oberfläche zur Erstellung und Verwaltung von Newslettern direkt in deinem WordPress-Dashboard.

Vorteile:

  • Intuitive Drag-and-Drop-Oberfläche für die Erstellung von Newslettern.
  • Automatische Integration mit WordPress-Benutzerlisten (braucht man eigentlich nicht).
  • Analysetools zur Verfolgung von Öffnungs- und Klickraten.
  • Kostenlos für bis zu 1.000 Abonnenten.
  • Deutsche Oberfläche.

Nachteile:

  • Einige fortgeschrittene Funktionen erfordern die kostenpflichtige Version (brauchst du zu Beginn aber wirklich nicht!)
  • Du kannst keine unterschiedlichen Danke-Seiten für mehrere Freebies erstellen

 

 

MailPoet Newsletter Plugin

Einstellung von Willkommensmails und zeitversetzten Mails: 

Willkommensmails-einstellen

MailPoet kannst du übrigens ganz easy und Schritt für Schritt lernen in meinem Online-Kurs „Newsletter leicht gemacht“: 

In diesem Kurs zeige ich dir, wie du mit WordPress und dem kostenlosen Plugin MailPoet alles auf deiner Website so einrichtest, dass sich Besucher*innen eintragen können und eine Willkommensmail (oder -Sequenz) inkl. Freebie erhalten. DSGVO-konform, inklusive Vorlagen, Masterclass und vieles mehr.

2. Newsletter

Das Plugin mit dem einfallsreichen Namen „Newsletter“ ist ein weiteres Newsletter-Plugin für WordPress mit vielen Funktionen für die Erstellung und Verwaltung von Newslettern.

Vorteile:

  • super einfache Einrichtung und Nutzung.
  • Verschiedene Vorlagen und Anpassungsoptionen.
  • Integration mit WordPress-Benutzerlisten (braucht man eigentlich nicht).
  • Grundlegende Version ist kostenlos.

Nachteile:

  • Einige Funktionen sind nur in der kostenpflichtigen Version (ab 79$) verfügbar – selbst die Willkommenssequenz.
  • Ein paar Buttons sind noch englischsprachig (der Großteil ist aber auf Deutsch)
newsletter plugin

So sieht zum Beispiel der Newsletter-Editor aus: 

3. Noptin

Noptin ist ein noch recht unbekanntes WordPress Plugin für Newsletter, welches aber auch sehr viele großartige Features bietet. 

Vorteile:

  • Sehr einfach einzurichten
  • Kann viele coole Sachen, wie z. B. Automationen bei neuen Kommentaren, neuen Blogposts etc. 

Nachteile:

  • Kostenpflichtige Version kostet regulär 160€/Jahr (gibt es manchmal im Angebot für die Hälfte)
  • Englischsprachige Oberfläche
  • In der kostenlosen Version sind viele Features nicht enthalten, selbst der Editor für die Mails ist nur in einer sehr Basic Version enthalten:
newsletter editor noptin

4. Weitere Plugins wie Brevo (vorher Sendinblue)

Eigentlich hätte ich ja gern noch Brevo und weitere Anbieter vorgestellt, die ebenfalls WordPress Plugins anbieten. 

Leider besteht hier jedoch die einzige Funktion damit, den WordPress Account mit dem Newsletter Account zu verknüpfen und z. B. Formulare einzurichten oder Statistiken zu sehen. Der eigentliche E-Mail Versand erfolgt aber von der Brevo Website aus, nicht direkt aus WordPress – gleiches gilt für Mailchimp und weitere Anbieter. 

Trotzdem erwähne ich Brevo hier noch, weil es unter den deutschen Newsletter-Anbietern sehr beliebt ist und auch von einigen meiner Kund*innen genutzt wird. 

Vorteile:

  • Kostenlose Version mit bis zu 300 E-Mails pro Tag (da muss man erstmal hinkommen – bei mehr als 300 Kontakten kann es dann aber unpraktisch werden)
  • Integrierte CRM-Funktionen zur Verwaltung von Kontakten (CRM = Customer Relationship Management, bietet vielfältige Optionen, deine Kundendaten zu verwalten)
  • Fortschrittliche Automatisierungsmöglichkeiten.

Nachteile:

  • Etwas steilere Lernkurve für Anfänger.
  • Einige fortgeschrittene Funktionen erfordern die kostenpflichtige Version

Brauche ich überhaupt (jetzt schon) einen Newsletter?

Ich sag mal so: Wenn du eine Website hast, wenn du ein Angebot hast, wenn du ein Business hast und etwas verkaufen möchtest, dann JAAA! Du kannst mit dem Newsletter gar nicht früh genug starten, denn sind wir mal ehrlich: Vermutlich klingen dieine ersten Newsletter so langweilig, dass sie nicht mal meine Oma interessieren würden. Aber mit der Übung, mit der Erfahrung wird das besser. 

Warum du einen Newsletter brauchst - Teil 1
Warum du einen Newsletter brauchst - Teil 2

 

Fazit

Um mit deinem Newsletter in WordPress zu starten, musst du gar nicht gleich ein externes kostenpflichtiges Tool verwenden – oft ist das sogar viel zu umfangreich und stürzt dich in unnötige monatliche Kosten. 

Meine klare Empfehlung: Starte kostenlos mit dem Plugin MailPoet und schau, wie regelmäßig du Newsletter schreiben kannst und welche Funktionen du wirklich brauchst. Ein Wechsel zu Active Campaign und Co. ist auch später möglich, wenn du weißt, dass es sich wirklich lohnt und auch finanziell rentiert!

Für die direkte, schnelle und leichte Umsetzung mit MailPoet kannst du direkt mit meinem Online-Kurs „Newsletter leicht gemacht“ loslegen: 

 

Wie du LinkedIn und weitere Social Media Icons in den Footer bei Divi einfügst – Divi Footer individuell erstellen

Wie du LinkedIn und weitere Social Media Icons in den Footer bei Divi einfügst – Divi Footer individuell erstellen

Standardmäßig kannst du bei Divi nur 4 Social Media Icons für den Footer (Fußbereich) einstellen: Facebook, Instagram, X und einen RSS Feed.
Wenn du LinkedIn, Youtube, Snapchat und weitere Kanäle verlinken möchtest, musst du einen individuellen Footer über den Divi Theme Builder erstellen. Wie genau das geht, zeige ich dir in dem folgenden Video:

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

kostenlose Videoanleitung:

3 geniale Divi-Funktionen, die du unbedingt kennen MUSST!

Mit dem powervollen Divi-Theme für WordPress kannst du für deine Website so gut wie alles umsetzen und nachbauen was du dir vorstellen kannst!

In dieser kostenlosen Videoanleitung (knapp 20 Minuten) zeige ich dir 3 unschlagbar geniale Funktionen von Divi, mit denen

  • du viel Zeit sparen kannst
  • deine Website einheitlich geändert werden kann für einen wesentlich professionelleren Eindruck
  • du dein Layout ganz individuell festlegen kannst und dich nicht von WordPress einschränken lässt!
Divi Features

Parallax und weitere coole Effekte für deine Website – mit Divi, Divi Plus und Canva

Parallax und weitere coole Effekte für deine Website – mit Divi, Divi Plus und Canva

In dem folgenden Video stelle ich dir 5 Effekte vor, die deine Website aus der Masse hervorstechen lassen:

  • Parallax Hintergrundbilder
  • Animationen für Elemente
  • Transformationen für Elemente – z. B. Buttons in anderer Form
  • Unterstrichene Überschriften
  • Besondere Bildformen – ovale Bilder und mehr

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Für mehr coole Tipps für Divi und den Divi Builder hol dir den Divi Powerkurs.

Parallax Hintergrundbilder

Wenn du einem Hintergrund den Parallax Effekt einstellst, sieht es beim Scrollen so aus, als ob der Hintergrund stehenbleibt und nur die Elemente darauf weitergescrollt werden. Das bringt mehr Tiefe in deine Website und macht die Website animierter, interaktiver. 

Um dies bei Divi einzustellen, klickst du beim blauen Abschnitt (Sektion) auf das Zahnrad und klappst den Teil „Hintergrund“ aus. Dann wählst du ein Hintergrundbild und stellst weiter unten ein „Parallax“. Es gibt 2 unterschiedliche Möglichkeiten: 

Parallax Effekt bei Sektion
  • Echte Parallaxe – hierbei scrollt das Hintergrundbild noch leicht mit
  • CSS (Standbild) – hierbei bleibt das Hintergrunbild komplett stehen

Hast du den Effekt schonmal ausprobiert?

 

kostenlose Videoanleitung:

3 geniale Divi-Funktionen, die du unbedingt kennen MUSST!

Mit dem powervollen Divi-Theme für WordPress kannst du für deine Website so gut wie alles umsetzen und nachbauen was du dir vorstellen kannst!

In dieser kostenlosen Videoanleitung (knapp 20 Minuten) zeige ich dir 3 unschlagbar geniale Funktionen von Divi, mit denen

  • du viel Zeit sparen kannst
  • deine Website einheitlich geändert werden kann für einen wesentlich professionelleren Eindruck
  • du dein Layout ganz individuell festlegen kannst und dich nicht von WordPress einschränken lässt!
Divi Features

WordPress aktualisieren – wie gehe ich vor?

WordPress aktualisieren – wie gehe ich vor?

Eigentlich bin ich ja Verfechter der „Alles kann, nichts muss“-Philosophie. Aber wenn es um die Sicherheit der Website geht, gibt es leider doch ein paar Pflichten. Ganz vorne gehört dazu: Plugins, Themes und WordPress selbst müssen regelmäßig aktualisiert werden. Da mich hierzu immer wieder (besorgte) Fragen erreichen, habe ich dir dazu diesen Blogartikel erstellt und ein Video aufgenommen, in dem ich diese (mindestens monatliche) Wartung zeige.

Die wichtigsten Schritte für die regelmäßige WordPress-Wartung:

Die folgenden Schritte solltest du mindestens einmal pro Monat durchführen. Im Video zeige ich die Aktualisierung Schritt für Schritt:

  • Backup machen (z. B. mit Updraft Plus)
  • die Plugins aktualisieren – falls es viele sind oder große Versionssprünge, ruhig nur eins nach dem anderen aktualisieren und nach jedem testen, ob alles noch gut aussieht und funktioniert
  • die Themes aktualisieren
  • WordPress selbst aktualisieren
  • dann alle Unterseiten aufrufen und prüfen, wichtige Funktionen prüfen wie z. B. Kontaktformular, Newsletteranmeldung, Links
  • Website auch vom Handy aus aufrufen – sieht alles noch gut aus und funktioniert?
  • Super, dann hast du wieder etwas Ruhe!
  • Plugins zur Unterstützung sind z. B. Limit Login Attempts Reloaded für mehr Sicherheit und der Broken Link Checker, der defekte Links meldet.

Video: WordPress aktualisieren – so gehst du vor:

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Die monatliche Website-Wartung kannst du auch bei mir buchen, damit du damit gar keine Sorgen damit hast und deine Website in sicheren Händen weißt.