Eine geeignete Schriftart macht deine Website nicht nur visuell viel interessanter. Fonts beeinflussen entscheidend, ob Textabschnitte ignoriert oder gelesen werden. In diesem Beitrag zeige ich dir, wie du den perfekten Font für deine Website findest!

Gute Typografie ist das Ergebnis jahrelanger Auseinandersetzung mit Fonts und Design. Ein paar grundlegende Tipps können dir allerdings dabei helfen dein Auge entsprechend zu schulen und den passenden Font für dein Webprojekt zu verwenden.

Die allererste Website …

Oder: Was passiert, wenn du eine Website ohne CSS lädst. Früher wurden die Websites in den Schriftarten dargestellt, die im jeweiligen Betriebssystem integriert waren. Diese werden auch heute noch geladen, wenn auf den Font nicht zugegriffen werden kann. Die allererste Website ist noch heute online und sieht genauso aus wie zur Liveschaltung im Dezember 1990:

Wie die Website in deinem Browser dargestellt wird, hängt dabei nicht von der Website ab – sondern von dem Betriebssystem, das du verwendest. Und davon, ob du Veränderungen in den Default Settings vorgenommen hast.

Bei Windows Nutzer:innen werden Serif Fonts standardmäßig in Times New Roman dargestellt. Bei Mac OS X sind es dagegen Times oder Times Roman. Arial wird von Windows als Sans Serif Schriftart verwendet. Mac OS X greift hier auf Helvetica zurück.

Zach Leatherman hat ein Projekt entwickelt, in dem er verschiedene Betriebssysteme und die dazugehörigen Fonts getestet hat. Das Tool Font Family gibt dir einen interessanten Einblick in die Fallback Fonts – und wie diese im Endeffekt aussehen. 

Georgia und Verdana

Gegen Mitte der 1990er kamen zu den Standard Fonts schließlich noch Georgia und Verdana hinzu, welche von Matthew Carter extra für das Web designt wurden. Mit einer kargen Auswahl von fünf Fonts gute Websites zu bauen, ließ aus der Not heraus eine heutzutage fragwürdige Angewohnheit entstehen: So wurden Schriftarten, die es im Web üblicherweise nicht gab, als Bilddatei eingebaut.

Die Nachteile davon liegen auf der Hand:

• Die geeignete Darstellung auf verschiedenen Geräten kann dabei in mühselige Kleinstarbeit ausarten.
• Die Wörter können nicht per Suchfunktion entdeckt oder übersetzt werden.
• Hinzu kommt, dass jede Textänderung einen enormen Mehraufwand darstellt.

Designing for the Unknown

Glücklicherweise ist die Technologie mittlerweile schon sehr viel weiter gereift. Trotz allem ist ein fundamentales Wissen im technischen Bereich auch hier notwendig. Denn es ist wichtig zu verstehen, was auf deiner Website passiert, wenn der gewünschte Font nicht verfügbar ist. Dies kann verschiedenen Gründe haben. Zum Beispiel eine schlechte Internetverbindung, die dazu führt, dass deine CSS-Datei verzögert geladen wird.

Im Gegensatz zum Grafikdesign gilt im Web: Schlechte (unpassende) Schrift ist besser als gar keine Schrift.

Während du dich damit auseinandersetzt, welcher Font deine Seite visuell am besten unterstützt, gilt es daher auch grundlegende technische Fragen zu stellen:

• Wird dein Text auch dann angezeigt, wenn die CSS-Datei nicht geladen wird? 
• Ist deine Seite auch in den Standard Serif und Sans Serif noch lesbar? 
• Lieferst du einen alternativen Font mit? Wie wird diese dargestellt? Kannst du noch weitere Einstellungen vornehmen, die dir mehr Kontrolle über deine Fallback-Schriftarten geben?

Denn zuallererst kommt es darauf an, dass die Inhalte überhaupt angezeigt werden. Dabei ist die generelle Lesbarkeit das A und O bei der Wahl der Typo. 

