Deine Webschriften: So findest Du die perfekte Webtypografie

Webtypografie - Webschrift
Jennifer Weyers- exovia Gründerin
Founder, CEO
Marketing Webdesign
Aktualisiert: Juni 26, 2023

Webschriften haben für großartiges Webdesign enorme Bedeutung. Sie können bezaubernd schön sein, unauffällig minimalistisch, extravagant oder einfach nur nervend und unansehlich.

Wenn Du willst, dass Deine Texte gerne gelesen werden und sich Deine Schriften positiv auf Dich und Dein Unternehmen auswirken, dann lohnt es sich in die Geheimnisse der Webtypografie einzutauchen. Und damit zu allererst mit der Wahl derjenigen, die Dich im außen, im Web präsentiert: Deiner Webfont.

Bist Du bereit?

Los geht’s!

 

Webschriften: so findest Du die perfekte Schriftart

Zugegeben, es gibt Tausende von Schriftarten, die Du potenziell für Deine Website auswählen kannst. Doch was Du brauchst sind 1 bis 2 Schriften, die richtig gut zu Dir und Deinen Zielen passen.

Wie Du sie findest?

Mit den folgenden Leitlinien:

1. CI: Corporate Identity Webschrift

Gibt es in Deinen Unternehmen bereits ein wiedererkennbares Grafikdesign inklusive einer festgelegte Schrift. Die zum Beispiel in der Korrespondenz mit anderen, wie Briefen oder Prospekten verwendet wird? Oder sogar ein Design System für digitale Produkte?

Nein? Kein Problem, dann leg mit den nächsten Punkten einfach ein, zwei schöne Schriften fest, die Du dann auch im Printbereich gut nutzen kannst. Wenn Du willst, kannst Du die Abkürzung nehmen und direkt zum nächsten Punkt „Look & Feel“ springen.

Ja, Du hast eine Corporate Schrift? Super, dann nutz das auf jeden Fall. Denn wenn Web und Print harmonisch zusammenwirken und Dich wiedererkennbar im außen präsentieren, stärkt dass das Vertrauen in Dich sowie Deine Marke.

Sehr viele Schriften für den Printbereich gibt es inzwischen auch als Webschriften, jedoch nicht alle. Prüf daher direkt, ob es Deine Schrift auch als Webschrift gibt – hier reicht eine einfache Google Suche wie „Neue Helvetica Webfont“. Vielleicht hast Du sie auch bereits als Webschrift mitlizensiert, das merkst Du z.B. am Dateiformaten wie WOFF oder WOFF2, die typisch für Webschriften sind.

Deine Corporate Schrift gibt es fürs Web nicht oder Du möchtest keine laufenden Lizenzkosten? Dann lohnt es sich bei der folgenden Suche eine Schrift zu finden, die Deiner „Hausschrift“ sehr ähnlich sieht. Beispielsweise ist die Google Font „Robot“ ein ganz gutes Pendant zu Arial

Corporate Design - Typografie

 

2. Webschriften, die angenehm leicht zum Lesen sind

Im Vergleich zu Print werden im Web andere Schriften als angenehm empfunden – gerade was längere Textabschnitte angeht. Der Grund?

Bei längeren Printtexten wie in Büchern nutzen Verlage oft sogenannte Serifen-Schriften wie Times New Roman. Dank der Serifen gleiten unsere Augen quasi von Wort zu Wort in dem wir die einzelnen Wörter wie auf einer Linie wahrnehmen, auch wenn es diese Linien nicht gibt. Die Wörter, wie auch Ihr Sinn können so schnell erfasst werden.

Hier ein kurzes Beispiel was mit Serife gemeint ist

Webschriften - Typografie mit Serifen

Hier sieht man die „feinen“ Striche am Anfang und / oder Ende eines Buchstabens die von der Richtung des eigentlichen Buchstabenstrich abweichen: Die Serifen.

