Aufbau und Typografie einer Webseite

Das Erscheinungsbild einer Webseite bzw. der Eindruck, den der Besucher von der Seite erhält, hängt stark davon ab, wie sie optisch und inhaltlich aufgebaut ist. Das nennt man Aufbau und Typografie einer Website.

Damit sind jedoch nicht nur schöne Grafiken gemeint. Vielmehr geht es darum, wie die Webseite aufgebaut ist. Wie sind die Elemente aneinander geordnet? Welche Schriftarten sind in Benutzung? Wie sind Zwischenräume und Auszeichnungen aufgebaut? Wo wurden die Bilder und Grafiken platziert?

Damit deine Webseite auf den Besucher nicht zu chaotisch wirkt, habe ich für dich einige Beispiele zusammengestellt, mit der deine Webseite ein wenig „aufgeräumter“ aussehen wird.

 

Seiten-Layout

Das Layout einer Webseite kann sehr unterschiedlich sein. Webmasterparadies.de besteht aus einem vierspaltigen Layout (Kopfleiste, Inhaltsbereich, Seitenbereich und Fußleiste). Es gibt auch noch viele weitere Layout-Elemente, die ich jedoch nicht alle nutze. Im Grunde genommen kann man sogar sagen, dass es sich um ein zweispaltiges Layout handelt, wenn man Kopf- und Fußzeile zum Haupt-Inhalt dazuzählt.

Jedoch gibt es auch immer noch Webseiten, die auf ein einspaltiges Layout setzen. Um das etwas zu verdeutlichen, gibt es hier zwei Beispiele:

 

Einspaltiges Layout
Einspaltiges, zerstückeltes Layout

 

Zweispaltiges Layout
Zweispaltiges, aufgeräumtes Layout

 

Wie du direkt sehen kannst, ist das einspaltige Layout natürlich sehr unübersichtlich und hinterlässt keinen guten Eindruck.

 

Lesbarkeit

Die Lesbarkeit einer Webseite ist ebenso wichtig wie Layout und Inhalte. Denn was bringen die besten Inhalte, wenn die Lesbarkeit so miserabel ist, dass man sich sehr anstrengen muss, wenn man den Text überhaupt aufnehmen will? Um eine gute Lesbarkeit der Webseite zu erreichen, kann man die folgenden Punkte als Leitfaden zu Rate ziehen.

 

Schriftart

Während in Printmedien schriftarten mit Serifen (z.B. Times New Roman) besser zu lesen sind, haben sich für Bildschirminhalte eher serifenlose Schriftarten (z.B. Arial, Verdana) als optimal herausgestellt. Per CSS könntest du sogar verschiedene Schriftarten für verschiedene Medien definieren. So könntest du eine optimale Lesbarkeit deiner Schriftarten sowohl online als auch ausgedruckt erreichen.

Bitte beachte jedoch, dass der Browser immer nur die Schriftarten am Bildschirm darstellt, die auch auf dem System des Nutzers installiert sind. Abhilfe schafft hier der CSS3-Standard, der ein Web-Fonts-Modul mit sich bringt. Im Artikel „Eigene Schriftarten verwenden“ kannst du nachlesen, wie das funktioniert.

Ansonsten kannst du dich auch auf die Standard-Schriftarten verlassen.

 

Schriftgröße

Wähle die Schriftgröße nicht zu klein. Im Fließtext am Bildschirm werden Schriftgrößen zwischen 10 und 12 Punkt als angenehm empfunden. Überschriften können (und sollten) natürlich größer sein, Fußnoten hingegen kleiner.

Die optimale Schriftgröße hingegen ist variabel. So lässt sich mittels der Einheit em das Schriftbild flexibel einstellen. 1em entspricht dabei der Voreinstellung im Webbrowser. Weitere Informationen zu diesem Thema erhältst du im Artikel „Schrift optimieren“ der Responsive Webdesign Artikelserie. Dort gehe ich insbesondere auch auf das Thema Schriftgröße ein.

 

Textformatierung

Wie man seinen Text optimal formatiert, hängt natürlich auch insbesondere vom Design der Webseite ab. Großschreibung kann dabei durchaus ein Stilelement sein. Allerdings darfst du Großschreibung nicht ausschließlich verwenden, da dies auf Dauer sehr monoton wirkt und die Lesbarkeit deutlich sinkt.

Genau so wenig ist es sinnvoll, lange Textpassagen fett, kursiv oder gar unterstrichen zu formatieren. Diese Formate sind ausschließlich dann zu verwenden, wenn du wichtige Textinhalte hervorheben möchtest. Die Seitenbesucher übersehen wichtige Informationen, wenn du solche Textformatierungen zu häufig einsetzt.

Natürlich gibt es auch die Möglichkeit, die Texte am Bildschirm entsprechend auszurichten. Ob du dabei nun auf links- oder rechtsbündigen Text setzt, oder auf Blocktext bleibt natürlich dir überlassen. Beachte jedoch, dass linksbündiger Text und Blocktext die Standard-Varianten sind. Rechtsbündiger Text ist eher selten anzutreffen. Vermeiden sollte man jedoch viel zentrierten Text. Dies wirkt oftmals amateurhaft und verschlechtert auch die Lesbarkeit. Zentrierter Text sollte wichtigen Stellen, Zitaten und ähnlichen Texten vorbehalten sein. Eben da, wo es auch angebracht ist. Fließtext zu zentrieren macht keinen Sinn.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.