Gestern war ich im Blumenladen und musste zwei Blumensträuße besorgen: einen für den Geburtstag einer Kollegin und den anderen für den Sonntagsbesuch bei meiner Oma – den einen klassisch, den anderen modern. Für die beiden Damen habe ich versucht, das passende auszuwählen – damit’s eben auch gefällt, nicht wahr? Gestern im Blumenladen, heute auf unserer Website, wähle ich, in diesem Fall aber für unsere Buyer Persona, das passende Webdesign aus. Dazu gehört nicht nur das Layout, sondern ein wesentliches Element einer Website ist die Schrift. Deshalb gebe ich heute ein paar Tipps, welche Schriften man für die Website am besten auswählt!
Schrift ist die Basis jedes User-Interface, und jeder kommt täglich im Web damit in Kontakt. Vielleicht haben Sie schon eine Hausschrift für Ihr Unternehmen oder sind gerade dabei ein neues Corporate Design inklusive Schrift entwickeln zu lassen. Hervorragend, denn mit Schrift lässt sich schon viel über die Marke sagen, denn Schrift ist ein wesentlicher Baustein eines Markenauftritts. Deshalb die Überschrift: »Schrift ist nicht nur Mittel zum Zweck«, sondern allein mit dem Design der Typografie kann man schon eine Geschichte erzählen. Wählen Sie die Schrift deshalb sorgfältig aus, denn sie sollte in allen Medien, sowohl im Print und Online gut lesbar sein. Außerdem soll sie zu Ihrem Unternehmen und der Branche passen.
Grundsätzlich gibt es zwei Arten von Schriften: Schriften mit Serifen, »Antiqua« und serifenlose Schriften, »Grotesk«, lässt man mal die Schreibschrift außen vor. Doch was ist der Unterschied?
Bei einer Serifenschrift haben die Buchstaben quer zur Grundrichtung eine feine Linie, sogenannte „Füßchen“, sodass das Auge bei der Zeilenbildung unterstützt wird. Diese Abschlussstriche fördern einen guten Lesefluss, da die Buchstaben besser ineinandergreifen. Deshalb sind Serifenschriften wegen der besseren Lesbarkeit besonders gut für Fließtexte geeignet. Soll eine Serifenschrift allerdings auf der Website eingesetzt werden, empfehlen sich mindestens 16 pt, denn sonst „verschwimmt“ die Schrift wegen der Schnörkel und Serifen und die Schrift wird besonders im „Kleingedrucken“ unlesbar. Leider haben die Serifenschriften ein kleines Imageproblem, denn sie wirken oft ein bisschen angestaubt oder konservativ. Aber meiner Meinung nach sind sie gerade deshalb zum Beispiel für Traditionsunternehmen gut geeignet und schaffen schon allein durch die Typografie eine passende Atmosphäre.
Während im Fließtext meist eine Serifenschrift ausgewählt wird, sieht man in Headlines in den meisten Fällen eine serifenlose Schrift. Bei der Kombination von beiden Schriftarten muss man ein bisschen Vorsicht walten lassen, damit die Website insgesamt nicht zu unruhig wirkt. Man sollte maximal zwei, höchstens drei verschiedene Schriften einsetzen. Gut eignen sich deshalb Schriftfamilien, in denen es sowohl Serifen als auch serifenlosen Schriftschnitte gibt. In solchen Schriftfamilien haben die Schriftschnitte dann ähnliche Proportionen und harmonieren miteinander.
Eine serifenlose Schrift, auch als Grotesk bezeichnet, besitzt einfach geformte, schnörkelose Glyphen. Durch diese Geradlinigkeit wirken sie klarer und moderner als Serifenschriften. Dank ihrer Simplizität sind sie auch in kleinen Schriftgrößen sehr gut lesbar. Wegen dieser Universalität werden die Serifenlosen auf Websites gängigerweise sowohl im Fließtext, als auch in den Headlines verwendet. Bei kurzen Bildbeschreibungen oder kurzen Absätzen auf Internetseiten leidet die Lesebarkeit durch den Einsatz von serifenlosen Schriften deshalb nicht.
Webfonts sind Schriften, die auf einer Website dargestellt werden und nicht lokal auf dem Endgerät installiert sein müssen. Früher standen nur einige sichere Systemschriften wie Arial, Georgia, Times New Roman, Verdana und Lucida Sans zur Verfügung, da diese meistens auf allen Computern installiert waren. Wenn man andere Schriften verwenden wollte, mussten diese als Grafiken eingebettet werden, was Suchmaschinenoptimierung erschwerte.
Heutzutage haben wir Zugriff auf eine viel größere Auswahl an Schriften. Webfonts können von einem Server geladen werden, entweder zusammen mit der Website oder von einem externen Schrift-Server wie Google Fonts oder Adobe Fonts. Dies ermöglicht eine flexiblere und kreativere Typografie auf Websites.
Es gibt speziell für das Web optimierte Schriften, die im Web Open Font Format (WOFF) vorliegen. Diese Schriften sind so gestaltet, dass sie sowohl in Bezug auf Leserlichkeit (Unterscheidbarkeit der Buchstaben) als auch Lesbarkeit (Lesefluss und Verständlichkeit des Textes) optimal sind. Wählen Sie Webfonts, die gut auf verschiedenen Bildschirmgrößen und -auflösungen funktionieren, und testen Sie sie auf verschiedenen Geräten, um sicherzustellen, dass sie in allen Situationen gut lesbar sind. Bekannte Anbieter wie Google Fonts und Adobe Fonts bieten eine breite Auswahl an hochwertigen Webfonts.
Ob Sie nun eine Serifen- oder serifenlosen Schrift wählen: stimmen Sie die Auswahl auf Ihre Zielgruppe ab und bleiben Sie Ihrem Unternehmen treu. Sie muss zu Ihnen passen. Bedenken Sie aber, dass nicht jede Schrift für das Lesen am Screen geeignet ist. Aufgrund der Hintergrundbeleuchtung am Display kommt es manchmal bei schwarzer Schrift auf hellen Hintergründen zu Überstrahlungen, sodass die Schrift rein optisch dünner wirkt und dadurch schwieriger zu lesen ist. Andersherum genauso: Weiße Schrift auf dunklem Hintergrund wirkt oft fetter, als sie eigentlich ist, und wer will das schon?? Zu harter Kontrast führt oft zu einer schwerer Lesbarkeit. Ein dunkles Grau für die Schrift auf einem hellen, nicht ganz weißen Hintergrund ist da schon besser. Vermeiden Sie auch Komplementärkontraste, zum Beispiel Blau-Orange, fängt die Schrift am Monitor an zu flimmern.
Achten Sie darauf wie viele Wörter in einer Zeile stehen – es sollten maximal 70 Zeichen sein. Sind es mehr, leidet die Lesbarkeit des Textes darunter, denn der Anfang der nächsten Zeile ist bei längeren Zeilen schwer zu finden, und wegen des Contents sind Ihre Websitebesucher ja da. Für responsive Websites wird die Zeilenlänge dann zum Beispiel angepasst, indem sie verkürzt wird, wenn weniger Platz, zum Beispiel auf einem Smartphone, zu Verfügung steht.
Ebenso wie die Zeilenlänge ist der Zeilenabstand von Bedeutung. Je nach verwendetem Webfont muss auch der Zeilenabstand angepasst werden, denn manche Fonts haben zum Beispiel höhere Buchstaben als andere. Für Displays gilt ein Abstand von 145 Prozent bei einer Schriftgröße von 16 Pixel als Empfehlung.
Die Kombination von Schriften ist entscheidend für ein ansprechendes Webdesign. Hier sind einige Tipps:
Kontrast: Kombinieren Sie serifenlose Schriften (Sans-Serif) mit Serifenschriften. Zum Beispiel passt Arial gut zu Times New Roman.
Harmonie: Wählen Sie Schriften aus der gleichen Schriftfamilie oder mit ähnlichen Merkmalen, um ein harmonisches Gesamtbild zu erzeugen.
Hierarchie: Nutzen Sie unterschiedliche Schriftgrößen und -stile (normal, kursiv, fett), um eine visuelle Hierarchie zu schaffen.
Zweck: Passen Sie die Schriftarten dem Kontext an, z. B. eine verspielte Schrift für kreative Seiten und eine seriöse Schrift für professionelle Inhalte.
Die Schriftgröße für Webfonts hängt vom verwendeten Webfont und dessen Proportionen ab. Eine gängige Größe für Fließtext ist etwa 16 Pixel. Für die Überschrift H1 gilt in der Regel das 2,5-fache der Fließtextgröße. Schriftgrößen können auch in relativen Einheiten wie EM, REM oder Prozent angegeben werden, anstatt in starren Pixelwerten. Dadurch passen sich die Schriften flexibel an die Browsergröße an und verbessern die Lesbarkeit auf verschiedenen Geräten.
Die H1 ist Ihnen sicherlich schon mal begegnet, wenn nicht auf der Website, dann bestimmt in einem Word-Dokument. Auf Websites kann man die Überschriften (Headlines) genauso strukturieren. Man hat die Auswahl von H1 bis H6, wobei die H1 aus SEO-technischen Gesichtspunkten nur einmal auf jeder Seite vorkommen sollte. Die Suchmaschinen werten die H1 nach ihrer Relevanz im Hinblick auf die Suchanfragen aus. H2 bis H6 sind Zwischenüberschriften, die den Text logisch gliedern sollen, dass heißt der Reihenfolge nach verwendet werden sollten. Ein gut strukturierter Text mit einigen Zwischenüberschriften und sinnvoll gesetzten Absätzen vereinfacht das Lesen ungemein.
Webfonts werden in der CSS-Datei (Cascading Style Sheets) aufgelistet. Man gibt auch Fallback-Schriften oder Default-Schriften an, falls die Webfonts nicht geladen werden können. Ein Nachteil ist die längere Ladezeit durch Webfonts, die sich durch optimierte Kompressionsverfahren wie WOFF 2.0 oder durch Reduzieren nicht benötigter Schriftschnitte minimieren lässt. Alternativ kann man Systemschriften verwenden, um Ladezeiten zu verkürzen.
Ich hoffe, ich konnte Ihnen einen kleinen Einblick in die Verwendung von Webfonts auf der Website geben. Für die Umsetzung eines Corporate Design auf der Website sind Hausschriften nämlich genauso wichtig zur Wiedererkennung wie das Logo eines Unternehmens. Mehr zum Thema Branding finden Sie in unserem kostenlosen Branding Guide. Und ich freue mich jetzt auf ein Stück von dem Geburtstagskuchen meiner Kollegin …