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