Interessante Grundlagen zum Thema FOUT vs. FOIT (wann der Font geladen wird) gibt Robin Rendle in seinem Artikel Loading Web Fonts with the Web Font Loader.

Weitergehende Informationen zum Thema findest du hier:

• https://www.filamentgroup.com/lab/font-events.html
• https://css-tricks.com/almanac/properties/f/font-size-adjust/

Woher kommt dein Font eigentlich?

Nachdem du dich nun mit den technischen Hintergründen und Fallback Fonts beschäftigt hast, bleibt noch ein ganz wichtiger Aspekt. Nämlich der, woher dein Font eigentlich geladen wird. Wie zuvor angedeutet, besitzt jedes Betriebssystem seine eigenen Standard Fonts. Dazu kommt, dass jede:r Nutzer:in Fonts auf dem Computer installieren kann. Welche also vorhanden sind – oder eben nicht, ist unmöglich zu wissen. 

Um unsere Websites nicht nur in Arial und Times New Roman darstellen zu müssen, greifen wir immer häufiger auf Web-basierte Font Services zu. Der Vorteil ist offensichtlich: Die Einschränkungen, die wir durch die Verwendung von Standard Fonts haben, werden umgangen. Die Auswahl an verfügbaren Fonts wird gesteigert.

Die wohl bekanntesten hier sind Google Fonts (kostenfrei) und Adobe Fonts (kostenpflichtig). Es gibt aber noch andere Anbieter. Denn gerade in Deutschland führen die verstärkten Datenschutzrichtlinien häufiger dazu, dass eine Alternative zu Google gesucht wird. Dabei werden nicht nur Fonts zum Einbetten angeboten, sondern auch Plattformen, die deine Fonts für dich hosten, sodass deiner Kreativität keine Grenzen gesetzt sind. Voraussetzung ist natürlich, dass du die Rechte oder Lizenzen besitzt.

Smashing Magazine hat verschiedene Anbieter ausprobiert und seine Erfahrungen hier gesammelt.

Design Elemente von Fonts

Um dich für einen geeigneten Font zu entscheiden, solltest du einige Eigenschaften von Typografien kennen. Dabei kann man grundlegend sagen, dass Paragrafen aus gut lesbaren Schriftarten bestehen sollten. Wird es zu anstrengend, hört der:die Besucher:in deiner Seite auf zu lesen. Die von dir präsentierte Information wird nicht konsumiert. 

Ein weiterer Aspekt hierbei ist, darauf zu achten wie sich die Schrift verändert, wenn sie verkleinert wird. Denn ein Font, der auf dem Desktop gut lesbar ist, könnte in kleinerem Format auf dem Mobiltelefon schlecht lesbar sein. 

Hierbei gibt es Indikatoren auf die du achten kannst und die dir bei der Wahl der geeigneten Schrift helfen.

x-Höhe

In folgendem Beispiel siehst du drei verschiedenen Beispiele. Die x-Höhe beschreibt die vertikale Höhe des Buchstaben x. Ist diese zu klein, wird der Text schwerer zugänglich, vor allem bei kleineren Schriftgrößen. Ist die x-Höhe zu groß, wird es schwieriger, zwischen Groß- und Kleinbuchstaben zu unterscheiden.

Apertures

Apertures sind die Öffnungen, die wir in Buchstaben finden. Generell gilt: Je großzügiger diese ausfallen, desto angenehmer sind lange Textabschnitte mit dieser Schrift zu lesen.

Letter Spacing und Kerning

Während Letter Spacing den allgemeinen Abstand zwischen den Buchstaben beschreibt, verstehen wir unter Kerning den Abstand zwischen bestimmten Buchstaben. Dieser Abstand kann durch die natürliche Form der Buchstaben größer sein als zwischen anderen:

Gleichmäßige Abstände lassen deinen Font harmonischer wirken. Dadurch wird sie besser lesbar. Beides kann im übrigen auch per CSS angepasst werden, solltest du das Gefühl haben, dass bei der von dir gewählten Font noch Nachbesserungsbedarf besteht:

.kerning {font-kerning: normal;}

.spacing {letter-spacing: 0.1em;}

