Wenn eine Sache über all die Jahre hinweg stiefmütterlich im Webdesign behandelt wurde, dann ist es die Typographie. Doch dank moderner Techniken haben Webdesigner wieder Kontrolle über das Schriftbild auf Webseiten. Lange konnten lediglich Schriftart und -größe festgelegt werden, doch mittels CSS gewinnt auch die Typographie wieder eine (wenn auch eingschränkte) Bedeutung im Web. Mittels des Schriftbildes ist man in der Lage, seinen Worten zusätzliche Bedeutung zukommen zu lassen.

The Web is not print.Obwohl mit der CSS-Technik ausgefallene Layouts möglich sind, die wie Werbeposter und Grafikdesigns anmuten, kann man Webseiten nicht mit gedruckten Seiten vergleichen, denn die Vorteile des Internets liegen klar auf der Hand: Finden, Kopieren, Indexieren – das geht mit Buchseiten nicht. Eine der Hauptfunktionen des Webs ist die Vermittlung von Informationen.

Dies geht am besten mit einfachem HTML-Text. Das mag zwar altmodisch anmuten, da man scheinbar zum Ursprung zurückkehrt und Errungenschaften wie Flash plötzlich außer Acht lässt, aber HTML-Text kann von allen Benutzern und Hilfmitteln verstanden werden. Und er ist wandelbar, lässt sich leicht an ein Design anpassen.

Doch wie kann das Schriftbild einer Webseite kontrolliert werden? Mittels CSS.

Welche Kontrolle habe ich mit CSS über mein Schriftbild?

CSS bietet vielfältige Möglichkeiten, das Schriftbild einer Website zu kontrollieren, doch die bewusste Verwendung der Mittel steht hier im Vordergrund, um den Besucher nicht zu verwirren. Weniger ist eben oftmals mehr.

Da uns auf dem Bildschirm nur eine begrenzte Anzahl an sicheren Web-Schriftarten zu Verfügung steht, die Monitorauflösung (maximal 96 dpi) mit einer Druckeraufläsung (bis zu 2400 dpi und mehr) nicht zu vergleichen ist und wir selten kontrollieren können, wie unsere Besucher unsere Seite wahrnehmen, muss man Kompromisse finden.

Die wichtigsten Aspekte kann man bereits mit wenigen Eigenschaften steuern: Schriftart und -größe.

Schriftart

Typeface sets the tone or personality of your text
The Anatomy of Web FontsGrundsätzlich stehen uns Serifen- und Serifenlose Schriftarten zur Verfügung, die gern unterschiedlichen Genren zugeordnet werden. Serifenlose Schriften (sans-serif) sind aber für den Einsatz im Web generell zu empfehlen, da sie besser lesbar sind. Serifenschriften (serif) eignen sich dagegen eher für Printprodukte. Serifenlose Schriftarten wie Verdana mit viel Platz zwischen und innerhalb der Buchstaben haben eine hohe Lesbarkeit.

Mittels CSS legt man beispielsweise folgende Regel fest, um die verschiedenen Betriebssystem zu unterstützen:

body {
font-family: verdana, "trebuchet MS", helvetica, sans-serif;
}

Eine schöne Möglichkeit, die verschiedenen Schriftarten zu testen, bietet Typetester.

Schriftgröße

Mit der Schriftgröße kann man die Hierarchie innerhalb einer Seite gut gestalten. Oft ist die Wahl der Schriftgröße verknüpft mit Spaltenbreite, Zeilenhöhe und anderen Faktoren des eigenen Designs. Daher können sowohl größere als auch kleinere Unterschiede zwischen den Schriftgrößen der einzelnen Elemente angebracht sein. Auf vielen modernen Websites sieht man große Überschriften, die allerdings in einer Serifenschriftart wie Georgia und mit einer helleren Farbe realisiert sind.

Eine wichtige Frage, die immer wieder angesprochen wird, ist die nach der geeigneten Einheit. Absolute Größen wie Points (pt), Pixel (px), Pica (pc), Inch (in), Zentimeter (cm) und Millimeter (mm) eignen sich auf Grund der unterschiedlichen Monitorauflösung bei verschiedenen Betriebssystemen nicht. Des Weiteren können diese Einheiten oftmals nicht skaliert werden. Für Druckansichten sind Größen wie Points allerdings ratsam, da das Drucklayout schon systemseitig über solche Einheiten gesteuert wird.

Für die Betrachtung mit dem Monitor eignen sich relative Größen wie em und Prozentangaben (%). So kann man sicherstellen, dass die Schrift auch für Sehbehinderte veränderbar ist. Die Einheit em steht lautmalerisch für (die Größe des Buchstaben) „M“ und bezieht sich auf die Schriftgröße des Elements bzw. in der Definition font-size auf die Schriftgröße des Elternelements (letztlich <body> oder die Voreinstellung im Browser).

Betonungen

