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:

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

Ä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:

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

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.

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:

Mit dem folgenden Stil formatieren Sie den Abschnitt beispielsweise dreispaltig:

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:

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.

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:

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 https://typetester.maratz.com. Hier lässt sich ein frei definierbarer Mustertext zum Test mit beliebigen Schriftarten und Zeichen- sowie Absatzformaten anzeigen.