5.5 Textgestaltung

URL: http://www.webdesign-referenz.de/designpraxis_textgestaltung.html

Inhaltsverzeichnis "Textgestaltung"
5.5.1 Einleitung
5.5.2 Grundsätze der Textgestaltung
5.5.2.1 Technische Aspekte
5.5.2.2 Inhaltliche Aspekte
5.5.3 Möglichkeiten der Strukturierung
5.5.4 Optische Gestaltungsmöglichkeiten
5.5.4.1 Spaltensatz
5.5.4.2 Schriftgrößen-Probleme

5.5.1 Einleitung

In diesem Kapitel geht es um die Kunst, Texte im WWW möglichst optimal zu präsentieren. Allzu umfangreich ist dieses Kapitel nicht, lesenswert ist es trotzdem.

Nach oben

5.5.2 Grundsätze der Textgestaltung

Zwei verschiedene Aspekte sind beim Gestalten von Texten zu beachten: Einerseits muss die technische Umsetzung gelungen sein, andererseits muss aber auch der Inhalt der Texte dem WWW angemessen sein.

5.5.2.1 Technische Aspekte

Sorgen Sie für gute Lesbarkeit. Angemessen große Schriften sind Pflicht, denn Mini-Schriftsätze sind schlecht lesbar. Kontraste zwischen Vorder- und Hintergrund müssen sein.

Gute Textgestaltung setzt auch immer eine deutliche optische Gliederung voraus: Setzen Sie Absätze und Haltepunkte für das Auge. Machen Sie Gebrauch von Zwischenüberschriften und heben Sie diese deutlich vom Rest ab.

Achten Sie auch darauf, die Textspalte(n) nicht zu breit werden zu lassen. Erreichen lässt sich das mit Tabellen, wie weiter unten beschrieben. Bleibt die Frage: "Was genau ist zu breit"? Natürlich sind die Grenzen hier fließend. Wenn Sie wollen, können Sie sich ja an der Breite des eBooks orientieren, die sollte einigermaßen angemessen sein. Beachten Sie auch die Grundregel: "Je breiter die Spalten, desto größer der Zeilenabstand". Festgelegt wird der mit CSS:



        <p style="line-height: 20px;">

        Zeile 1<br>

        Zeile 2

        </p>

Der Umkehrschluss gilt übrigens auch: wenn Ihr Text sehr schmal ist, sollten Sie den Zeilenabstand nicht erhöhen.

Wählen Sie auch die Art und Weise, wie Ihr Text gesetzt wird, bewusst aus. Blocksatz sieht zwar schön aus, ist aber aus diversen Gründen dem linksbündigen Flattersatz in Sachen Ergonomie unterlegen.

5.5.2.2 Inhaltliche Aspekte

Studien haben ergeben, dass Surfer im WWW nicht lesen, sondern überfliegen. Daher muss die optische Gliederung durch eine klare inhaltliche Gliederung unterstützt werden. Stellen Sie wichtige Aussagen und Schlussfolgerungen an den Anfang Ihrer Texte, denn der Surfer muss zu Anfang überzeugt werden, dass sich der Zeitaufwand, in den Text einzusteigen, sich wirklich lohnt.

Nach oben

5.5.3 Möglichkeiten der Strukturierung

Alle Fehler auf einmal: Schlechter Kontrast, zu kleine Schriftart, keine Strukturierung. Und solche Seiten gibt es wirklich! Um Texte zu strukturieren, gibt es verschiedene Möglichkeiten: So beispielsweise die Überschriften. Wir empfehlen, dafür die H-Tags zu verwenden und ihnen mit CSS eine passende Formatierung zu geben. Und wer Überschriften verwendet, kann in längeren Texten auch gleich ein Inhaltsverzeichnis erstellen:



        <a href="#headline1">Thema 1</a>

        ...

        <a name="headline1"></a><h1>Thema1</h1>

Wie Sie sehen, eignet sich die Anker-Technik von HTML hervorragend, um innerhalb einer Datei eine Inhalts-Navigation bereitzustellen.

Eine andere Möglichkeit der Strukturierung sind Listen: Die gibt es in verschiedenen Varianten, so z.B. die ungeordneten Listen (ul), die geordneten Listen (ol) und die Definitionslisten. Folgende Beispiele zeigen die Verwendung:



        Ungeordnete Liste:

        <ul>

        <li>Eins

        <li>Zwei

        </ul>

        Die gibt es auch mit anderen Aufzählungssymbolen:

        <ul type="circle">

        <li>Eins

        </ul>

        <ul type="square">

        <li>Zwei

        </ul>

        Eine nummerierte Liste:

        <ol>

        <li>Eins

        <li>Zwei

        </ol>

        Und eine Definitionsliste:

        <dl>

        <dt>AboutWebDesign</dt>

        <dd>AWD ist eine Seite über Webdesign</dd>

        <dt>Computer</dt>

        <dd>Eine arbeitssparende Rechenmaschine</dd>

        </dl>

Nach oben

5.5.4 Optische Gestaltungsmöglichkeiten

Optisch lässt sich mit Texten nicht viel reißen: Sie können zwar Farbe, Größe, Schriftart und viele andere Attribute festlegen (siehe CSS-Kapitel), jedoch müssen Sie dabei stets darauf achten, die Regeln für gute Lesbarkeit nicht zu missachten: Usability ist wichtiger als Design.

5.5.4.1 Spaltensatz

Eine interessante Möglichkeit ist jedoch der Spaltensatz. HTML bietet dafür aber keine direkte Möglichkeit. Sie müssen also auf Tabellen-Tricks zurückgreifen:



        <table width="600" cellpadding="0" cellspacing="4" align="center">

        <tr>

        <td bgcolor="black" width="2"><img src="/blindgif.gif" vspace="0" hspace="0"></td>

        <td style="align:  justify" width="297">Spalte 1</td>

        <td bgcolor="black" width="2"><img src="/blindgif.gif" vspace="0" hspace="0"></td>

        <td style="align:  justify" width="297">Spalte 2</td>

        <td bgcolor="black" width="2"><img src="/blindgif.gif" vspace="0" hspace="0"></td>

        </tr>

        </table>

Damit das funktioniert, müssen Sie natürlich irgendwo eine Blindgif-Datei parat haben. Um die sinnvolle, manuelle Aufteilung des Textes auf zwei Spalten kommen Sie übrigens nicht herum.

5.5.4.2 Schriftgrößen-Probleme

Die Benutzer können im Browser eine Schriftgröße einstellen. Das kann Ihr gesamtes Layout zerreißen, wenn Sie nicht eine Pixelgrößen-Definition via CSS vornehmen:



        body {font-size: 10px;}

Ob es aber Sinn macht, dem Surfer seinen Einfluss auf die Schriftgröße zu nehmen, ist mehr als fragwürdig. Wer das ähnlich sieht, kann mit relativen Angaben trotzdem noch auf CSS setzen:



        body {font-size: 110%;}

Wenn Sie relative Angaben einsetzen, muss Ihr Layout aber auch darauf ausgelegt sein und sollte nicht von einer größeren Schrift auseinander gerissen werden. Eine solche Flexibilisierung des Layouts ist ohnehin empfehlenswert.

Nach oben