Fließtext gestalten per CSS

Text auf Webseiten sollte gut lesbar sein

3
(3)
Kommentar schreiben
Stand: 27. November 2008

Schriftgröße, Schriftart

Lesen am Bildschirm ist nicht angenehm. Das beginnt mit der im Vergleich zu Papier geringen Auflösung und endet damit, dass der Bildschirm einen festen Platz hat und dem Leser dadurch die Sitzposition vorschreibt. Text auf Webseiten sollte deshalb möglichst gut lesbar sein. CSS-Experte Peter Müller gibt dazu einige Anregungen.

Beispieldateien

Zum Üben und Selbermachen stehen Beispieldateien bereit. Das zip-Archiv enthält zwei Ordner: In "basis" finden Sie die Übungsdateien, mit denen Sie unmittelbar anfangen können zu arbeiten. Dem Ordner "fertig" entnehmen Sie, wie das Ganze am Ende aussehen sollte. - Download Beispieldateien (.zip, 36 KB)

Geeignete Schriftgröße wählen

Browser haben meist eine Standardschriftgröße von 16 px. Auch wenn es im Web erhitzte Definitionen über die ideale Definition der Schriftgröße gibt, ist folgende Regel einfach zu verstehen und ein guter Ausgangspunkt:

body { font-size: small; }  /* ergibt 13px */

Der Wert small macht den Text immer etwas kleiner als diese Standardeinstellung und ergibt 13 px, was auch im Zeitalter immer höher auflösender Bildschirme (besonders bei Notebooks) noch lesbar ist. Falls Sie eine Angabe in Prozent bevorzugen, sieht die CSS-Regel so aus:

body { font-size: 81.25%; } /* ergibt ebenfalls 13px */  

Überschriften sollten in den meisten Fällen sichtbar größer sein als der Fließtext, was Sie ausgehend von der für body definierten Schriftgröße am besten mit einer Prozentangabe erreichen. Wenn body eine Schriftgröße von 13px hat und die Überschrift 24px groß sein soll, können Sie die folgende Formel benutzen:

  • 24px/13px * 100% = 184,62%

Im CSS sieht das dann so aus:

Als Mitglied können Sie diesen Beitrag weiterlesen!

Werden Sie Mitglied und testen Sie akademie.de 14 Tage lang kostenlos!

In den ersten 14 Tagen haben Sie Zugriff auf alle Inhalte auf akademie.de, außer Downloads. Sie können in dieser Zeit ohne Angabe von Gründen stornieren. Eine E-Mail an service@akademie.de genügt. Nur wenn Sie Mitglied bleiben, wird der Mitgliedsbeitrag nach Ende der 14tägigen Stornofrist abgebucht.

Ich bin bereits Mitglied
Jetzt Mitglied werden und akademie.de 14 Tage kostenlos testen
Ich entscheide mich für folgende Zahlungsweise:
14 Tage Stornorecht:
Ich kann meine Mitgliedschaft in den ersten 14 Tagen jederzeit formlos stornieren, z.B. per E-Mail an service@akademie.de.

@anonym

Danke für das Kompliment zu "allen anderen" Artikeln. Zu Ihrem Kommentar:

zu 1) Gut zum Thema Schriftverbreitung ist die brandneue Analyse von Webmaster Pro (Februar 2009): http://tinyurl.com/bvpphn (führt zu webmasterpro.de).

Die "Web Core Fonts" von Microsoft sind meines Wissens auf jedem Mac installiert. Da sind Verdana, Georgia, Arial und diverse andere mit drin. Verbreitungsgrad laut Analyse von Webmaster Pro zwischen 98,3% und 99,5%. Außerhalb der "Web Core Fonts" ist die im Artikel erwähnte XP-Schrift "Tahoma" nur auf etwa 98,3% aller Rechner installiert.

Da die Lucida in beiden Varianten erwähnt wird, bezieht sich Ihre Kritik wohl auf die Vista-Schriften "Corbel" und "Constantia". Sie sind tatsächlich nur unter Vista vorhanden, dienen im Artikel in den Auflistungen und Abbildungen eher dazu, um mal einen Vergleich von klassischen zu modernen Schriften zu zeigen.

===
zu 2)
Ich bin kein Grafikdesigner, aber mein Auge findet Serifen-Fließtext (gerade die "Times") am Bildschirm immer noch ermüdender als Sans-Serifen wie "Lucida" oder "Tahoma". Die zitierten hochauflösenden Bildschirme haben doch nicht mehr als 100-120dpi, was gegenüber den 600-1200 dpi aus dem durchschnittlichen Laserdrucker eher wenig ist.

Zur Laufweite: Die ist auch unabhängig von Serifen bei den zitierten Schriftarten ziemlich unterschiedlich. "Georgia" benötigt viel mehr Platz als die klassische "Times" und pendelt sich ungefähr bei dem von "Arial" ein.

Im Gegensatz zu allen anderen bisher von Peter Müller gelesenen Artikeln finde ich diesen hier sehr enttäuschend:
1) Fast alle hier vorgestellten Schriften finden sich nur auf Windows-Rechnern. Daher ist es unsinnig, diese ohne die Angabe von Alternativen zu benutzen. Windows ist schließlich nur ein System under vielen.
2) Das zu Serifenschriften gesagte ist längst überholt. Zum einen sind die Bildschirme heute weit höher auflösend, so dass die Serifen problemlos dargestellt werden können. Zum anderen ist die Laufweite von Serifenschriften weit kürzer als die der unruhig wirkenden serifenlosen Schriften. Daher kann mit Serifenschriften weit mehr Inhalt auf gleichem Raum untergebracht werden, oder die Schrift kann einfach leicht vergrößert werden, was der Lesbarkeit zu Gute kommt. Serifenschriften sind auch lesefreundlicher. Das Auge ermüdet nicht so schnell und liest schneller. Nicht ohne Grund benutzen Tageszeitungen in der Regel die Times als Fließtextschrift.

Inhalt

Downloads zu diesem Beitrag

Über den Autor:

bild117259

Peter Müller, Dozent und Autor, beschäftigt sich bereits seit 1995 mit dem Web und veröffentlichte zahlreiche Bücher rund um das Thema Webpublishing. Seine Erklärungen sind nicht ausschließlich für E ...

Newsletter abonnieren