jomo.org

aus dem Unterricht von Johann Moser: Mathematik, Webdesign und Realtime Processing
Subscribe

Artikel der Kategorie »HTML & CSS«

Grundsätze der Typografie

15. Dez. 2005 Von: Johann Moser Kategorie: HTML & CSS Keine Kommentare →

http://www.jomo.org/index.php/grundsatze-der-typografie
gedruckt am 06. Sep. 2010

Vorüberlegungen

Das Internet wurde ursprünglich zur Übermittlung von ASCII-Texten konzipiert. Durch die Entwicklung des WWW wurden allmählich größere Anforderungen an die grafische Gestaltung gestellt.

Positionierung

Grundlage eines guten Design ist die Positionierung von Elementen. Ein großes Problem ist, dass der Designer keine Kontrolle über den Bildschirm des Users hat: unterschiedliche Bildschirmauflösungen, Browser und Browserkonfigurationen erschweren die Erstellung guter Design-Lösungen. Mit Hilfe folgender Grundsätze und Hinweise lassen sich trotzdem gute Designs verwirklichen.

Vertikale Leerräume

Der systematische Gebrauch von Leerräumen zwischen Textabschnitten kann die Lesbarkeit und Verständlichkeit von Texten entscheidend verbessern. Wichtig ist, dass der vertikale Zwischenraum eine Funktion erfüllt.

Überschriften werden in Html mit <h1> bis <h6> zugeordnet das sind die Absatzformate “Überschrift 1″ bis “Überschrift 6″. Die Eigenschaften der Überschriften-Ebenen werden im Stylesheet gesetzt. Zweite Überschriftenebene, Einzüge, Ränder und enge Spaltenbreiten sind Gütezeichen der Typografie. Als zusätzliches Gliederungselement kann das Aufrufen einer neuen Webseite eingesetzt werden. Die Textlänge einer Seite soll in etwa einer Minute gelesen werden können. Faustregel: nicht mehr als 6 Bildschirmseiten auf einer Webseite.

Horizontale Linien als Trennungen sind nicht notwendig und stören den Lesefluss. Besser sind Zeilenumbrüche und Einzüge.

Horizontale Leerräume

Ränder machen das Lesen angenehm. Ein linker Rand hilft dem Auge, die Anfänge der Zeilen zu finden. Je breiter der Rand, desto stärker wird die Textspalte hervorgehoben. Linker und rechter Rand werden mit Hilfe von Tabellen erzielt: Der Text steht in der mittleren Spalte. Empfehlenswert ist ein relativer Rand von 10% bis 20% der Fensterbreite. 25% – 65% – 10% ist eine günstige Aufteilung. Achtung: Der Text fließt je nach Bildschirmauflösungen unterschiedlich breit! Für die Verwendung von absoluten Spaltenbreiten ist 380 Pixel für die Textspalte günstig, der Textfluss bleibt auf diese Weise unabhängig von der Bildschirmauflösung, rechter und linker Abstand sind von der Bildschirmauflösung abhängig.

Lange Textzeilen erschweren das Auffinden der nächsten Textzeile. Im Idealfall sollte jeder Abschnitt aus Zeilen mit 10 – 12 Wörtern bestehen. Achtung: Da die Benutzer die Standardschriftgröße des Browsers ändern können, hat der Designer keine Kontrolle über die Anzahl der Wörter pro Zeile. Die meisten User verwenden allerdings immer die Standardeinstellungen ihres Browsers.

Mehrfacher Spaltensatz ist grundsätzlich ein günstiges Mittel, kürzere Zeilen zu erhalten. Der Text darf aber nicht so lang sein, dass man beim Lesen zurückscrollen muß!

Zentrierter Text ist nur für bestimmte Effekte (kurze Dokumente) empfehlenswert. Beachte, worauf sich die Zentrierung bezieht! Bei Verwendung mehrerer Spalten (oder Frames) ist Zentrierung von Text in einer Spalte meist sinnlos, ebenso bei Verwendung von unterschiedlich breiten Abständen rechts und links.

Einzüge signalisieren den Übergang zwischen zusammenhängenden Absätzen. Verwende drei bis fünf feste Leerzeichen als Einzug. Absätze nach einer Überschrift oder vertikalem Leerraum erhalten keinen Einzug.

Listen

Designer verwenden keine durch Blickfangpunkte ausgezeichnete Listen. Listenzeilen werden eingezogen, mit Leerraum versehen, wichtige Elemente (Zeilenanfang) werden fett ausgezeichnet.