Auch wenn man das bei den heutigen Displays kaum für möglich hält, ist die Auflösung von puren Schriften im Druck bzw. Printbereich deutlich höher als die normaler Displayauflösung. Dass führt dazu, dass Serifen verpixeln und damit für das Auge unscharf werden. Was bei größeren Schriftgrößen nicht so viel ausmacht, die Lesbarkeit bei kleineren Schriftgrößen jedoch beeinträchtigt.

Um das zu vermeiden, solltest Du als Hauptschriftart – sprich insbesondere für Fließtexte, längere und kleiner geschriebene Texte –  gezielt auf serifenlose Schrift setzen.

Besonders beliebt sind hierbei z.B.

Webdesign Typografie - Verschiedene Schriftarten

 

Dafür kannst Du für größere Überschriften oder Akzente aber sehr gut eine zweite Schriftart aus dem Bereich der Serifen-Schriften hinzunehmen. Mehr zur optimalen Mischung gleich in Punkt 5.

 

3. Fonts: Look & Feel

Stell Dir vor, Du würdest ein paar neue Personen kennenlernen. Noch bevor Du sie richtig triffst, liest Du von jeder von Ihnen nur die Wörter „Look & Feel“. Bei 4 Personen, sähe das dann z.B. wie folgt aus:

Look & Feel - Typografie

 

 

Welche 4 Personen würdest Du damit verbinden? Wen würdest Du erwarten zu treffen?

Sicher nicht ein und die gleiche Person, oder?

Ob wir uns die Frage bewusst oder unbewusst stellen, wir entscheiden uns in Sekundenschnelle, ob wir eine Webschrift eher als modern ansehen, verspielt oder z.B. antik.

Je nachdem, wie Du mit Deinen Unternehmen und Deinen Themen rüberkommen willst, solltest Du Dich für eine stimmige Schriftvariante entscheiden.

Z.B. nehmen wir…

 

Zunächst die Serifen-Schriften.

Sie gelten zwar grundsätzlich als die älteren Schriftarten, können dadurch aber zum Beispiel auch mit antik-hochwertig, beständig, seriös, traditionell, teuer oder literarisch verbunden werden.

Die Serifen-Schriften Garamond gehört beispielsweise zu den am häufigsten verwendeten Schriften im Buchdruck. Kommt sie zum Beispiel für die Überschriften einer Buchhandlung zum Einsatz kann ein stimmiger Eindruck entstehen. Auch Wikipedia, sowie Zeitungen wie die New York Times, die Frankfurter Allgemeine oder die Wirtschaftswoche setzen auf unterschiedlicher Weise auf Serife-Schriften.

Sehr passend verwendet werden Serifen-Schriften zudem gerne für hochwertige Weine, Marken wie Swarovski, Modezeitschriften wie die Vogue oder Automarken wie Daimler, Mercedes-Benz.

Mit einer Serifen-Schrift gehörst Du also nicht unbedingt zu den „alten“ sondern bist durchaus in sehr guter Gesellschaft, je nachdem welche Zielgruppe Du ansprechen willst.

 

Die Serifenlosen-Schriften

Sie stehen für Klarheit, Modernität, Minimalismus, Fortschritt, Business, Sport und Technik. Kein Wunder, dass Sie daher sehr gerne von Marken wie Apple, Google, Siemens, Adidas, BMW oder auch LinkedIn verwendet werden.

Serifenlose Schriften sind auch die Variante „auf Nummer sicher“ gehen, da der Einsatz und die Wahl von Serifenschriften sowie Schreibschriften sehr gut durchdacht sein sollte. Das heißt, nicht, dass es egal ist, welche der vielen serifenlose Schriften Du wählst. Ganz im Gegenteil, es gibt auch hier sehr feine, aber entscheidende Unterschiede.

Aber für den Fall, dass Du nicht ganz den Geschmack Deiner Zielgruppe triffst, ist eine serifenlosen Schrift in der Regel besser zu verzeihen als eine Serifenschrift, da serifenlose Schriften inzwischen eher als natürlich und neutraler wahrgenommen werden.

