Was muss bei Schriften im Web beachtet werden?

Kategorie: Internet Tipps

Schriften im Web sollten gut lesbar sein und zum Layout der Webseite passen. Ist die Schriftart optimal gewählt, können die Informationen besser vermittelt und somit die Besucher zufriedengestellt werden. Gute Lesbarkeit führt zu einer niedrigeren Absprungrate und zu einer  höheren Verweildauer auf der Website,  dadurch wiederum verbessert sich die Position im Ranking der Suchmaschinen und die Seite wird häufiger gefunden und bekommt mehr Besucher.

Inhalt

Serifen oder serifenlose Schrift

Grundsätzlich wird zwischen Schrift mit Serifen und serifenlosen Schriftarten unterschieden. Als Serifen werden die dünnen Linien bezeichnet, die am Ende der Buchstaben quer zur Grundrichtung verlaufen.

Text mit Serifen
Text ohne Serifen

Durch die Linien am unteren Ende der Buchstaben ist es für den Leser bei Serifenschriften einfacher mit den Augen die Zeile zu halten und längere Texte zu lesen. Insbesondere Zeitungen oder Bücher verwenden daher meist Serifenschriften. Außerdem scheinen bei Serifenschriften die Buchstaben enger beieinander zu stehen. Dieser Effekt sorgt in Kombination mit der imaginären Linie am unteren Ende der Buchstaben für eine gute Lesbarkeit der mit Serifenschriften abgedruckten Texte.

Für Webschriften gelten jedoch andere Gesetzmäßigkeiten. Serifenschriften sind für den Druckbereich entwickelte Schriften, die daher in Printprodukten auch besser lesbar sind als auf Bildschirmen. Serifenschriften wirken oft altmodischer als die speziell für Computer bzw. das Web entwickelten serifenlosen Schriften.

Für bestimmte Unternehmen können Serifenschriften durchaus passend sein, handelt es sich beispielsweise um ein Unternehmen, welches auf Tradition viel Wert legt, kann aus gestaltungstechnischen Gründen eine Serifenschrift auf der Webseite verwendet werden, um schon durch die Typographie die Tradition des Unternehmens in den Mittelpunkt zu rücken. Die Webpräsenz eines Antiquitätenhändlers kann daher auf Serifenschriften setzen, während bei einem Computerhändler, die moderneren serifenlosen Schriften eingebaut werden sollten.

Außerdem wirken Serifenschriften oft zu dünn und besonders bei kleinerer Schriftgröße oder niedriger Bildschirmauflösung verpixelt und dadurch unsauber. Durch die immer bessere werdenden Monitore ist dieser Effekt mit den Jahren allerdings immer schwächer geworden, so dass Serifenschriften nicht nur im Printbereich, sondern auch auf Bildschirmen gut lesbar sind.

Grundsätzlich sollte man für Fließtexte im Web serifenlose Schriften verwenden, während für besondere Elemente wie beispielsweise Überschriften auch Schriftarten mit Serifen zum Einsatz kommen können. Dies hat sich über die letzten Jahre als Webstandard so eingebürgert und wie bei allen anderen Webstandards sollte nur in begründeten Ausnahmefällen davon abgewichen werden.

Der optimale Zeilenabstand

Der Abstand zwischen den Zeilen, der durch den CSS-Befehl line-height festgelegt wird, sollte sorgfältig ausgesucht werden. Ist dieser Zeilenabstand zu klein wirkt der Text gedrungen, ist der Zeilenabstand zu groß wird der Text schwerer lesbar. Eine eindeutige Zahl für die Zeilenhöhe zu empfehlen ist relativ schwierig, weil dieser Wert nicht nur von der Größe der Schrift, sondern auch von der Länge der Zeile abhängt. Als Orientierung kann allerdings ein Wert von 1.4 oder 1.5 genommen werden. Das heißt, wenn die Schrift 20 Pixel hoch ist, beträgt bei einer line-height von 1.5 bzw. 150% die gesamte Zeilenhöhe 30 Pixel.

Bei einer Zeilenhöhe 1.0 wirkt der Text sehr gedrungen.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Bei einer Zeilenhöhe von 1.5 ist der Text gut lesbar.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Während bei einer Zeilenhöhe von 2.0 der Text zu auseinandergezogen ist.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Die richtige Zeilenbreite