Terminals, Ascenders und Descenders

Terminals kommen in den Buchstaben a, ä, c, f, j, r und y vor:

Ascenders und Descenders sind ähnlich, meinen allerdings die Verlängerungen bei zum Beispiel f, q und j:

Bei ihnen gilt: Je unscheinbarer sie sind, desto weniger eignet sich deren Verwendung bei ausgeprägten Texten. Gerade bei Serif Fonts sind Terminals, Ascenders und Descenders besonders gut ausgeprägt, weswegen diese Schriftarten lange Zeit als sicherer Kompromiss für längere Textabschnitte galt.

Kontrast

Schriftarten mit viel Kontrast (links) sind ungeeigneter für kleine Schriftgrößen, wie sie in Paragrafen verwendet werden und eignen sich besser für Überschriften.

Bold und Italic

Bei der Wahl deiner Fonts solltest du zudem darauf achten, dass diese in verschiedenen Stärken und Stilen zur Verfügung stehen. Denn nicht vorhandene Schriftstile werden vom Browser unter Umständen gefälscht und können dann so aussehen:

(Jeweils rechts der vom Browser “gefälschte” Schriftstil)

Anhand dieser Kriterien kannst du nun die Body Font für deine Website suchen. Da die Wahl dieser in der Regel komplizierter ist und es hier mehr zu beachten gibt, empfehle ich, damit anzufangen und die Heading Font(s) basierend auf der Body Font zu wählen (und nicht andersrum).

Einen umfassenderen Überblick sowie weitere Begriffserklärungen bekommst du hier: https://www.shillingtoneducation.com/blog/what-is-typography/.

Serif, Sans Serif und Monospace

Es gibt eine große Auswahl an Kategorien für Schriftarten. Die drei gängigsten dabei sind wohl

• Serif, zum Beispiel Times New Roman
• Sans Serif, zum Beispiel Arial
• Monospace, zum Beispiel Source Code

Bei Font Kombinationen gibt es zwei einfache Vorgehensweisen, die du befolgen kannst. Diese sind kein Muss, sondern lediglich Richtlinien, die dir helfen können. Insbesondere wenn du noch nicht viel Erfahrung in der Kombination von Fonts haben solltest:

1. Verwende denselben Font für den Body und die Headings – aber verändere die Stärke, das Letter-Spacing und die Größe, zum Beispiel Lato:

2. Kombiniere eine Serif und eine Sans Serif Font miteinander, zum Beispiel Baskerville und Open Sans:

Zudem gibt es ein Online Tool, mit dessen Hilfe du schnell verschiedene Font Kombinationen entdecken und ausprobieren kannst: https://fontjoy.com/#.

Fazit zu Typografie im Web

Ein anderes wichtiges Thema, das ich komplett außen vor gelassen habe, ist die Verwendung von Farben. Je nachdem, ob sich deine Schrift auf einem hellen oder dunklen Hintergrund befindet, wirkt sie natürlich anders. Auch kannst du Font Variationen erzeugen, indem du dieselbe Schriftart nimmst und nicht nur in verschiedenen Stärken darstellt, sondern auch andersfarbig. Bei der Wahl der Farbe solltest du den Style Guide und das Branding deiner Marke nicht außer Acht lassen.

Zur Inspiration eignet es sich neben der Analyse von anderen Websites auch, sich mit den momentanen Trends zu beschäftigen. Zwar wirst du schnell merken, dass sich bestimmte Font Pairings hier immer wiederholen und es wenig Neues gibt. Je nach Projekt und Anforderungen kann es allerdings nötig sein, eher auf Bekanntes zurückzugreifen als besonders innovativ zu sein – in diesem Beitrag findest du weitere Details.

Weitere Ressourcen zum Thema

• Mehr zum Thema Farbenlehre: https://rb001.dev.360vier.net/blog/webdesign-development/web-design-principles/
• Alles über professionelle Web Typography: https://prowebtype.com/
• Variable Fonts für Responsive Design: https://alistapart.com/blog/post/variable-fonts-for-responsive-design/