DruckversionFließtext und Abstände
Fließtext und Abstände
Mindestens genauso wichtig wie die Wahl einer adäquaten Schriftart ist die Gestaltung der Abstände, und zwar sowohl innerhalb der Absätze als auch dazwischen.
Die folgende Abbildung zeigt einen Ausschnitt aus dem PeeWee-Blindtext. Die Schriftart ist "Lucida Sans Unicode" bei 13 px, hat also bereits keine Serifen mehr, aber der Text hat keine definierte Zeilenhöhe und keinen Abstand zwischen den Absätzen. Achten Sie beim Surfen mal darauf: Solche schlecht lesbaren Texte gibt es wirklich.
Fließtext ohne Abstände
In der nächsten Abbildung sehen Sie denselben Text, nur dass alle p-Absätze margin-bottom: 1em und line-height: 1.5 bekommen haben:
Fließtext mit line-height und vertikalen Abständen
Wenn Sie die erste Zeile eines Absatzes etwas einrücken möchten, können Sie das mit der Eigenschaft text-indent machen. Positive Werte verschieben den Text nach rechts, negative nach links. Zum Beispiel: p { text-indent: 1em; }
Kurze Übung: Fließtext lesbar gestalten
Die im vorhergehenden Abschnitt beschriebenen Maßnahmen sollen jetzt für den Textbereich der Beispielseiten umgesetzt werden. Im Basisordner für dieses Kapitel finden Sie ein paar Webseiten und Stylesheets, die bis jetzt wie folgt aussehen:
Schlecht lesbar - Serifen und ohne Abstände
Öffnen Sie das Stylesheet bildschirm.css und fügen Sie im Abschnitt " /* Übung: Gestaltung des Fließtextes */" ab ca. Zeile 115 folgende Styles hinzu:
/* Schriftart und Zeilenhöhe für den Textbereich definieren */
#textbereich {
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
line-height: 1.5;
}
#textbereich h2 { font-family: Georgia, Times New Roman, serif; }
#textbereich p { margin-bottom: 1em; } Beachten Sie, dass die Maßangabe für line-height ohne eine Einheit dahinter steht. Die 1.5 bedeutet "das Anderthalbfache der Schriftgröße". Und so sieht der Text jetzt aus:
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.
@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.