Typografie im Webdesign: 6 Tipps für die passende Schriftart

Die Masse an Webfonts ist schier unendlich: Verzeichnisse und Webdienste wie »Google Fonts« oder »Fontsquirrel« bieten unzählige Schriften zum Download oder direkt zum Einbetten. Hinzu kommen professionelle Schriftenhäuser wie Linotype, Monotype und Myfonts. Dieser Überblick navigiert durch den Dschungel und listet Kriterien auf, welche Schriften sich für die Verwendung eignen.

Eine Schriftart ist ein wesentlicher Bestandteil des Corporate Designs. Das Corporate Design ist die visuelle Identität eines Unternehmens, eines Vereins oder einer Institution. Für eine Markenbindung und die Möglichkeit zur Wiedererkennung ist eine konsistente Erscheinung wichtig. Die Schrift muss sich dabei stimmig in das Corporate Design fügen und zu den Werten passen, die kommuniziert werden sollen. Oft wird sie als Wortmarke auch direkt im Logo verwendet.

Oft bietet sich an, Schriften zu kombinieren. Überschriften und andere Gestaltungselemente können durch eine Auszeichnungsschrift optisch hervorgehoben und abgegrenzt werden. Damit kann der Gesamtkontext oft schneller erfasst werden, »Augensprünge« fallen leichter.

Zwischen den verwendeten Schriften sollte es eine Harmonie geben — oder eine bewusste Disharmonie. Denn wenn sich zwei verwendete Schriften zu sehr ähneln, sieht deren gleichzeitige Verwendung wie ein Fehler aus. Beliebt sind deshalb auch Kombinationen aus Serifenschrift und serifenloser Schrift. Handwriting-, Monospace- oder andere Displayschriften eignen sich ebenfalls oft als Auszeichnungsschrift. Wenn die Mittellänge der Buchstaben beziehungsweise die x-Höhe der Schriften sich ähneln, lassen sich Schriften besonders ansehnlich kombinieren.

Vor der Verwendung lohnt ein Blick auf die verfügbaren Schriftschnitte. Sie unterscheiden sich im Wesentlichen in ihrer Schriftstärke. Die Spannbreite reicht von »thin«/100 bis »black«/900. Mit einer Entscheidung auf eine Schriftfamilie in dieser Größe behält man sich viele Gestaltungsmöglichkeiten vor. Mindestens die Schnitte »regular«/400 und »fett« beziehungsweise »bold«/700 aber bedarf die Verwendung im Fließtext üblicherweise. Für gleichzeitig kursive Auszeichnungen bedarf es jeweils noch einen weiteren Schriftschnitt (»italic«).

Besonders flexibel ist man mit einer variablen Schrift aufgestellt. Die Schriftstärke und andere Eigenschaften können dabei fein graduiert werden, man ist nicht auf festgelegte Schnitte angewiesen. Die browserseitige Unterstützung variabler Schriften ist aktuell noch dürftig, aber das wird sich in der nächsten Zeit ändern. Das hat den Vorteil, die Netzwerklast zu verringern, wenn nur noch ein einziger, variabler Schriftschnitt statt mehrerer Schriftschnitte geladen wird.

Bei der voreiligen Verwendung von Freefonts gibt es manchmal böse Überraschungen. Je nach Herkunft der Schrift fehlen beispielsweise deutsche Sonderzeichen wie Umlaute oder das Eszett. Bei der Verwendung werden diese Glyphen nicht oder nur sonderlich dargestellt. Deshalb sollte von vornherein genau geprüft werden, ob die Schrift alle relevanten Zeichen beinhaltet: Umlaute, Anführungszeichen, das Doppelkreuz (für Hashtags), Akzentzeichen, Währungszeichen et cetera.

Die Lesbarkeit (»Leserlichkeit«) ist nur zum Teil eine Frage des Geschmacks. Sie hängt von Schriftfarben und Schriftgrößen ab und ist maßgebend für eine die Usability und teilweise auch für die Barrierefreiheit. Ob längere Texten beim Lesen als angenehm, richtig und störungslos empfunden wird, hängt auch von der Wahl der Schriftart ab.

Wichtig ist ein gleichmäßiges Schriftbild. Die Schrift muss eine ausbalancierte Linienstärke besitzen, auch die Schriftschnitte sollten gleichmäßig verteilt sein. Ein Unterschied zwischen »regular« und »bold« sollte markant sein, aber nicht stören. Die Buchstaben, Zahlen und weitere Glyphen sollten zueinander stimmig wirken. Schlimmstenfalls sehen einzelne Buchstaben wie Fremdkörper aus und lassen die Schrift uneinheitlich aussehen.

Auch die Unterschneidung wirkt sich auf die Lesbarkeit auf. Die Unterschneidung bezeichnet den Raum zwischen zwei Zeichen. Ist er zu klein, wirkt die Schrift gequetscht. Ist er zu groß, wird nicht deutlich, ob der Raum Zeichen oder Worte trennt. Für ein gleichmäßiges Schriftbild müssen die Abstände zudem gleichgroß wirken.

Für die Lesbarkeit auf Bildschirmen werden allgemein serifenlose Schriften empfohlen. Das liegt vor allem daran, dass die Serifen nur grobkörnig auf den Displays gezeichnet wurden. Ich spreche ab dem Punkt bewusst im Präteritum, denn seit Entstehung dieser Weisheit haben sich die Pixeldichten nämlich stark erhöht. In der Gegenwart ist das meines Erachtens kein Lesbarkeitskriterium mehr.

Hinsichtlich der Lizenz gibt es große Unterschiede zwischen den Webfonts. Am einfachsten ist die »SIL Open Font License« (OFL) erklärt: Sie darf frei kopiert, frei verwendet, frei geändert und frei verbreitet werden. Wenige Ausnahmen schränken den Verkauf der Schrift als solche und die Weiterverbreitung einer geänderten Schrift unter gleichem Namen ein. Das ist für die Verwendung auf einer Website aber unproblematisch. Freefonts stehen deshalb fast immer unter der SIL Open Font License.

Viele Freefonts scheitern aber an den zuvor genannten Qualitätskriterien oder entsprechen nicht dem Geschmack. Der Kauf einer Schrift bei einem professionellen Schriftenhaus kann deshalb lohnen. Beachtet werden sollten die Möglichkeiten der Lizenzierung. Die Abrechnungsmodelle unterscheiden sich nach einmaliger Bezahlung und regelmäßiger Abrechnung nach Verwendung. In beiden Fällen wird der Preis für die Verwendung im Internet oft nach Seitenaufrufen gestaffelt.

Webfonts sind auch eine Frage des Datenschutzes! Schriften unter der SIL Open Font License lassen sich über den lokalen Webspace bereitstellen, bei kommerziellen Schriften kommt es im Einzelnen auf die Lizenz an. Andernfalls müssen Schriften über externe Server eingebettet werden. Dabei werden personenbezogene Daten übertragen. Die rechtssichere Verwendung sollte dabei genau geprüft werden.

Wenige Kriterien helfen dabei, eine Schrift zu finden, die für Ihr Projekt geeignet ist. Die Schrift mag nicht nur korrekt ausgewählt werden, sondern auch ansprechend inszeniert und eingesetzt werden. Eine logische Hierarchie von der größten Überschrift zum Marginaltext bedarf einige Überlegungen, macht sich in der Usabilitity aber auf den ersten Blick positiv bemerkbar. Für den zweiten Blick ist eine angemessene Mikrotypografie ausschlaggebend.