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.

annyas.com

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.

hotmeteor.com

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.

lordlikely.com

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?)

danielmall.com

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?

Derzeit bahnt sich ein Hype in der deutsch– und englischsprachigen Blogosphäre an: Der sog. Ecofont erfährt Begeisterung und Unterstützung von vielen Seiten, wird dabei stets als umweltfreundliche, weil tonerschonende Alternative zu den üblichen Schriften gepriesen. Durchlöcherte Buchstaben sollen nach Angaben des Entwicklers bis zu 20% Farbe einsparen und dadurch einen Beitrag zum Umweltschutz leisten. Dabei zeigt sich schnell, dass das so nicht stimmen kann.

Zwar verbraucht die Schriftart tatsächlich etwas weniger Toner bzw. Tinte, aber im direkten Vergleich mit Arial Narrow konnte ich eine Differenz von lediglich 4% pro textgefüllter DIN-A4-Seite feststellen. Das gilt aber nur, wenn der Drucker in der Lage ist, jedes Loch auch exakt auszusparen. Da dazu bei Schriftgrößen von 9 oder 10pt kein handelsüblicher Drucker in der Lage ist, dürfte dieser Effekt also merklich geschmälert werden.
Der große tonerschonende Effekt ist das also definitiv nicht.

Dafür frisst der Ecofont Papier en masse: Bei der vom Entwickler empfohlenen Schriftgröße von 10pt verschlingt er für 100.000 Worte aus dem Lorem-ipsum-Generator ca. 140,25 Seiten. Arial Narrow in derselben Schriftgröße verbraucht für denselben Text gerade einmal 108,5 Seiten. Sogar Arial in normaler Dickte und Laufweite beansprucht nur 123 Blatt Papier. Damit erzielt also Arial Narrow gegenüber dem Bürostandard Arial ein Papierersparnis von ca. 12% – der Ecofont dagegen verbraucht sogar 14% mehr Papier als Arial derselben Schriftgröße. Zudem kostet die Schriftverarbeitung und –übertragung an den Drucker mehr Energie, weil der Ecofont durch seine vielen Löcher ein Mehr an Vektorinformationen enthält.

Typographische Details

Ein Vergleich des Ecofonts mit Helvetica, Arial Narrow und Times New Roman in den Schriftgrößen 12pt, 20pt und 50pt soll mehr Licht ins Dunkel bringen:

Im Vergleich: Ecofont, Helvetica, Arial Narrow und Times New Roman

Zwar muss beachtet werden, dass es sich bei dem Vergleichsbild um eine unter Informationsverlust entstandene Bildschirmausgabe, also nicht um das gedruckte Endergebnis handelt, aber dennoch lässt sich gut erkennen, wo die Grenzen des Ecofont liegen. Denn ab einer Größe von etwa 28pt werden die Käselöcher deutlich sichtbar, aber schon ab 12pt erscheint die Schrift sehr unscharf und je nach verwendetem Programm wird der Ecofont selbst bei der empfohlenen Größe von 9 bzw. 10pt mehr oder weniger unschön dargestellt.

Und wie schneiden die anderen Schriftarten im Vergleich ab?
Zwar wird bei 12pt nur Helvetica ordentlich dargestellt, denn Arial Narrow und Times New Roman erscheinen ebenfalls ein wenig verschwommen. Sobald jedoch die Schriftgröße zunimmt, lassen sich die herkömmlichen Schriften wesentlich besser lesen. Bezeichnend: Die Überschriften, gesetzt in 10pt Helvetica und seichtem Grau , sind trotz vermindertem Kontrast besser zu lesen als der Ecofont.

Es muss jedoch gesagt werden, dass die Ausgabe auch vom verwendeten Programm abhängt. Das Vergleichsbild ist mit Illustrator entstanden; sowohl Photoshop als auch Word stellen die Schriften ein wenig anders da. Wer sich aber selbst davon überzeugen möchte, kann nach Download des Ecofonts und anschließender Installation gern auch den Schriftvergleich als doc-Datei herunterladen.

Daher mein Rat: Wenn schon Toner und Umwelt schonen, dann richtig! Mit einer leichten oder engen Sans-Serif-Schrift wie etwa Arial Narrow (besser Helvetica Narrow) oder der kostenlos erhältlichen Delicious kann man mehr erreichen. Wenn sie zudem in 70%igem Grau geschrieben ist und eine gute Blattnutzung hinzukommt, d.h. die Seitenränder etwas verkleinert werden und die Wörter am Zeilenende getrennt werden, wird der umweltschonende Effekt sogar noch erhöht.

Was hältst du vom Ecofont? Hast du auch schon von ihm gehört? Glaubst du, dass er sich behaupten können wird? Oder hast du selbst noch Ideen, wie man beim Drucken Farbe sparen kann?

Ich habe es getan. Ich habe mehr als die Hälfte der auf meinem Computer gespeicherten Schriften gelöscht. Das war auch bitternötig, denn mit der Zeit und mit Unwissen über die Vorzüge einer guten Schriftart häuften sich einige schaurige, hässliche Fonts an, die ich einerseits nie gebraucht habe und die andererseits nur der Übersichtlichkeit schadeten.

