Ich weiß nicht, wie es dir geht. Aber bei mir war das Thema Branding (sprich Logo, Farben, Schriften) zu Beginn meiner Selbstständigkeit eine ganz schöne Herausforderung.
Gefühlt hat es eeewig gedauert, bis ich mich festlegen und mit Sicherheit sagen konnte: Ja, GENAU das bin ich (nachdem ich nach 2 Jahren doch nochmal alles umgeschmissen habe…).
Und so geht es vielen Selbstständigen zu Beginn.
Gerade als Personenmarke ist dein Branding DAS, was dein Business – und damit auch dich als Person – visuell repräsentiert.
… Deine Marke soll authentisch sein und zu dir passen.
… Dich gleichzeitig aber auch von der Masse abheben.
… UND natürlich deine Zielgruppe ansprechen.
Zugegeben: Keine einfache Aufgabe.
Und verständlicherweise wollen wir bei diesem Punkt der Website-Erstellung ganz besonders, dass es riiiichtig gut wird. Und sich auch richtig gut anfühlt.
Spätestens beim Thema Schriften kommen viele an ihre Grenzen:
Es ist ein bisschen, wie die Nadel im Heuhaufen zu suchen – schließlich gibt es 1000 verschiedene Schriftarten und so einiges, was du bei der Auswahl beachten solltest (rechtliche Dinge, Lesbarkeit, Ausdruck,…).
… Nehme ich kostenlose Schriften? Oder lieber doch welche kaufen?
… Welche Schriften passen zusammen? Und welche passen zu mir?
… Und wie sieht das eigentlich rechtlich aus?
FRAGEN ÜBER FRAGEN.
– die wir jetzt nach und nach in diesem Beitrag beantworten werden. Aber zunächst nochmal back zu den Basics:
Warum ist die Schriftart so wichtig für deine Website?
Unsere Marke hilft uns dabei, uns zu trauen, rauszugehen und uns zu zeigen.
Deine Branding soll dich denken lassen:
Ja, ich will mich zeigen. Das bin ich und ich bin unverwechselbar!
Die Wahl der richtigen Schriftart spielt dabei eine entscheidende Rolle: Schließlich muss deine Schrift zu deiner Marke und zu deiner Botschaft passen. Die Schriften, die du für deine Website verwendest, beeinflussen die Stimmung, den Charakter und die Lesbarkeit deiner Inhalte enorm.
Schriften helfen dir dabei, dein Branding zu stärken und eine einheitliche visuelle Identität zu schaffen.
Ich meine, überleg’ doch mal: Eine Arztpraxis mit einer unleserlichen, verschnörkelten Schrift auf der Website, die nach Mittelalter aussieht – würdest du da gerne einen Termin buchen?
Oder eine Grundschule mit einer Schrift, die absolut clean und trist aussieht und so, als hätte niemand Spaß und Freude, dahin zu gehen – würdest du dein Kind dort anmelden? Wohl eher nicht.
Du siehst, worauf ich hinaus will: Schriften sagen auch immer etwas über dein Business aus – genauso wie deine Farben oder deine Bildwelten.
Darüber hinaus haben Schriftarten natürlich auch eine praktische Funktion:
Eine gut lesbare Schriftart trägt dazu bei, dass deine Besucher problemlos durch deine Website navigieren können und deine Inhalte leicht verständlich sind.
Andersherum führt die Wahl einer ungeeigneten Schriftart dazu, dass deine Inhalte schlechter lesbar sind und deine Besucher*innen schnell das Interesse verlieren – und ruckzuck von deiner Website verschwinden (ich meine: Es gibt doch nichts Nervigeres, als eine Schrift, die man nicht auf den ersten Blick lesen kann, oder?).
Du möchtest also eine Schrift finden, die zu dir und deinem Branding passt, gut aussieht und bei der auch sonst alles stimmt? Gut!
Dann lass uns loslegen mit den 4 Schritten für deine passende Website-Schrift.
Schritt 1: Definiere zunächst deine Markenidentität.
Bevor du mit der Suche nach geeigneten Schriftarten für deine Website beginnst, solltest du zunächst deine sogenannte Markenidentität definieren. Denn das sollten dann auch deine Schriften später widerspiegeln. Was bedeutet das konkret?
→ Überlege dir, welche Werte, Eigenschaften und Stimmung du mit deiner Marke, also deinem Business, vermitteln möchtest:
- Möchtest du einen modernen und eleganten Eindruck hinterlassen?
- Oder klar, strukturiert und selbstbewusst?
- Oder doch eher eine verspielte und kreative Atmosphäre schaffen?
Diese Überlegungen zu deinen Werten und den Werten deines Business ist übrigens nicht nur für die Wahl deiner Schriftart wichtig:
Du solltest dir so oder so zu Beginn deiner Selbstständigkeit Gedanken darüber machen, denn schließlich ist es das, was dich und dein Unternehmen ausmacht und von anderen abhebt: Deine Werte und deine Persönlichkeit.
Das Thema gehe ich auch mit allen meinen Kund*innen an, BEVOR wir ihre Website gemeinsam erstellen. Und natürlich habe ich mir diese Gedanken auch zu meinem eigenen Business, meilenweit webdesign, gemacht. Meine 3 größten Werte sind beispielsweise Spaß & Leidenschaft (sozusagen ein bisschen Verspieltheit), Wertschätzung & Empathie (eine Zusammenarbeit auf Augenhöhe) und 3. Professionalität & Qualität. Genau das versuche ich mit meiner Marke (also insbesondere mit meinen Farben, Schriften, meinem Logo und meinen Bildwelten) widerzuspiegeln.
* kleiner Fun Fact am Rande: Mein Motto ist hier übrigens “smart statt hart” – denn so oft denken wir, dass wir besonders hart arbeiten müssten, um irgendwas zu erreichen. Ich liebe es aber, Dinge zu vereinfachen, Prozesse zu automatisieren und smarte technische Lösungen zu finden, um mir und vor allem auch meinen Kund*innen das Leben leicht zu machen.
Also: Falls du es noch nicht getan hast, nimm’ dir hier gerne etwas Zeit und schreibe deine 3 größten Werte auf, nach denen du deine Selbstständigkeit aufbauen möchtest.
Kleiner Tipp: Falls dir auf Anhieb keine einfallen, google mal nach “Werte finden für Business” oder Ähnliches – dann kommen ganz viele Beiträge mit Beispiel-Werten. Dann kannst du dich inspirieren lassen & dir intuitiv die Werte auswählen, die dir am meisten zusagen.
Merke dir an dieser Stelle: Die Schriftarten, die du dir später aussuchst, sollten zur Persönlichkeit und den Werten deiner Marke passen und diese unterstützen. Und genau deswegen solltest du dich hier erstmal grundlegend damit auseinandersetzen (falls du es noch nicht getan hast).
In meinem Blogartikel zur Website-Konzeption gehe ich übrigens genauer darauf ein, wie du deine Zielgruppe (also deine Wunschkund*innen) festlegst und dich in sie hineinversetzt. Das kann dir zusätzlich helfen, eine passende Schrift auszuwählen – schließlich sollte sie (und damit auch deine Werte) vor allem auch deine Kund*innen ansprechen.
Schritt 2: Verstehe die verschiedenen Schriftarten-Kategorien.
Es gibt verschiedene Kategorien von Schriftarten, die alle unterschiedliche Stimmungen und Zwecke repräsentieren. Hier bekommst du einen groben Überblick, welche Schriftarten es überhaupt gibt und wofür sie stehen, um dich im nächsten Step für eine Schriftart entscheiden zu können.
Ich meine, wie sollst du dich sonst auch entscheiden? Ein bisschen Grundlagenwissen hilft!
Hier findest du einen Überblick über einige der häufigsten Schriftarten-Kategorien:
1. Serifenschriften: Diese Schriftarten haben kleine Striche an den Enden der Buchstaben und vermitteln einen traditionellen, seriösen oder eleganten Eindruck. Sie eignen sich gut für formelle Websites oder Marken, die eine klassische Ästhetik bevorzugen.Einige Beispiele für häufig genutzte Serifenschriften sind z. B. Georgia, Times New Roman, Century School Book, Garamont, Bodoni, Libre Baskerville, Hahmlet (wo du diese Schriftarten findest, klären wir später).
Abb. 1: Beispiele für Serifenschriften
Fast alle Schriftarten gibt es übrigens in unterschiedlichen Ausführungen wie z. B. fett gedruckt oder kursiv.
2. Sans-Serif-Schriften: Im Gegensatz zu Serifenschriften haben Sans-Serif-Schriften keine Striche an den Enden der Buchstaben. Sie wirken modern, klar und oft auch minimalistisch. Sie sind eine beliebte Wahl für technologieorientierte Websites oder Marken, die ein zeitgemäßes Image vermitteln möchten.
Beispiele für beliebte Sans-Serif-Schriften sind: Montserrat, Roboto, Helvetica, Open Sans oder Raleway (das ist nur eine Auswahl – wie gesagt, alleine bei Google Fonts gibt es über 1000 verschiedene Schriftfamilien).
Abb. 2: Beispiele für serifenlose Schriften
Fast alle Schriftarten gibt es in unterschiedlichen Ausführungen wie z. B. fett gedruckt oder kursiv.
3. Skriptschriften: Skriptschriften ähneln handgeschriebenen Buchstaben – ähneln also individuellen Handschriften oder der Kalligraphie-Kunst. Diese Script Fonts sind ein beliebtes Stilmittel in der Gestaltung: Sie verleihen deiner Website einen persönlichen und eleganten Touch und werden oft für kreative oder künstlerische Marken verwendet. Du solltest sie allerdings nur sehr ausgewählt einsetzen, da sie oft schlecht lesbar sind.
Hier sind einige beliebte Skriptschriften: Dancing Script, Leckerli One, Popsies, Agatha, Stalemate…(das ist aber wirklich nur eine beliebige Auswahl – hier gibt es quasi keine Grenze nach oben!)
Abb. 3: Beispiele für Script Fonts
4. Display-Schriften: Display-Schriften sind auffällige, künstlerische Schriftarten, die oft für Überschriften oder Logos verwendet werden (“to display” = etwas zur Schau stellen). Sie können sowohl Serifen-Schriften als auch serifenlose Schriften sein. Display Schriften sind eher unkonventionell und können dazu beitragen, deine Website von anderen abzuheben. Achtung: Sie sie meistens nicht für den Fließtext geeignet, da sie die Lesbarkeit beeinträchtigen können. Verwende Display Fonts stattdessen gezielt als Hingucker.
Auch hier gibt es eine endlose Auswahl, also hier ein paar Beispiele für Display Fonts: Techna Sans (ohne Serifen), Pitch Display (mit Serifen), Quango, London, …
Abb. 4: Beispiele für Display Fonts
5. Monospace-Schriften: Monospace-Schriften haben einen gleichmäßigen Zeichenabstand und werden oft in der Programmierung oder für technische Zwecke verwendet. Sie sind ideal, wenn du Code-Beispiele oder andere monospaced Texte auf deiner Website darstellen möchtest. Sie können sowohl Serifen haben, als auch serifenlos sein: Sie zeichnen sich einfach nur durch ihre Gleichmäßigkeit & Symmetrie aus.
Das sind Beispiele für Monospace-Schriften: Base Monospace, Cousine, Cutive Mono, MonoLisa, Monospace
Abb. 5: Beispiele für Monospace Fonts
Achtung: Es geht hier nicht darum, dass du dir alle Schriftarten merkst. An dieser Stelle sollst du einfach erstmal einen Überblick und ein Gefühl dafür bekommen, was es überhaupt für Schrift-Kategorien gibt.
… Und mit diesem Grundwissen kommen wir jetzt zu DEINEM Business und die Wahl DEINER passenden Schriftarten:
Schritt 3: Finde passende Schriftarten für deine Website.
Sooo: Nun geht es darum, dir Schrift(en) für deine eigene Website auszusuchen. Grundsätzlich gilt:
Du solltest dir erstmal eine Schrift für deine Website aussuchen oder auch verschiedene Schriftarten kombinieren. Aber achte unbedingt darauf, dass du trotzdem eine einheitliche Erscheinungsbild behältst – d. h., dass deine Schriften zusammenpassen. Hier als Empfehlung von mir eine Faustregel aus dem Webdesign:
Es macht Sinn, maximal EINE Schriftart für Überschriften und EINE Schriftart für den Fließtext zu verwenden. Zusätzlich kannst du noch eine dritte Schrift als Zierschrift für ausgewählte Highlights verwenden (hierfür werden zum Beispiel oft Scriptschriften verwendet).
Aber merke dir:
Mehr als drei Schriften sollten es nicht werden. Denn dann wird es irgendwann zu wild und sieht einfach nicht mehr professionell aus.
In Schritt 1 hast du dir überlegt, welche Werte dich und dein Unternehmen widerspiegeln. In diesem Step suchst du jetzt nach Schriftarten, die diese Werte auch vermitteln.
Mit diesem Tool findest du passende Schriftarten
Eine super Möglichkeit, Schriftarten zu finden, die zu deinem Branding passen, bietet das Tool “Fontjoy”.
Fontjoy hilft dir dabei, Schriftarten zu finden, die gut zusammenpassen (ist aber komplett auf Englisch). Du klickst einfach oben auf “Generate” und dir werden beispielhaft Schriften vorgeschlagen (auf diesem kleinen Mond kannst du auch zu einer hellen Ansicht wechseln). Wenn dir eine Kombination gefällt, dann speichere sie mit einem Klick auf das Schloss-Icon (in der linken Leiste).
Wenn du dir eine Schrift(kombi) gefällt, klicke in der Leiste links auf die Schrift und du wirst meistens direkt zu einer Seite weitergeleitet, wo du die Schrift herunterladen kannst (mehr zu den Quellen für kostenlose Schriftarten erfährst du weiter unten). Falls du nicht direkt weitergeleitet wirst, müsstest du einmal in einem neuen Fenster nach der Schriftart googlen.
Kleiner Praxistipp: Lass dir in der Schriftenvorschau deinen wichtigsten Wert in verschiedenen Schriften anzeigen (wie z. B. “Vertrauen” in dieser Abbildung). Schau’ hier einfach mal, wo Optik und Inhalt für dich am besten zusammenpassen.
Abb. 6: Mein Unternehmenswert “Vertrauen” in unterschiedlichen Schriften. Wo passen Inhalt & Optik am besten zusammen?
Zusätzlich kannst du einfach mal auf anderen Websites (aus deiner Branche) oder auch auf Pinterest nach Inspiration suchen (ich liebe übrigens Pinterest – keine Ahnung, was Menschen gemacht haben, als es diese Seite noch nicht gab :-D).
Prüfe: Sind alle nötigen Zeichen in der Schriftart enthalten?
Ganz wichtig: Achte bei der Auswahl deiner Schriften auch immer darauf, dass alle Zeichen enthalten sind, die im deutschen Sprachgebrauch nötig sind. Manche Schriften haben nämlich einen eingeschränkten Zeichensatz, der zum Beispiel keine “ä”,”ö” , “ü” unterstützt. So eine Schrift ist dann von vornherein ausgeschlossen – du solltest sie auf keinen Fall nutzen.
Hier sind einige Quellen für kostenlose Schriftarten, die dir ebenfalls dabei helfen können, die richtigen Schriften für deine Website zu finden:
- Google Fonts (https://fonts.google.com/): Google Fonts bietet eine große Auswahl an kostenlosen Schriftarten, die einfach in deine Website integriert werden können. Du kannst nach Schriftarten filtern, um diejenigen zu finden, die zu deinem Markenimage passen. -> Übrigens meine Empfehlung für Anfänger*innen und auch die beliebteste Quelle.
- Adobe Fonts (https://fonts.adobe.com/): Adobe Fonts bietet eine umfangreiche Bibliothek an Schriftarten für den Einsatz in Webprojekten. Einige Schriftarten sind kostenlos verfügbar, während andere eine kostenpflichtige Lizenz erfordern.
- Font Squirrel (https://www.fontsquirrel.com/): Font Squirrel ist eine weitere beliebte Quelle für kostenlose Schriftarten. Hier findest du eine Vielzahl von Schriftarten, die du für deine Website verwenden kannst.
- Behance (https://www.behance.net/): Behance ist eine Plattform für Designer, auf der sie ihre Projekte präsentieren. Du kannst nach Schriftarten suchen und die Portfolios von Designern durchsuchen, um inspirierende Schriftarten zu finden.
Kostenloser Workshop
Die geheime Formel für eine Website, die regelmäßig Kunden für dich gewinnt
Du bekommst alles an die Hand, was du wissen musst, um mit einem erprobtem PLAN in dein Website-Projekt zu starten!
(PLUS eine Extra-Überraschung, wie du auch wirklich startest!)
Investiere eine Stunde deiner Zeit in deine Website, damit sie dir später ganz viel Zeit schenken kann und Kund*innen für dich gewinnt.
Schritt 4: Binde die ausgewählten Schriften Datenschutz-konform auf deiner Website ein.
“Google Fonts” ist eine sehr beliebte Quelle, um kostenlose und qualitativ hochwertige Schriftarten für deine Website zu finden.
Es gibt nur ein kleines Problem an der Sache (das sich aber leicht lösen lässt!):
Wenn du Schriften von Google Fonts nutzen willst, gibt es hier manchmal Probleme mit dem Datenschutz (vielleicht hast du schonmal von Abmahnungen gehört, die es deswegen gegeben hat?)
Aber keine Sorge: Du kannst deine Schriften so einbinden, dass es wirklich kein Problem mit dem Datenschutz gibt.
Warum ist Datenschutz-konforme Einbindung von Google Fonts wichtig?
In Deutschland gilt die Datenschutz-Grundverordnung (DSGVO), die den Schutz personenbezogener Daten regelt. Grundsätzlich ist das eine super Sache, weil es deine und meine Daten als Verbraucher*in schützt.
Auch bei der Verwendung von Diensten wie “Google Fonts” musst du sicherstellen, dass die Datenschutzanforderungen hier eingehalten werden. “Google Fonts” ist beispielsweise ein Service von Google (und die sitzen ja bekanntermaßen in Amerika, wo die DSGVO nicht gilt). Es ist aber so, dass die Schriftarten von Google standardmäßig über externe Server geladen werden (die nicht unbedingt in Deutschland sitzen). Und das kann dazu führen, dass Nutzerdaten von deiner Website an Google übertragen werden.
Bedeutet: Die Daten von allen Menschen, die auf deiner Website unterwegs sind. Und wenn diese Nutzer*innen vorher nicht eingewilligt haben, dass du das darfst, dann verstößt das gegen die deutsche Datenschutzbestimmung.
-> Deswegen solltest du das einfach bei der Einbindung von Google Fonts (also Schriften von Google) beachten.
Und jetzt erkläre ich dir Schritt für Schritt, wie das geht (wirklich nicht schwer!):
1. Wähle deine Schriftarten von Google Fonts aus.
Besuche die Website von “Google Fonts” (https://fonts.google.com/) und wähle die Schriftarten aus, die du für deine Website verwenden möchtest. Achte darauf, Schriftarten zu wählen, die zu deinem Branding und dem Design deiner Website passen (siehe oben).
2. Lade lokale Kopie der Schriftarten herunter.
Um die Datenschutzbestimmungen einzuhalten, lade zunächst die ausgewählten Schriftarten von Google Fonts herunter. Gehe dazu auf der Google-Fonts-Website zu der entsprechenden Schriftart und klicke auf den Button “Auswählen”. Wähle anschließend die gewünschten Schnitte (z.B. fett, kursiv) aus und klicke auf “Anpassen”. Unter dem Tab “Anpassen” findest du einen Link “Herunterladen”. Klicke darauf und speichere die ZIP-Datei mit den Schriftarten auf deinem Computer (z. B. auf dem Desktop oder in einem speziellen Ordner für deine Website).
3. Lade die Schriftarten auf deinen eigenen Server hoch.
Lade die ZIP-Datei mit den heruntergeladenen Schriftarten auf deinen Webserver hoch. Entpacke die ZIP-Datei und speichere die Schriftarten in einem Verzeichnis auf deinem Server. Notiere dir am besten den Pfad zu den Schriftarten, da du ihn später in deinem HTML-Code benötigst.
Schritt 4: Binde die Schriftarten in deinen HTML-Code ein.
Öffne den HTML-Code deiner Website und füge den folgenden Codeausschnitt in den Head-Bereich deiner Seite ein:
htmlCopy code
<style>
@font-face {
font-family: 'Font-Name';
src: url('/pfad/zur/schriftart/Font-Name-Regular.woff2') format('woff2'),
url('/pfad/zur/schriftart/Font-Name-Regular.woff') format('woff');
/* Füge
Tipp: Wenn du wie ich Divi nutzt, geht das noch viel einfacher und ohne, dass du selber an den Code dran musst. Wie das geht, erkläre ich natürlich ganz genau in meinem Website-Kurs.
Fazit: So kommst du zu deiner Traum-Schrift für deine Website
Wie du weißt, kann die Auswahl einer passenden Website ziemlich herausfordernd sein. Du benötigst aber passende Schriften, um dein Webdesign professionell und zu-dir-passend zu gestalten. Deshalb solltest du deine Schriften entsprechend deiner Markenidentität wählen, damit sie einen passenden Eindruck vermitteln und einfach ins Gesamtbild passen.
Dafür solltest du aber zunächst die verschiedenen Schriftarten-Kategorien verstehen und wissen, welchen Zweck sie erfüllen. Nur so kannst du die richtigen Schriftarten für deine Website auswählen 🙂
Es gibt eine große Auswahl an kostenlosen und kostenpflichtigen Quellen für Schriften. Die Herausforderung ist es, aus dieser Masse an Schriften die passenden für dich auszuwählen. Ich empfehle dir, Schriften von Google Fonts zu nehmen (ist einfach & kostenlos).
Binde deine Schriftarten im nächsten Schritt datenschutzkonform in deine Website ein. Insbesondere bei Google Fonts musst du sicherstellen, dass die Datenschutzanforderungen eingehalten werden. Das ist aber kein Hexenwerk & ziemlich einfach zu lösen: Durch das Herunterladen und Speichern der Schriftarten auf deinem eigenen Server kannst du verhindern, dass Nutzerdaten von deiner Website an externe Server übertragen werden. Dadurch kannst du Datenschutzverstöße vermeiden und die Vorgaben der DSGVO erfüllen.
… Denke daran, dass es auch andere Quellen für kostenlose Schriftarten gibt, die du erkunden kannst, um die perfekte Schriftart für deine Website zu finden.
Ich hoffe, mit diesem Beitrag bist du bestens gerüstet, um die passenden Schriftarten für deine Website auszuwählen und datenschutzkonform einzubinden. Wenn du mehr dazu wissen möchtest, hör’ dir unbedingt meine Podcast-Folge mit der Markenexpertin Susanne Kästner dazu an: So findest du die passenden Schriften für deine Website (Auf Spotify oder auf Apple Podcasts)
Und jetzt: Viel Spaß bei der Suche nach deiner passenden Schriftart! Klar ist das jetzt einmalig etwas Arbeit, aber du wirst sehen: Es lohnt sich! 🙂