Um eine angenehme Lesbarkeit zu erreichen, ist die Wahl der richtgen Zeilenbreite für den Fließtext ein entscheidendes Kriterium. Bei zu geringer Zeilenbreite wird der Leserhythmus durch den ständigen Zeilenwechsel gestört und es kann kein richtiger Lesefluss entstehen. Während es bei zu langer Zeilenbreite nur schwer möglich ist konzentriert zu lesen ohne die Orientierung zu verlieren. Daher empfiehlt sich auch hier ein Mittelweg. Als Richwerte kann man sich an einer Zeilenbreite von 550 bis 750 Pixeln, 70 bis 95 Zeichen und 10 bis 16 Wörtern pro Zeile orientieren.

Schriften im Web sollten gut lesbar sein und zum Layout der Webseite passen. Die Schriftart so gewählt werden, dass diese beiden Kriterien erfüllt sind. Schließlich sollen die zu vermittelnden Informationen und nicht die Schrift im Vordergrund stehen.

Die erste Zeile der linken Box hat:
28 Zeichen, 5 Wörter und 250 Pixel Breite

Die erste Zeile der unteren Box hat:
95 Zeichen, 16 Wörter und 726 Pixel Breite

Schriften im Web sollten gut lesbar sein und zum Layout der Webseite passen. Die Schriftart so gewählt werden, dass diese beiden Kriterien erfüllt sind. Schließlich sollen die zu vermittelnden Informationen und nicht die Schrift im Vordergrund stehen.

Die Verwendung von Großbuchstaben/Versalien

Texte in Großbuchtaben/Versalien sollten nur mit Bedacht eingesetzt werden, weil sich in Großbuchtstaben geschriebene Texte schlechter lesen lassen, als Texte bei denen nur der erste Buchstabe groß geschrieben wird. Worte werden in ihrer Gesamtbedeutung erfasst und nicht einzeln Buchstabe für Buchstabe, Texte in Versalien wirken daher sehr gleichförmig und können vom Gehirn schwerer verarbeitet werden. Großbuchstaben sind alle gleich hoch, es ist deshalb für das Auge komplizierter sich zu orientieren und die Erfassung der Bedeutung des Wortes dauert etwas länger.

Das Auge erkennt zunächst nur die groben Umrisse der Buchstaben, diese Umrisse sind bei Großbuchtaben sehr ähnlich, daher braucht das Gehirn einen minimal längeren Zeitraum um diese Begriffe zu deuten.

VERSALIEN    Versalien

Aus diesem Grund hat die Stadt New York 2010 damit begonnen 250.900 Verkehrsschilder auszutauschen und die bis dahin rein in Großbuchstaben geschriebenen Schilder durch Schilder mit Gemischtschreibung zu ersetzen. Broadway statt BROADWAY soll die Verkehrssicherheit erhöhen und ist der Stadt voraussichtlich 27,6 Millionen Dollar (110 Dollar pro Schild) wert. Quelle: Blog MediaAnalyzer

Verwandte Beiträge

VPN erklärt

Ein VPN (Virtual Private Network) ermöglicht durch einen VPN Server eine sichere Internetverbindung und schützt so die persönlichen Daten (wie IP Adressen) vor Zugriffen von unbefugten Dritten. Inhalt Wozu dient

Das Client-Server-Modell erklärt

Experten verbinden Computer in Netzwerken, um die Kommunikation der Teilnehmer zu vereinfachen den Datenaustausch zu erleichtern mehrere PCs auf ein externes Gerät (Drucker, Festplatte, Server …) zugreifen zu lassen Die

Blockchain für Anfänger erklärt

Die Blockchain ist eine dezentrale Datenbank, die Informationen verwaltet, verändert und speichert. Eine Blockchain (Block-Kette) besteht aus mehreren Blocks (Datenblöcken). An den ersten Block hängen sich neue Blöcke, die jeweils

Was ist Browser-Caching?

Besucht ein User bei aktiviertem Browser-Caching eine Website, dann werden Teile dieser Seite (zum Beispiel Grafiken oder CSS-Dateien) im Browser-Cache gespeichert. Beim nächsten Besuch der Seite brauchen die Inhalte also

SSL-Verschlüsselung erklärt

SSL ist die Abkürzung für Secure Sockets Layer und sorgt für eine verschlüsselte Übertragung der Daten. Eine verschlüsselte Domains erscheint jetzt mit dem Zusatz https und einem grünem Schloss vor