Die kleinen, aber feinen Unterschiede der serifenlosen Schriften, können dafür sorgen, dass eine Schrift z.B. eher männlicher oder weiblicher, eher symmetrisch, dynamisch, elegant, oder jugendlich bzw. wie für Kinder (z.B. Pampers) gemacht wirken.

Am besten testen kann man die Wirkung immer am eigenen Namen. Hier hat man meistens am allerschnellsten ein Gefühl, ob einen die Schrift gefällt, ob Sie zu einem passt oder nicht.

Ruf z.B. die Google Fonts auf und schreibe dort (im unten rot unterstrichenen Feld) Deinen Namen und Du wirst schnell feststellen, wie unterschiedlich die Wirkung der Schriften sind und was Dir gefällt.

Google Fonts - Webtypografie - Web fonts

 

 

Die Schreibschriften & Fantasieschriften

Nicht zu vergessen sind auch Schreibschriften, auch wenn sie eher selten im Web vorkommen. Sie haben ihren eigenen Charme, da sie ein Plus an Charakter mitbringen und daher Texte persönlicher wirken lassen. Auch Kreativität, Fantasie und Verspieltheit können hierdurch zum Ausdruck gebracht werden. hier Da sie aber oft schwieriger zu lesen sind, sollte der Einsatz auch hier eher zusammen mit größeren Schriftgrößen in Überschriften, Zitaten oder für Highlights verwendet werden.

Besonders gut eignen sie sich daher zum Beispiel für Blocks, oder Websites im Bereich Coaching, Persönlichkeit und Familie.

Ein erfolgreiches Beispiel für Schreibschriften ist das Logo von Instagram

Zu guter Letzt:

Du giltst als Trendsetter, Dein Unternehmen als zukunftsweisend und innovativ? Dann kann bei der Wahl zwischen Serifenloser Schrift, Serifenschrift und Schreibschrift auch ein Blick auf die aktuellen und zukünftigen Trends helfen.

4. Der volle Zeichenumfang einer Webschrift

Leider wird oft vergessen, dass die Schriften weltweit von Designern erstellt wurden, damit Du sie jetzt verwenden kannst. Das ist ein enormer Mehrwert, den Du genießen kannst.

Allerdings hat die deutsche Sprache ein paar Besonderheiten, wie das ß.

So hat die Google Fonts Roboto einen sehr breiten „Zeichenschatz“ inklusive ß, während Muli – ebenfalls eine Google Fonts, kein ß aufweist, was man per Klick auf die Schrift wie hier sieht.

 

Schriftsatz, Charakter - Typografie im Web

 

Auch sogenannte Kapitälchen, also Buchstaben, die aussehen, wie Großbuchstaben, aber nicht die gleiche Höhe haben, sind eher selten.

Überleg Dir daher vor der Wahl der Schrift, welchen Schriftumfang Du brauchst, um nicht erst beim Schreiben später festzustellen, dass Dir ein Buchstabe fehlt.

 

5. Schriftkombinationen

Für die Kombination von Schriften gibt es 4 Aspekte, die Du auf jeden Fall beherzigen solltest, damit Deine Leser auch gerne lesen und deinen Text schnell greifen können:

„Weniger ist mehr“

Mehr als 2 Schriften wirken in der Regel eher ablenkend und irritierend als lesefreundlich und zielfördernd. Versuche daher Deine Schrift auf ein, bis maximal zwei Schriften zu reduzieren. Du möchtest bewusst nur eine Schrift? Super, dann achte auch innerhalb der Schriftfamilie darauf eher ein oder zwei Schriftschnitte miteinander zu kombinieren. Uber, LinkedIn WhatsApp gehen hier mit gutem Beispiel voran.

Logo & Schrift

Wenn Du ein Logo hast und hierfür eine ganz bestimmte Schrift verwendest, lohnt es sich, neben dieser Schrift maximal eine weitere für Deine Texte einzusetzen wie Google oder adidas. Idealerweise kannst Du Deine Logo-Schrift auch als normale Schrift verwenden, beispielsweise für Überschriften wie Wikipedia und Instagram, oder auch für Deinen kompletten Text wie Nivea.

