Eine Website besteht oft zu großen Teilen aus Text.
Und damit die ganze Mühe nicht vergebens war, die man in das Schreiben desselben gesteckt hat, sollen die Besucher den dann nach Möglichkeit auch lesen.

Es ist ziemlich abschreckend, einen unstrukturierten Block aus Tausenden von Buchstaben vor sich zu haben. Wesentlich besser ist es, wenn das Auge des Lesers Anhaltspunkte (Absätze, Hervorhebungen wichtiger Schlagwörter, …) hat, anhand derer es den Inhalt erfassen und ordnen kann.

Im Folgenden werden einige Methoden vorgestellt, wie du einen Text optisch strukturieren und somit angenehm zu lesen machen kannst – dies gilt dabei selbstverständlich nicht nur für’s Web, sondern für jeden Bereich, in dem du mit Typographie arbeitest.

Allen Möglichkeiten – die du natürlich frei miteiander kombinieren kannst – ist gemeinsam, dass gilt: weniger ist mehr.
Wenn jedes zweite Wort bunt, fett gedruckt und unterschiedlich groß ist, dann wird nichts mehr besonders betont und der Leser steht wieder nur vor einem furchtbar chaotischen Text. ;-)

eine gut lesbare Schriftart

… ist das A und O.
Achte darauf, dass die Schrift weder zu klein, noch zu verschnörkelt ist und sich gut vom Hintergrund abhebt.
Es macht nicht wirklich Spaß, mit der Nase am Monitor kleben zu müssen, um etwas entziffern zu können. ;-)

Absätze und Zeilenumbrüche

Den ersten Schritt zur Strukturierung eines Textes stellen Zeilenumbrüche und Absätze dar.
Auf diese Weise verpackst du den Inhalt in logische Päckchen, die dem Leser dabei helfen, den Text schnell und einfach zu verstehen.

<p>Absatz</p>

Zeilenumbruch<br />

Einrücken

Einrücken bedeutet, dass eine oder mehrere Zeilen ein Stück weiter rechts beginnen als der übrige Text.
Dies kannst du entweder bei der ersten Zeile eines neuen Absatzes machen oder bei Textblöcken, zum Beispiel bei Zitaten.

margin-left: 15px;

Farben

Wichtige Wörter wie zum Beispiel Überschriften kannst du farblich hervorheben.
Hierbei solltest du Acht geben, nicht zu viele verschiedene Farben zu verwenden und auch wirklich nur die wichtigen Elemente zu kennzeichnen.

Elemente, die weniger wichtig sind, können hierbei auch ruhig eine weniger auffällige Farbe erhalten, die sich weniger vom Hintergrund abhebt als der sonstige Text. Sie sollten zwar dennoch gut zu lesen sein, aber der Kontrast kann ruhig niedriger ausfallen.

color: #333;

verschiedene Schriftgrößen

Bedeutende Elemente werden größer dargestellt als der Rest, da man sie natürlich eher wahrnimmt. Dies empfiehlt sich in erster Linie für Überschriften oder auch für Slogans oder sonstige wichtige Gestaltungselemente.

Dementsprechend kannst du weniger essentielle Angaben auch kleiner darstellen als den normalen Fließtext, etwa das Datum von Blogeinträgen.

h1 {
font-size: 2em;
}

span {
font-size: .5em;
}

das Schriftgewicht

Das Schriftgewicht gibt an, ob etwas fett gedruckt ist (bold), normal (normal) oder dünn (light). Auch hier erübrigt sich die Erklärung eigentlich – Wichtiges kannst du fett darstellen.

font-weight: bold;

der Schriftstil

Schräg gesetzt (italic) oder gerade, das ist hier die Frage. ;-)

font-style: italic;

Dekoration

Dass wichtige Bereiche oft unterstrichen werden, kennt man meist aus der Schule, wenn man einen Text mit einem Bleistift durcharbeitet.
Allerdings solltest du berücksichtigen, dass es sich im WWW eingebürgert hat, Links durch Unterstreichen zu kennzeichnen – von daher bietet es sich nicht so sehr an, Elemente zu unterstreichen, wenn sie keinen Link darstellen.

Du kannst ein oder mehrere Wörter in CSS entweder durch text-decoration: underline unterstreichen, oder aber komfortabler durch border-bottom. Im Falle von Border kannst du nicht nur festlegen, dass der Strich eine andere Farbe haben soll als der Text, sondern du kannst ihm auch eine variable Dicke sowie verschiedene Stile (durchgezogen, gestrichelt, gepunktet) zuweisen.

text-decoration: underline;
border-bottom:1px dotted #0f0;

verschiedene Schrifttypen

Es kann interesant sein, unterschiedliche Schrifttypen miteinander zu kombinieren – im Web läuft das im Grunde auf die Wahl zwischen serifenlosen Schriften (sans-serif) und Serifenschriften (serif) hinaus.

font-family: verdana, sans-serif;

Groß- und Kleinschreibung

… spielen ebenso eine Rolle wie Kapitälchen. In Großbuchstaben gesetzte Wörter fallen naturgemäß eher auf – angenehmer zu lesen und ebenso auffällig sind Kapitälchen.

text-transform: uppercase;
font-variant: small-caps;

Sperren

Zu guter Letzt kannst du den Buchstaben innerhalb eines Wortes auch einen größeren Abstand zueinander verleihen. Dies bezeichnet man als Sperren.

letter-spacing: 2px;