14. Januar 2010
6 typographische Feinheiten im Web
Ein Blick in die Blogstatistik zeigt, dass im Lauf des mehr als einjährigen Bestehens von Castor und Pollux manche Themen schnell in den Hintergrund gerückt sind, obgleich diese dem ursprünglichen Konzept zufolge ein integraler Bestandteil dieses Blogs sein sollten. Eine dieser Themen ist die Typographie; und da ich mich in letzter Zeit wieder intensiv mit Web-Typographie beschäftigte, kommt es mir gelegen, wieder zu dem Thema zu schreiben.
Obgleich man im Internet Linksammlungen, Tutorials, Ratgeber usw. zu genüge findet, werden doch m.E. manche Aspekte dieses komplexen Themas unberechtigterweise gar nicht oder nur oberflächlich aufgegriffen. Wenn man einmal die üblichen Seiten zum Thema Web-Typgraphie abgrast, wird man bald erkennen, dass die Informationen überaus redundant sind. Nicht verzagen, dafür gibt es jetzt an dieser Stelle ein kurze Liste jener typographischen Feinheiten, die im Web selten oder gar nicht zur Sprache kommen – natürlich ohne Anspruch auf Vollständigkeit.
1. Zweck und Message
2. Typographie ist die Kunst des Kontrasts zwischen Schrift und Freiräumen
3. Vertikaler Rhythmus wird überschätzt
4. Textauszeichnung verfolgt einen semantischen Sinn
5. Details richtig einsetzen
6. Alles ist relativ
Die folgende Liste richtet sich in erster Linie an jene, die bereits typographisches Grundverständnis mitbringen. Dennoch wird ein Großteil der Begriffe durch Links aufs Typo-Lexikon ergänzt.
1. Zweck und Message
Typographie heißt nicht, die hübschesten Fonts auszuwählen. Nicht alle von uns können Frakturschriften lesen, noch weniger Kurrentschriften wie Sütterlin. Obgleich beide Schriftklassen optisch sehr ansprechend sind, erfüllen sie doch – zumindest im Internet – den wichtigsten und womöglich auch einzigen Zweck nicht, der der Typographie zukommt: Lesbarkeit. Daher gilt für Textkörper und zumeist auch Überschriften: Gute Typo ist, was dem durchschnittlichen Leser nicht auffällt. Punkt. Gute Typo fällt i.d.R. nur jenen auf, die sich auch dafür interessieren – also auch dir und mir.
Dennoch heißt das nicht, dass Webdesigner aus ihrem kleinen Repertoire an Webfonts nichts machen können. Bisher habe ich immer gute und erwartungsgemäße Ergebnisse erzielt, wenn ich mir vorher klar durchdacht habe, was ich eigentlich erreichen will. Soll die Webseite den Flair der goldenen Zwanziger atmen? Soll sie klassisch und nach Vorbild der Tageszeitungen aus Bleisatzzeiten daherkommen? Oder vielleicht puristisch und dezent?
Die Ansprüche und Erwartungen können vielfältiger Natur sein, jedoch, umso detaillierter, desto besser. Der nächste Schritt bestünde u.U. dann darin, Schriftbeispiele aus dem betreffendem Kontext zu sammeln. Internet und Buchhandel sind da wie geschaffen für.
Wenn man diese beiden Gedanken bei allem im Hinterkopf behält, hat man schon einen großen Teil der Arbeit geschafft.
informationarchitects.jp
2. Typographie ist die Kunst des Kontrasts zwischen Schrift und Freiräumen
Diese These ist zwar auf einschlägigen Webdesign-Seiten in ähnlicher Form weit verbreitet, wird aber meiner Meinung nach eher stiefmütterlich behandelt. Meist wird dann nur über Zeilenabstände und margins philosophiert, aber dahinter steckt noch weitaus mehr. Man könnte diesem umfangreiche Thema sicherlich einige Seiten widmen, doch will ich hier nur einige Denkanstöße geben, was diese These alles umfässt:
- Eine Letter, eine Schrift wirken nur dann harmonisch, wenn zwischen Buchstabenkörper und Hintergrund genügend Kontrast herrscht. Dies schließt Helligkeits-, Farb– und Formkontraste ein. Fette und magere Schriften büßen Kontrast ein, Serifenschriften gewinnen häufig Kontrast mit steigender Schriftgröße, serifenlose Schriften eignen sich oftmlas für kleinere Schriftgrößen.
- Obgleich der Webdesigner darauf nur durch seine Fontwahl Einfluss nehmen kann, vermag er dank CSS mikrotypographische Faktoren der Spationierung steuern: Kerning, Laufweite (beide über letter-spacing) und Wortabstand (word-spacing). Zwar ist dies i.d.R. nur für Überschriften praktikabel, ist allerdings bei Textauszeichnung in Form von Versalien oder Kapitälchen Pflicht.
- Zeilenlänge und –abstand tragen ebenfalls dazu bei, lassen einen Text aufgestaut, zerflossen, auseinandergerissen oder im günstigen Fall fließend erscheinen.
- Die Mischung der eingesetzten Schriften entscheidet neben stilistischen (s.o.) und semantischen Faktoren auch über Spannung und Harmonie zwischen verschiedenen Textelementen. Eine probate Lösung ist es etwa, Überschriften in Serifen und Fließtext in serifenlosen Schriften zu setzen.
- Anordnung und Abstände der einzelnen optischen Elemente, also Absätze, Überschriften, Bilder, Menüs, layouteigene Grafiken etc. pp. spielen eine wichtige Rolle im gesamten Webdesign und stellen wohl auch den komplexesten Teil dieser Liste dar. Richtig eingesetzt, werden einerseits Spannungen und Konkurrenzen abgebaut, andernorts willentlich erzeugt, Struktur erzeugt, einzelne Elemente in den Vordergrund gestellt, andere in Kontext gebracht und insgesamt in eine logische, ansprechende Hierarchie gebracht.
3. Vertikaler Rhythmus wird überschätzt
Die meisten Webtypographie-Ratgeber schwören auf dieses Instrument und geben dem faulen Webdesigner auch die passenden Werkzeuge in die Hand (als ob ein Taschenrechner nicht ausreiche). Das Anliegen ist realistisch und wichtig: Der Zeilenabstand sollte im gesamten Dokument harmonieren, also entweder gleich sein oder Vielfache ergeben. Andernfalls stört sich das Auge an nebeneinander angezeigten, unharmonischen Absätzen – aber oftmals auch nur dann.
Oftmals macht es im Internet Sinn, diese Regel zu beherzigen, nämlich immer dann und genau dann, wenn Inhalte auch nebeneinander angezeigt werden. Doch gerade in Blogstrukturen, die dem Muster “Content + eine Sidebar” folgen, kann die oftmals zeitraubende Arbeit, line-height, height, margin und padding der einzelnen Elemente zu kalibrieren, unnötig sein. Man denke an Layouts mit textarmer, vielleicht auch fixer Sidebar und langen, möglicherweise vorrangig aus Bildmaterial bestehenden Content-Teilen: Der User scrollt die meiste Zeit und verliert so nebeneinander liegende Inhalte schnell aus dem Auge.
Hier noch lange Zeit über vertikalen Rhythmus zu grübeln, kann überflüssig sein. Wichtig ist dann nur, dass im Fließtext selbst alles einigermaßen harmoniert – kleine Abweichungen vom Schema sind natürlich erlaubt, insbesondere wenn striktes Einhalten dieses Rhythmus bedeuten würde, dass einzelne Elemente einen lächerlich großen oder kleinen Zeilenabstand erhielten. Wie immer allerdings, hängt die Entscheidung am Einzelfall – und was schlicht und einfach harmoniert. Gerade in diesem Bereich kann es wert sein, ein wenig zu experimentieren, so kann zwischen zwei rhythmisch korrekten Absätzen eine arhythmisch gesetzte Überschrift dem Layout eine gewisse Dynamik verleihen (s. auch obiges Bild).
Auszeichnungs-Fließschema nach Robert Bringhurst (via)
4. Textauszeichnung verfolgt einen semantischen Sinn
Ob kursiv, fett, unterstrichen, andersfarbig, in Kapitälchen, gesperrt oder anderweitig vom Normaltext abweichend – solche und andere Textauszeichnungen verfolgen stets einen semantischen Sinn, sollen sie doch einzelne Worte bis ganze Sätze aus dem Kontext herausstellen. Andersfarbigkeit und Unterstreichung sind dabei standardmäßig Links vorbehalten, ein Abweichen von dieser Regel führt schnell zu Verwirrung. Alle anderen jedoch können individuell eingesetzt werden, solange sie einerseits Punkt 1 entsprechen und andererseits konsistent bleiben. Dem Leser muss klar sein, dass bspw. halbfetter Text für Betonung und kursiver Text für Zitate steht.
Schlechter Stil wäre in diesem Sinne, v.a. zu starke (ganze Satzteile in Versalien) aber zu schwache Auszeichnungen zu wählen, nach Gutdünken zwischen ihnen zu wechseln, sie unüberlegt zu mischen oder gar derart viel hervorzuheben, dass der Lesefluß gravierend gestört wird. Andererseits gibt es auch eine feine Hierarchie zwischen den einzelnen Auszeichnungen: So würde eine Passage mit fetten Versalien in gewöhnlichem Text viel zu stark hervorstechen, innerhalb von fettem Text jedoch angebracht sein.
Orientierung bietet da etwa das obige Fließschema, in dem die Schriftauszeichnungen hierarchisch von oben nach unten angeordnet sind. Passende Kombinationen sind mit Linien verbunden, die roten Linien geben die üblichen Lösungen wieder. Ein Beispiel: Ist ein Textkörper in Versalien gesetzt, könnten Texteile durch fette Versalien oder z.B. fetten, kursiven Normaltext hervorgehoben werden.
5. Details richtig einsetzen
Web-Typographie kann den Regeln der Kunst in jeder Hinsicht entsprechen, aber dennoch fad wirken. Dann ist man oftmals an einen Punkt gelangt, wo der Unterschied zwischen gutem und sehr gutem Layout im Detail steckt. Man kann dahingehend anderer Meinung sein, doch ist Typographie m.E. auch das Würdigen stilistischer Eigenheiten.
Wenn etwa der Stil eines Buches oder einer Zeitung aus dem 18. oder 19. Jahrhundert erreicht werden soll, ist es zweckmäßig, kleinere Überschriften in gesperrte Kapitälchen zu setzen, Ornamente wie das Aldusblatt, Schlußstücke oder Initialen einzubinden. Auch subtilere Stilmittel wie Mediävalziffern, unübliche Ligaturen (falls im Schriftsatz enthalten), Guillemets können zu einem runden Bild beitragen.
Wer bei Castor und Pollux etwas aufmerksamer mitliest, wird womöglich schon bemerkt haben, dass bis auf das letzte Beispiel all diese Stilmittel eingesetzt werden.
Andere Stile erfordern natürlich auch andere Stilmittel, jedoch wird man dann zumeist auf layouttechnische Mittel zurückgreifen müssen, stammen doch die meisten typographischen Stilmittel aus eben jener Zeit. Beispielsweise könnte sich ein “antik” wirkender Stil auf altrömische Inschriften beziehen, somit in Versalien gesetzte Antiqua-Schriften wie Trajan, Garamond oder Caslon zum Einsatz kommen und die Wörter statt mit Leerzeichen mit kleinen Dreiecken oder Kreisen auf Höhe der Mittellänge getrennt werden. (Kennt jemand den Namen dafür?)
6. Alles ist relativ
Typographie lässt sich ebenso wenig wie andere Kunstsparten auf eine Handvoll Regeln herunterbrechen. Wer einmal einen Blick in die Literaturklassiker der Typographie gewagt hat, wird wissen, dass es noch weitaus mehr zu lernen und zu beachten gibt. Das Internet ist für die Typographie ein gänzlich neues Medium mit eigenen Anforderungen, sodass ein nicht geringer Teil der althergebrachten Regeln gar nicht anwendbar sind.
Dennoch kann ein Layout – ob im Web oder in Print – stinklangweilig sein, obgleich den Regeln der Kunst in allen Punkten entsprochen wurde. Ebenso kann ein Layout, dass unkonventionell, gar rebellisch daher kommt, ein absoluter Erfolg sein. Will heißen: Nur wer die Regeln kennt und anwenden kann, kann sie auch übergehen und ganz eigene Akzente setzen.
Welche Feinheiten im Gebrauch von Typographie im Web fallen dir noch ein?
Andere Stimmen
[…] 6 typographische Feinheiten im Web Obgleich man im Internet Linksammlungen, Tutorials, Ratgeber usw. zu genüge findet, werden doch m.E. manche Aspekte dieses komplexen Themas unberechtigterweise gar nicht oder nur oberflächlich aufgegriffen. Wenn man einmal die üblichen Seiten zum Thema Web-Typgraphie abgrast, wird man bald erkennen, dass die Informationen überaus redundant sind. […]
[…] 6 typographische Feinheiten im Web (Castor und Pollux) an dieser Stelle ein kurze Liste jener typographischen Feinheiten, die im Web selten oder gar nicht zur Sprache kommen (tags: cfischercom) […]
Kommentare
Ein sehr interessanter Beitrag mit schönen Beispielen. Ich abonniere mal den Feed. Danke fürs Schreiben
lg.