Diese radikale Aufräumaktion und meine in letzter Zeit gewachsene Aufmerksamkeit für Typographie haben mich dazu veranlasst, einmal eine kleine, inoffizielle und vor allen Dingen sicherlich auch unvollständige Liste derjenigen Schriften zu erstellen, denen man im täglichen Leben sicherlich nicht hinterhertrauern wird. Sie schauen grässlich aus oder werden missbraucht, doch in jedem Falle werden sie mit einer ungerechtfertigten Penetranz gebraucht. Viele Webseiten, Flyer, Prospekte, und Speisekarten könnten durch ein emanzipiertes Aussortieren von ihrer Hässlichkeit und Unprofessionalität befreit werden.

Hier sind sie, die sieben Fonts, die ich schleunigst in die Wüste schicken möchte – und obendrauf zwanzig kostenlos verfügbare Alternativen:

1. Comic Sans

Diese ausgelutschte Schriftart, die wohl bei ihren Benutzern für Lockerheit, Freundlichkeit und Unkompliziertheit zu stehen scheint, erzielt bei vielen Lesern eher das Gegenteil: Wo sie auftaucht, regieren Einfallslosigkeit, Einfältigkeit und in besonderem Maße infantile Spielerei. Abstoßung und Ausgrenzung sind die Folge, der Autor ist auf ewig gebrandmarkt. Ganz klar: Ohne den exzessiven Gebrauch dieser Schriftart wäre das Leben schöner!

2. Brush Script

Wenn ich aus dem Balkon schaue, sehe ich auf das Schild einer kleinen Kneipe, wo einem Brush Script verkündet, dass man lieber nicht eintreten sollte. Hier hat man es mit einem weiteren typographischen Ungetüm zu tun, das offensichtlich dem Text eine persönliche Note geben soll. Dass man aber heutzutage an jeder Straßenecke mit dieser Ausgeburt des schlechten Geschmacks belästigt wird, scheint den vielen Nutzern dieser Schriftart nicht aufgefallen zu sein. Unkreative Autoren, die glauben, Arial wäre zu langweilig, gehören zu den bevorzugten Opfern von Brush Script.

3. Papyrus

Ein Hauch von Exotik? Schon lange nicht mehr. Der inflationäre Gebrauch dieser schlecht designten Schrift verleiht nun jedem Text das unabwendbare Stigma der Einfallslosigkeit.

4. Copperplate Gothic

Was einst für knallhartes Business, Stärke und Rückgrat stand und eigentlich einen gut designten Font darstellt, wird heutzutage fast ausschließlich unter missglückten Umständen gebraucht. Wer auf den Zug aufspringt und damit sein Image aufbessern will, erntet oftmals nur noch Hohn und Spott. Erschreckend: Der Gebrauch in offiziellen Zusammenhängen und im Rahmen von Corporate Identity ist leider noch weit verbreitet (siehe hier, wenn auch so manches Bild kein Copperplate zeigt).

5. Curlz MT

Was ist gleich nochmal das Credo jedes Typographen? Die Lesbarkeit eines Textes zu gewährleisten? Bei Curlz MT muss da irgendwas schief gelaufen sein. Dennoch genießt diese unsägliche Schrift den Status des omnipräsenten typographischen Ungeheuers – eindeutig ein Kandidat für die Verbannung.

6. Lucida Handwriting

Eine Schriftart, die sich mit Vorliebe in Speisekarten einnistet und einen hervorragenden Dienst tut, wenn man schon vor dem Essen wissen möchte, womit man es hier zu tun hat. Für alles andere: Finger weg von Lucida Handwriting. Wer mit der Einzigartigkeit einer Handschrift seinem Text eine persönliche Note geben möchte, sollte besser nicht auf diesen allgegenwärtigen Font zurückgreifen.

7. Bauhaus 93

Eigentlich ist nicht viel gegen Bauhaus 93 zu sagen. Die Unterschneidung einiger Buchstabenkombinationen ist zwar reichlich ungeschickt getroffen (s.o.), aber dafür bleibt der Stil der Schriftart konsistent. Was auch kein großes Wunder darstellt, ist doch die Schrift dem weitaus ruhmreicheren Font „Blippo“ nachempfunden. Wenn da nur nicht der Missbrauch durch die Anwender wäre. Bauhaus 93 ist ein Paradebeispiel für jene Schriftarten, die dadurch, dass sie kostenlos für jedermann verfügbar sind, zur Plage wurden. Hübsch ist sie zwar, aber ihre Einsatzgebiete sind beschränkt.

Aber auf welche kostenlos erhältlichen Alternativen kann man zurückgreifen?

Eines muss ganz klar gesagt sein: Qualität hat seinen Preis. Das gilt gerade für Fonts, denn hier gibt es gravierende Unterschiede. Gerade wenn es um die Einbindung in ein grafisches Äußeres oder die Vermittlung bestimmter Emotionen und Eigenschaften geht, kann sich die oftmals gar nicht so kostenintensive Investition lohnen. Allerdings muss fairerweise auch gesagt werden, dass es eine Reihe kostenloser Schriftarten gibt, mit denen man, wenn sie im passenden Zusammenhang genutzt werden, ebenfalls gute oder gar exzellente Ergebnisse erzielen kann. Mit der folgenden Auswahl sollte das kein Problem sein:

Was hältst du davon? Welche Fonts müssen unbedingt mit auf die Fahrt ins Nirgendwo? Welche sollten auf keinem Computer fehlen?