Texte lesbarer gestalten

CSS-Akademie

Lange Fließtexte sind eine Herausforderung für jeden Webdesigner. Mit den richtigen CSS-Formaten für Schrift und Absätze verbessern Sie die Lesbarkeit deutlich.

  1. CSS-Akademie
  2. Teil 2: CSS-Akademie
Webdsign: CSS-Akademie

© Archiv

Webdsign: CSS-Akademie

Lange Textwüsten, die sich über mehrere Bildschirmseiten erstrecken und die gesamte Breite des Browserfensters ausfüllen, schrecken viele Surfer ab. Besonders kleinere Schriften werden pixelig angezeigt, bei umfangreichen Texten müssen die Besucher je nach Größe des Fensters ständig nach unten oder zur Seite scrollen.

Können Sie bei Ihrer Website nicht auf längere Textpassagen verzichten, dann bieten Sie den Lesern zumindest eine bessere Orientierung und mehr Flexibilität bei der Anzeige. Mit CSS geben Sie Ihrem Fließtext eine Struktur. Und Schrift sowie Absätze lassen sich mit zusätzlichen Formatangaben weiter optimieren. Wir zeigen Ihnen nun Techniken und Kniffe, mit denen sich öde Textwüsten in einladende Lese-Oasen verwandeln lassen.

Optimale Zeilenbreite

Bei der Lesefreundlichkeit eines Textes spielt die Länge der Zeilen eine wichtige Rolle. Dabei sind zu kurze Textzeilen genau so unangenehm wie zu lange. Die optimale Zeilenlänge auf Webseiten liegt bei rund 60 Zeichen. Es gibt jedoch keinen Formatbefehl, der zeilenabhängig von der Zahl der Buchstaben umbricht. Mit den CSS-Eigenschaften "minwidth" und "max-width" lässt sich jedoch für die Breite eines Absatzes ein minimaler und maximaler Pixelwert festlegen. Fügen Sie dazu die folgende Formatklasse zwischen den Befehlen " und "" im -Bereich Ihrer Webseite oder in eine externe CSS-Datei ein:

CSS-Akademie

© Archiv

Rosige Zukunft: Mit CSS 3 erzeugen Sie Spaltensatz mit einem einzigen Befehl
.fliesstext {max-width:350px;
?min-width:300px;}

Stellen Sie dann den kompletten Fließtext gleichzeitig in einen Abschnitt ein:

<div class="fliesstext">... Text ...
?</div>

Ändern Sie die Größe des Browserfensters, so passt sich die Breite des Textes innerhalb der vorgegebenen Grenzen an. Die Browser Firefox und Opera unterstützen die Minimal- und Maximalbreite bereits seit einigen Versionen.

Der Internet Explorer berücksichtigt diese Formate jedoch erst seit der aktuellen Version 7 und auch nur, wenn Sie Ihre Seite im so genannten Strict-Modus definieren. Beginnen Sie den Quelltext dazu mit der folgenden Zeile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD
?HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.
?dtd">

Möchten Sie mit Ihrem Seitenlayout auch noch Rücksicht auf Nutzer vorhergehender Browserversionen nehmen, dann verwenden Sie eine der gängigen Browserweichen und definieren Sie die Breite des Textabschnittes fest mit

.fliesstext {width:350px;}

Für eine bessere Lesbarkeit des Textes gilt zudem folgende Faustregel: Je länger eine Zeile ist, desto größer sollte der Zeilenabstand sein. Erhöhen Sie den Abstand zwischen den Zeilen daher beispielsweise mit der zusätzlichen CSS-Angabe "line-height:135%;" um einige Prozent.

Komfortabler Spaltensatz

Bei den nun kürzeren Zeilen bietet es sich an, den Fließtext auf der Seite mehrspaltig anzulegen. Bisher mussten Sie ein solches Spaltenlayout jedoch noch mühsam mit Tabellen konstruieren. Das kostet viel Aufwand und das Ergebnis ist zudem sehr unflexibel, da die Inhalte bei Änderungen des Schriftgrades oder der Fenstergröße nicht automatisch neu umbrechen. Auch gewiefte Lösungen mit CSS-Containern und dem float-Attribut bieten kein zufrieden stellendes Ergebnis.

CSS-Akademie

© Archiv

Rosige Zukunft: Mit CSS 3 erzeugen Sie Spaltensatz mit einem einzigen Befehl

Beim zukünftigen Standard CSS 3 gehört dieses Problem jedoch der Vergangenheit an. Mit speziellen Formatbefehlen lassen sich im Handumdrehen professionelle Spalten zaubern. Fügen Sie den entsprechenden Bereich Ihrer Webseite dazu in einen gesonderten Abschnitt ein:

<div id="spalten">... Inhalt der
?Spalten ... </div<

Mit dem folgenden Stil formatieren Sie den Abschnitt beispielsweise dreispaltig:

#spalten {column-count:3;}

Für etwas Abstand zwischen den Spalten sorgen Sie mit der Eigenschaft "columngap: 20px". Legen Sie die Höhe des Spaltenbereichs zudem mit "height:300px" fest. Der Internet Explorer unterstützt dieses CSS-3-Format noch nicht.

Bei Firefox lässt sich das Ergebnis der Formatierung jedoch schon nutzen. Sie müssen die neuen CSS-3-Formate für den Mozilla-Abkömmling jedoch vorläufig noch mit dem Präfix "-moz-" einbinden. Notieren Sie den CSS-Stil daher in der folgenden Langfassung:

#spalten1 { 
column-count:3; 
column-gap:20px; 
-moz-column-count:3; 
-moz-column-gap:20px; 
height:300px; 
}

Serifenlose Schrift verwenden

Für umfangreiche Online-Texte sollten Sie ausnahmslos auf serifenlose Schriften wie Arial oder Verdana zurückgreifen. Diese Schriften sind in normaler Textgröße deutlich besser zu lesen, als die mit kleinen Verzierungen versehenen Serifen-Schriften.

CSS-Akademie Teil 3

© Archiv

Markantere Überschriften: Mit Kapitälchen formatiert, fallen die Überschriften noch besser ins Auge.

Beachten Sie bei der Schriftauswahl unbedingt, dass nicht jeder Font auf jedem System zur Verfügung steht. Windows-Rechner verfügen über andere Standardschriften als beispielsweise Macintosh-Systeme. Kombinieren Sie daher ähnliche Schriften nach dem folgenden Muster:

CSS-Akademie Teil 3

© Archiv

Blickfang: Beginnen Sie den ersten Absatz eines Abschnittes mit einem großen Buchstaben.
body {font-family: verdana, "trebuchet
?MS", helvetica, sans-serif;}

Steht eine Schriftart auf dem jeweiligen Rechner des Surfers nicht zur Verfügung, so greift der Browser auf die nächste in der Reihe zurück. Sollte im Ausnahmefall keine der namentlich benannten Typen installiert sein, so wird mit "sans-serif" eine schnörkellose Ersatzschriftart verwendet.

Möchten Sie sich bei der Auswahl einer geeigneten Schrift für Ihre Website zuerst einmal einen Überblick verschaffen, dann nutzen Sie den Service von Typetester unter http://typetester.maratz.com. Hier lässt sich ein frei definierbarer Mustertext zum Test mit beliebigen Schriftarten und Zeichen- sowie Absatzformaten anzeigen.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".