Betonungen kann man auf unterschiedliche Weise realisieren: Fett, kursiv, unterstrichen, Farbe und Grossbuchstaben. Natürlich sind mit CSS noch mehr Formatierungen möglich, aber auch hier sollte man sparsam damit umgehen, da sie nur für Akzente notwendig sind und beim Leser keine Verwirrung mit vorhandenen Elementen erzeugen sollten, so ist z.B. die Unterstreichung von Nicht-Links nicht ratsam, da mit Unterstreichungen im Allgemeinen Links assoziiert werden.

Zeilenabstand

„Je länger die Zeile, desto größer der Zeilenabstand“, könnte eine einfache Faustregel lauten. Durch die Erhöhung des Zeilenabstandes (line-height) wird die Lesbarkeit erhöht.

Abstände von Buchstaben und Wörtern

Diese Werte sollten nur für einzelne Akzente verändert werden, denn wenn man die Laufweite der Buchstaben ändern muss, hat man sicherlich die falsche Schriftart gewählt. Begriffe wie tracking oder kerning sind wohl eher für Grafiksoftware gedacht als für die Webseitenerstellung. Auch das Ändern der Wortabstände verschlechtert die Lesbarkeit eines Textes eher als zu verbessern.
Eine Änderung der Laufweite (letter-spacing) bei Überschriften ist oftmals angebracht, um die Balance im Design nicht zu stören oder gewisse Akzente zu setzen.

Ausrichtung

Eine beliebte Ausrichtung für Text ist linksbündig (text-align: left;), da es unserer Schrift gleicht, die von links nach rechts verläuft. Andere Formate sind abhängig vom Einsatzort: So sehen Blocktexte fast nur bei breiteren Texten gut aus, sind rechtsbündige Texte bei Akzenten angebracht oder verstärken Ausrichtungen generell ein Design durch die entstehengen Abstände.

Natürlich kann man seine Website gestalten wie es am besten gefällt, dennoch sollte man immer an die Leser denken, für die die Website erstellt wurde. Hindernisse in Form von zu kleiner Schrift oder zu geringen Kontrasten in Farbe oder Größe behindern in vielerlei Form den Lesegenuss. Und wem die eben vorgestellten Kontrollmöglichkeiten über das Schriftbild nicht ausreichen, der kann zu anderen Mitteln greifen. Trotzdem sollte dabei immer an die wörtliche Lesbarkeit gedacht werden, denn viele Besucher verwenden aus vielerlei Gründen Textbrowser, Hilfsmittel wie Screenreader oder mobile Endgeräte.

Wo bleibt das Design?

Der Webdesigner, der sowohl Form als auch Funktion kontolliert, sollte sich fragen, ob die Form der Wörter wichtiger als ihre Bedeutung ist:

Does the visual appearance of the subject communicate more that the words themselves and aid the user’s experience more than the inherent functionality of HTML text?
Typography on the Web

Sobald dies zutrifft, das heißt eine Webseite sich auf das WIE konzentriert anstatt „einfach nur“ Informationen zu vermitteln, dann sind Alternativen angebracht. Dazu zählen Image Replacement Techniken, wie Bilder oder sIFR, und Flash. Lesenswert ist hier der Artikel „Übersicht: Image-Replacement-Techniken“ von Jens Meiert.

Fazit

Typographie im Web muss also keine unveränderbare Größe sein. Mit wenigen Einstellungen kommt man einem gesetzten Ziel schon sehr nahe. Die Schrift unterstützt das Wort. Allerdings nur soweit, wie der Leser die Schrift als Form wahrnehmen kann.
Mittels verschiedener Techniken können heutzutage aber beinahe alle Lesergruppen angesprochen und zufrieden gestellt werden, ob mit einfachem Text, ausgefallenen Layouts oder vielen Grafiken.

Die Zugänglichkeit der Informationen für alle ist hier wichtiger als die Art der Umsetzung. Und sei es nur durch alt-Text.

Lektüre

Deutsche Artikel über Typographie im Web

• Typographie für Webautoren
• Wie groß ist 100%? – Immer Ärger mit den Schriftgrößen
• HTML-Schriften unter der Lupe
• Typo und Layout im Web
• Typografie – Danke an Steffen Giers
• Schriftgrößen, SCHRIFTGRÖSSEN, schriftgrößen
• Grundsatzdebatten im Webdesign – (Keine Antwort auf) Die Frage nach der richtigen Schriftgröße

Englischsprachige Artikel über Webtypographie

• Accessible web text – sizing up the issues.
• The Anatomy of Web Fonts
• Typography on the Web – Beauty is Not Letterform Deep
• Web Typography Tutorial
• Effective Style with em
• UsableType: Web Typography Guide
• Typography For Headlines – Showcase verschiedener Überschriften

Typographie/Print

• Thinking with Type
• Know Your Type
• Typography Crash Course Roundup – Linksammlung
• The Secret Lives of Fonts

Die Liste wird nach und nach um weitere Links zu deutschsprachigen Artikeln erweitert.