Serifenlose plus

Von den Schriften, die Du wählst, sollte eine auf jeden Fall eine serifenlose Schrift sein, die Du idealerweise als Hauptschrift verwendest. Als Kombination eignet sich dann sowohl eine Serifenschrift wie auch eine Schreibschrift, die in etwas größerer Schrift z.B. für wirkungsvolle Überschriften eingesetzt werden kann.

Achte hierbei darauf, dass beide Schriften harmonisch zusammenwirken, die gleiche Stimmung ausdrücken und die Hierarchie immer klar ist. So dass z.B. die Schriftart für den Haupttext nicht dominanter wirkt als die Überschrift.

Apple verwendet beispielsweise hauptsächlich die serifenlose Schrift, hat aber auch eine Serifenschrift, die hiermit gut zusammenwirkt. Hier ein Screenshot des Zusammenspiels beider Schriften.

Webtypografie - verschiedene Schriften kombinieren

 

Vorsicht

es gibt Schriften, die im Web auf den No-Go-Listen weit oben stehen. Dazu gehören Comic Sans, Papyrus, Viner, Kristen, Curlz. Wenn möglich versuch hierauf zu verzichten, es sei denn gibt einen wirklich guten Grund dafür sie einzusetzen. Z.B. wenn Dir ihren ursprünglicher Sinn kennst und sie hierfür einsetzen willst, Du sie bereits im Logo verwendest oder bewusst provokativ an das Thema rangehen möchtest.

 

6. Kosten von Webschriften

Schriften sind etwas Wunderschönes. Sie ermöglichen uns, uns schriftlich auszudrücken, unsere Gedanken mit anderen zu teilen, Wissen weiterzugeben und mit anderen zu kommunizieren.

Doch inzwischen ist es so selbstverständlich geworden Schriften im Web zu verwenden, dass sich die meisten gar keine Gedanken darüber machen, dass jede Schrift einmal von einen Schriftdesigner erstellt wurde. Und zwar so, dass sie nicht nur für Menschen, sondern auch für Maschinen lesbar sind und in beliebiger Größe hochauflösend ausgespielt werden können.

Doch genau dadurch, dass es so normal geworden ist, fehlt oft das Bewusstsein, dass Schriften – auch wenn sie auf dem Rechner installiert sind – für den Gebrauch im Web lizensiert werden müssen.

Hier gibt es jedoch verschiedene Modelle, bei denen für jeden was dabei ist:

  • Im Web erhältliche lizensierbare Webfonts: Über Plattformen wie MyFonts oder Linotype können einzelne Schriften oder Schriftfamilien lizenzpflichtig erworben werden. Typischerweise kauft man hierbei die Lizenz nach Seitenaufrufe, die z.T. an eine Bestimmte Zeitspanne geknüpft ist.

Ein Beispiel: Du interessierst Dich wie ein Kunde unserer Webdesign Agentur für die Neue Helvetica. Dann kannst Du diese entweder als komplette Schriftfamilie kaufen, oder einen einzigen Schriftschnitt hiervon – wie z.B. die Neue Helvetica Pro 65 Medium. Nehmen wir an, Du entscheidest Dich für diesen einen Schriftschnitt, dann kann Du im nächsten Schritt auswählen, für wieviele Seitenaufrufe Du die Schriftlizenz kaufen möchtest – z.B. 250.000 Seitenaufrufe, die 4 Jahre gültig sind. Das kosten Dich derzeit bei MyFonts ca. 39,-€.

