Markup

Typographie im Web

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 Fonts
Grundsä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

Englischsprachige Artikel über Webtypographie

Typographie/Print

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

Kategorie: Markup

von

Hallo, ich bin Nadja und arbeite als freie Webdesignerin in Berlin. Seit den 2000er-Jahren ist das Internet mein berufliches Zuhause, hier im cne _LOG schreibe ich erst seit Anfang 2006 zu den Themen Webdesign, Webstandards und vor allem auch Wordpress.

18 Kommentare

  1. Ein sehr schöner Artikel und ein dringender Überblick über Regeln und die Kunst richtig zu Setzen. Zu DTP Zeiten waren die meisten hier deutlich engagierter als es sich in den „WWW“ Zeiten entwickelt hat.

    Danke!

  2. Pingback: my weblog » » Typographie im Web — cne _LOG Archiv

  3. Pingback: » Texte im Web - Verständlich und zugänglich zugleich — cne _LOG Archiv

  4. Ein sehr schöner Artikel, der verständlich einen guten Überblick über Typografie im Netz gibt. Mehr davon!

  5. Pingback: Dr. Web Weblog » Blog-Archiv » Quellensammlung: Font und Typographie

  6. Das einzige was ich mir wirklich mal wünschen würde wäre ein Browserübergreifende Möglichkeit, Fonts als Download anzubieten, die direkt verwendet werden können. Solange Fonts auf dem PC des betrachters installiert sein müssen reden wir über Freiheit auf 3 m².

  7. Pingback: Die richtige Schrift im Internet :: Exanto

  8. Stiefmütterlich im Webdesign wird auch häufig noch der Einsatz von deutschen Anführungszeichen und die Unterscheidung von Gedanken- und Bindestrichen. Diese Thematik würde den Artikel gut ergänzen. Trotzdem ist schon eine Menge guter Informationen über Typographie im Webdesign entgalten.

  9. Pingback: Typografie in OpenOffice.org / StarOffice « Netztaucher

  10. Endlich mal ein super Artikel, den auch Leute verstehen, die nicht jeden Tag vorm Rechner sitzen und die Zeit haben tausende von Büchern zu durchforsten . Danke

  11. Pingback: HUMANISTISCHES ARSCHLOCH » Blog Archive » TYPO HIN, TYPO HER UND GRAYORANGE

  12. Hallo,

    ich habe den Beitrag mit großem Interesse gelesen, denn ich suche verzweifelt A/B Test mit verschiedenen Text-Styles. Ich habe derzeit ein neues Projekt mit dem Thema Schiffsbeteiligungen (Übrigens unter http://www.schiffsbeteiligungen-24.de erreichbar) gestartet. Ich überlege selber A/B Tests zu machen und schauen, wie sich verschiedene Darstellungen auf die Conversionen auswirken. Mal schauen. Wenn ich mir die Mühe mach, halte ich einen kleinen Report oder es gibt einen manuellen Trackback 🙂

    Viele Grüße,
    Nils

Kommentare sind geschlossen.