Teil 2: CSS-Akademie

Halten Sie die Schriftgrößen in Ihrem Webangebot flexibel, damit sich die Surfer den Text so groß einstellen können, wie sie es benötigen. Nutzen Sie dazu relative Einheiten wie "em" und Prozent. Absolute Maße wie Pixel (px), Points (pt), Zentimeter (cm) und Millimeter (mm) eignen sich wegen der fehlenden Skalierbarkeit und der Abhängigkeit von der jeweiligen Monitorauflösung nicht. Bewährt sich hat sich eine Kombination von Prozentwert und dem Maß "em" nach dem folgenden Beispiel:

Die Absätze sollten damit bei den meisten Browsern eine nahezu gleiche Größe haben. Zudem haben die Surfer volle Flexibilität bei der Skalierung. Vorsicht ist beim Maß "em" jedoch in verschachtelten HTML-Strukturen angeraten: Die relative Größe bezieht sich nicht auf das Grundmaß der Seite, sondern auf die Größe des Textes im übergeordneten Seitenelement.

Zeichenabstand vergrößern

Achten Sie bei der Farbgebung Ihres Fließtextes darauf, dass Sie bei Text und Hintergrund einen ausreichenden Kontrast und keine Komplementärfarben wie Rot zusammen mit Grün verwenden. Eine Kombination dieser Farben belastet die Augen. Zudem gibt es zahlreiche Surfer, die wegen Farbenblindheit keinen Unterschied zwischen diesen Farbtönen erkennen können.

Bei heller Schrift auf dunklem Grund wirken die Abstände zwischen den Buchstaben kleiner, als sie tatsächlich sind. Sie verbessern die Lesbarkeit eines solchen Textes, indem Sie den Abstand zwischen den Buchstaben vergrößern. Die so genannte Laufweite legen Sie mit dem CSS-Format "letter-spacing" fest. Wenden Sie das folgende Format beispielsweise auf alle Absätze Ihrer Webseite an:

Überschriften hervorheben

Fügen Sie zur Gliederung Zwischenüberschriften in längere Texte ein. Sie bieten dem Auge damit Fixpunkte, an denen es sich orientieren kann.

Mit besonderen Formaten lassen sich die Überschriften noch deutlicher vom übrigen Text abheben. Formatieren Sie sie beispielsweise gesperrt. Geben Sie dafür die folgende CSS-Formatklasse in den Quelltext ein:

Zwischen den Buchstaben der Überschriftenzeile werden kleine Abstände eingefügt. Weisen Sie das Format beispielsweise den Überschriften zweiter Ordnung zu:

Eine andere Möglichkeit: Gestalten Sie die Überschriften mit Kapitälchen. Dafür genügt die CSS-Angabe

Sämtliche Buchstaben werden in Großschrift dargestellt und die ursprünglichen Großbuchstaben erscheinen dadurch noch einen Tick größer.

Initialen zur Orientierung

Eine weitere Hilfe beim Lesen: Machen Sie die ersten Absätze eines Abschnittes ähnlich wie bei manchen Zeitungen mit Initialen kenntlich. Sie formatieren dabei den ersten Buchstaben etwas größer und gegebenenfalls in einer anderen Farbe. Nutzen Sie für Initialen die Pseudoklasse ":first-letter" nach dem folgenden Beispiel:.

Sie färben die Initialen damit in einem dezenten Dunkelblau und verdoppeln die Zeichengröße. Mit "float:left" lassen Sie den folgenden Text elegant um den großen ersten Buchstaben herumlaufen.

Markieren Sie die betreffenden Absätze, indem Sie ihnen die Klasse "abschnittstart" wie folgt zuweisen:

Zitate hervorheben

Auch Zitate oder sonstige Einschübe sollten Sie auf Ihren Seiten deutlich hervorheben. Dabei haben Sie mehrere Möglichkeiten: Gestalten Sie beispielsweise die Anführungszeichen zu Beginn und am Ende eines Zitats farbig. Oder rücken Sie das Zitat etwas ein. Beachten Sie bei den Anführungszeichen: Das Symbol, das Sie über den Tastenbefehl Umschalt + 2 eingeben, ist das Zollzeichen (""). Eleganter und typografisch richtig, gestalten Sie Texte jedoch mit den HTML-Codes „ (") und “ (") für die deutschen Anführungszeichen.

Ebenfalls zulässig und optisch sogar noch ansprechender: Mit den HTML-Zeichen » und » fügen Sie so genannte Guillemets in den Text ein. Diese französischen Anführungszeichen lassen sich wahlweise nach innen oder nach außen weisend einsetzen. Wichtig dabei: Trennen Sie Text und Guillemets jeweils durch ein Leerzeichen, da die Anführungszeichen ansonsten zu nah am Text kleben.

Noch deutlicher treten Zitate hervor, wenn Sie sie einrücken. Verwenden Sie dazu beispielsweise die folgende CSS-Formatklasse:

Das Zitat selbst notieren Sie dann wie folgt:

So erscheinen die Zitate dann übersichtlich und heben sich vom restlichen Text ab.