Viele kleine und mittelständische Unternehmen kommen hiermit die ganzen vier Jahre super aus.

  • Fonts im Abo: Adobe bietet dagegen alle Schriften im Rahmen des Creativ Cloud Abos an. Hier kannst Du theoretisch sehr viele Schriften verwendet, wie Du willst. Was z.B. sinnvoll sein kann, wenn Du mehrere Websites hast. Die Schriftarten sind hierbei so lange verwendbar, wie man das Abo fortführt. Die monatlichen Kosten liegen hier aktuell bei ca. 60,- €.
  • Freie Fonts: es gibt auch freie Webfonts, die Du unter der sogenannten Open-Source-Lizenz kostenfrei auf Deiner Website verwenden darfst. Der größte Anbieter kostenfreier Schriften ist Google. Unter Google Fonts findest Du fast 1.000 Schriften unterschiedlichster Schriftarten und mit unterschiedlichen Schriftschnitten und Zeichensätzen. Sehr gut sortier- und filterbar.

Die Schriften von Google sind sehr beliebt und stehen auch zum Download bereit, so dass Du sie nicht nur via Code in Deine Website einbinden kannst, sondern auch Datenschutzkonform über Deinen eigenen Server hosten kannst oder für den Printbereich verwenden kannst.

Neben Google gibt es auch weitere Anbieter, die mit kostenfreien Fonts werben. Hier würde ich jedoch sehr vorsichtig sein, da so mancher Anbieter darunter ist, der eigentlich kostenpflichtige Schriften bereitstellt. Den Nachweis, dass Du die Schrift rechtlich korrekt verwendest, musst jedoch Du selbst erbringen.

  • Maßgeschneiderte Fonds: wenn Du eine eigene Schriftart nur für Dich haben willst, kannst Du auch einen Schriftdesigner direkt beauftragen. Die Kosten hierfür dürften natürlich höher liegen, haben sich für die ein oder andere größere Marke aber sicherlich bezahlt gemacht.
  • Deine eigene Schrift: Wenn Du selbst eine wunderschöne Schrift hast, Lust auf Grafik, Typografie und Webwissen hast gibt es auch Kurse in denen Du lernen kannst, Deine eigene Webfont zu erstellen – für Dich und vielleicht auch für die Welt.
  • Schriftsätze: zu guter Letzt möchte ich an dieser Stelle auch auf System-Schriftsätze eingehen. Systemschriften wie Arial, sind Schriften, die direkt auf dem Rechner der Besucher installiert sind. Da auf Apple-Geräten andere Schrift, als auf Windows- oder Linux-Geräten installiert sind und für mobile Geräte nochmal andere Schriftarten typisch sind, gibt es keine Schrift, die es überall gibt. Arial ist hierbei aber deutlich am nächsten dran. Der Einsatz von Systemschriften für Websites führt daher immer dazu, dass Deine Besucher eine etwas andere Seite sehen können, weil Deine Seite im Zweifel bei Ihnen mit einer anderen Schriftart ausgespielt wird. Ein eher unschönes Phänomen.

Allerdings laden Systemschriften sehr schnell – auch bei schlechter Internetverbindung und es gibt inzwischen einen Schriftsatz, der sehr beliebt ist. Hierbei wird immer die vom jeweiligen Geräthersteller typische Hauptschrift verwendet. Bei Apple ist das im Moment z.B. die San Francisco, bei Android Roboto, bei Windows Segoe. Die Schriftarten sind wirken nicht nur harmonisch zusammen, sondern sind auch von den Besuchern gewöhnt und werden durchweg eher positiv wahrgenommen – was immer auch gut für die eigene Seite ist.

 

7. Ladezeiten von Schriften

Da wir gerade schon bei Ladezeiten waren: jede Schriftart und jeder Schriftschnitt, der geladen werden muss, verlängert insgesamt die Ladezeit jeder Deiner Seiten. Das wiederum kann Auswirkung auf die Geduld, Zufriedenheit und Lesefreude Deiner Leser haben und hierüber nicht zuletzt auch auf die Absprungrate und damit Dein Google Ranking beeinflussen.

Weniger Schriften und eine technisch optimierte Einbindung sind daher sowohl direkt für Deine Besucher, sowie für Deine Suchmaschinenoptimierung und damit schließlich auch für Dich sehr gut.