Führen wir das im Ansatz behandelte Thema der richtigen Schriftart fort. Zur Bestimmung einer zum Design passenden Schrift ist diese der Thematik der Seite nach auszuwählen. Überlegen Sie, ob Ihre Website eher informativer Art ist, eher technisch versiert, verspielt, streng oder ob sie in einem bestimmten Stil gehalten ist.

Neigt Ihre Homepage eher in Richtung Technik & Informationen, empfiehlt es Schriftarten ohne Serifen zu benutzen. Empfehlenswert sind Arial, Times New Roman, Trebuchet MS und Verdana. Ansonsten sind andere websichere Schriftarten zu verwenden.

Zudem sollten Sie maximal drei Arten an Schriften für das gesamte Webprojekt, vereinzelt eine vierte oder fünfte, für die Umsetzung vorsehen. Halten Sie diese Richtlinie nicht ein dann laufen Sie Gefahr Ihren Auftritt an Bedeutung zu nehmen, denn Sie verstoßen gegen die Prinzipien der Einheitlichkeit und Wiedererkennung.

Legen Sie jeweils eine Schriftart für Überschriften, für Menüführungspunkte und den eigentlichen Text fest. Hervorhebungen regeln Sie dann per Schriftgröße, Schriftstärke, Schriftstil und Schriftfarbe. Nicht zu vergessen sind ausreichend Leerräume und die Textausrichtung.

Zuordnung der Schriftgrößen

Mit unterschiedlichen Schriftgrößen können Sie bereits Elemente ihrer Bedeutung nach herausheben bzw. in den Hintergrund versetzen. Wählen Sie eine große Schrift für Überschriften ersten und zweiten Grades. Überschriften dritten Grades können Sie in der für den eigentlichen Text vorgesehenen Größe halten.

Überschriften sollten eine Schriftgröße zwischen 14 und 20 Pixel nicht überschreiten – ausgenommen Sie wollen auf vereinzelte Elemente bewusst aufmerksam machen. Für den Text eignen sich Buchstabenhöhen von 12 oder 13 Pixel, für Verlinkungen und Randbemerkungen 12, 11 oder 10 Pixel.

Beachten Sie bitte das durch den Fortschritt bedingte, höhere Auflösungen Schriften mit 10 und 11 Pixel bereits verschwindet gering darstellen und ein Lesen auf das Auge sehr anstrengend wirkt. Idealerweise arbeiten Sie bei Schriftgrößen mit der Maßeinheit em anstatt px.

Gestalten Sie Ihren Text auch so, dass bei zukünftigen Anpassungen minimale Abänderungen notwendig sind. Definieren Sie daher im <body>-Tag des Dokumentes per CSS die Standardschriftgröße und verfassen Sie Ihre Artikel so, dass durch mögliche Texterweiterungen es nicht zur Verschiebung von anderen umgebenden Elementen kommt.

Schriftstärke, -auszeichnung und Schriftstil

Hierzu gibt es wenig zu sagen. Überschriften, wichtige Schlagwörter und Zusammenfassungen können in Fettschrift dargestellt werden. Links sind in der Regel zu unterstreichen oder ihnen ist ein anderer Farbton zuzuordnen. Kursiv eignet sich sehr gut um Zitate oder eigenständige Begriffe zu kennzeichnen.

Wie Sie Schriftstärken und -stil aufeinander abstimmen, ist Ihnen überlassen. Setzen Sie diese Mittel allerdings sparsam ein, weil der Betrachter sonst durch die übermäßige Hervorhebungen Wesentliches vom Unwesentlichen schwerer trennen kann.

Schriftfarbe

Die Anzahl der Schriftfarben sollte ebenfalls begrenzt werden. Für sich wiederholende Elemente empfehlen wir die Farben beizubehalten. Passen Sie die Farben auch Ihrem festgelegten Farbschema an.

Wenn ihre Website kräftige, starke und vielfältige Farbtöne nutzt, können Sie diese Vielfalt auch im Text weiterführen. Ansonsten gelten die getroffenen Aussagen im Artikel Farbschemata.

Leerräume und White Spaces

Genügend Leerräume und freie Flächen verhindern eine Informationsüberflutung des Besuchers. Versuchen Sie nicht jede Information in den sichtbaren Bereich zu quetschen. Durch ein sorgfältiges und durchdachtes Platzieren der Texte gewähren Sie dem Leser Ruhe und Ordnung bei der Durchsicht Ihrer Website.

Halten Sie von daher genügend Flächen und Zwischenräume frei. Sie können Ihre Homepage nach unten beliebig weit ausbauen. Wenn Sie am Frühstückstisch sitzen und sämtliche Lebensmittel wegen Platzmangel übereinanderstapeln, sehen Sie die Butter nicht gleich beim ersten Mal. Gelegentlich fällt die Suche akribisch aus, weil Sie im Durcheinander keine Ordnung erkennen können.

Gruppieren Sie die Lebensmittel ein wenig und schaffen genügend freie Fläche, finden Sie die Butter auch viel schneller. Dies ist zwar ein etwas blumiges Beispiel, beschreibt aber die Problematik ganz gut. Wählen Sie also die Abstände nicht zu eng und bieten Sie genügend Freiraum.

Ziehen Sie zur Not Ihren Text auch ein wenig auseinander um bei Bedarf genügend Platz zwischen den Zeilen zu schaffen. Das lockert das Design ein wenig auf und fördert den Lesefluss. Letzteres erreichen Sie per CSS-Befehl line-height (Zeilenhöhe) oder height (Element- bzw. Blockhöhe).

Die Ausrichtung des Textes

Grundsätzlich stehen Ihnen vier Möglichkeiten zur Verfügung Text auszurichten – linksbündig, zentriert, rechtsbündig und Blocksatz. Der Text dieser Seite ist mittels Blocksatz ausgerichtet, d. h. er orientiert sich am linken und rechten Rand. Damit erreichen Sie ein stimmiges, geradliniges Erscheinungsbild und Sie sollten Textblöcke bis auf wenige Ausnahmen immer als Blocksatz einbinden.

Allerdings hat diese Methode auch einen Nachteil. Bei zu schlanken Texten besteht die Gefahr das die Wortabstände zu große Lücken aufweisen. Manchmal gelingt es diese Lücken zu verkleinern indem längere Wortkombinationen mittels Trennstrich in einen Zeilenumbruch geführt werden.

Dies lässt sich aber nicht immer bewerkstelligen und Sie müssen Ihr Webdesign anpassen. Linksbündige und rechtsbündige Ausrichtungen sind für größere Artikel nicht empfehlenswert. Ihre Texte sollten sich zudem an anderen Elementen orientieren und eine gedachte Linie bilden – Stichwort Raster.

Im Internet existiert auch ein sehr hilfreiches Tools zum Testen der Ausrichtung und Schriften. Zu finden ist es unter http://www.typetester.org. Wer sich zudem tiefer mit dem Thema Typographie beschäftigen möchte, findet weitere Informationen im Online-Portal für Typografie.

Relevante CSS-Anweisungen

font-family, font-weight, font-style, font-size, color, text-align, line-height, height, word-spacing, letter-spacing