Webtypobuch

Als pdf oder txt herunterladen
Als pdf oder txt herunterladen
Sie sind auf Seite 1von 148

Gerrit van Aaken

Gerrit van Aaken


Gerrit van Aaken
Diplomdesigner (FH)
@gerritvanaaken

Allen YouTubes und Instagrams zum Trotz besteht


das Web auch in den Zehnerjahren zu weiten
Teilen aus Text. Es sollte uns nicht gleichgültig sein,
wie dieser gestaltet und dargestellt wird.

„Warum sieht meine Bildunterschrift auf dem iPad


so matschig aus? Wie geht man sinnvoll mit
Weißraum und Zeilenlängen um? Und welches ist
eigentlich der beste Webfont-Hostingdienst?“

Mit einem thematischen Rundumschlag, der von


#webtypobuch Edition 2012
den Feinheiten der Schriftglättung über klassische
Typoknigge bis hin zu praktischen Softwaretipps

Edition 2012
reicht, meldet sich Blogveteran und Typograf
Technik und Gestaltung
Gerrit van Aaken (praegnanz.de) zu Wort. Sein
von Schrift im Netz
Erstlingswerk darf sich im Grunde kein deutsch-
#webtypobuch

sprachiger Webdesigner entgehen lassen.

webtypobuch.de
#webtypobuch

Gerrit van Aaken

Edition 2012
Edition 2012
1. PDF-Fassung, Dezember 2012

Gerrit van Aaken, Würzburg

Das Werk ist urheberrechtlich geschützt.


Einige Rechte vorbehalten:
CreativeCommons BY-NC-SA 3.0
creativecommons.org/licenses/by-nc-sa/3.0/de

Das Buch erwerben oder online lesen: webtypobuch.de

Geschrieben mit iA Writer und Mellel


Gesetzt aus der Minion Pro und der Avenir Next Condensed
Autorenfoto © Christian Pier
Dieses Buch wäre nicht möglich gewesen
ohne die offiziellen Sponsoren:

fontshop.com

www.schreibergrimm.de typotalks.com/day

Ruhm und Ehre


gebührt auch den Mini-Sponsoren:

Jens Twesmann Michi Bundscherer Michael van Laar

Dominik Scholz Matthias Slovig Martin Wolters

Nicole Schwenk Albert Pinggera Michel Wacker


Inhalt

Kapitel 1: Einführung – 7
Was ist denn nun Typografie?
Kleine Geschichte der Webtypografie

Kapitel 2: Darstellungstechnik – 17
Gedanken zum Lesen am Bildschirm
Retina-Bildschirme und das Pixel als Maßeinheit
Schriwahl in Zeiten hoher Pixeldichte
Vom Vektor zum Pixel: Rasterizer
Schridarstellung in Extremsituationen

Kapitel 3: Typografisches Handwerkszeug – 39


Über die Leserlichkeit
Die korrekten Sonderzeichen
Schriwahl und Leserlichkeit
Laufweite
Abstand & Weißraum
Zeilenabstand (ZAB)
Grundlinienraster oder „Vertical Rhythm“
Zeilenlänge, Spalten und mehr
Ausrichtung und Silbentrennung
Kontraste und inverser Satz
Kapitel 4: Die richtige Schri – 67
Websichere Schrien
Die Rückkehr der Webfonts
Abo, Cloud und Co. – ein Ratgeber
Webfont-Anbieter im Kurzporträt
Schriwahl konkret – was nimmt man?

Kapitel 5: Gelungene Webtypografie – 109


Lesarten in der Webtypografie
Lineares Lesen
Informierende Typografie
Aktivierende Typografie
Inszenierende Typografie

Kapitel 6: Zugabe – 133


Exkurs: Iconfonts
Werkzeuge für Webtypografen
Eine Art Glossar
Danksagung
#webtypobuch – 7

Kapitel 1:
Einführung
#webtypobuch – 8

Was ist denn nun Typografie?


Für dieses Buch sollten eigentlich ein paar Regeln gelten, die bei klassischen
Verlagsprodukten – sei es aus dem Design- oder dem Informatik-Umfeld –
normalerweise nicht gelten. Beispielsweise möchte ich mich nicht mit trocke-
nen Definitionen oder allzu naheliegendem Grundwissen aualten. Deshalb ist
dieses erste Kapitel kurz und knackig. Aber eben auch wichtig, denn nicht alle
Designschaffenden haben zwingend die gleiche Auffassung davon, was genau
unter dem Stichwort Typografie alles zu verstehen sei. Hier mein eigener, profa-
ner Versuch – ohne mich vorher von Wikipedia beeinflusst haben zu lassen:

Typografie ist die Kunst bzw. Lehre der grafischen Gestaltung, die in irgendeiner
Form mit Schrizeichen zusammenhängt.

Man unterscheidet in der Welt der Typografie zwischen unterschiedlichen Dis-


ziplinen, die sich sehr schön „von innen nach außen“ aufzählen lassen.

Da wäre zum einen der Schrientwurf, also das Erschaffen einer Schriart mit
ihren einzelnen Buchstabenformen. Dies wird bisweilen auch als Königsdiszi-
plin des Grafikdesigns angesehen; jeder erfolgreiche Schrientwerfer genießt in
Designerkreisen hohes Ansehen, denn die Idee für eine eigene Schri, sowie
deren Ausgestaltung und Produktion benötigen in der Regel einige Monate
oder Jahre harte Arbeit, viel Erfahrung und ganz besonderes Talent. Nicht alle
Designer trauen sich da ran, insbesondere wenn es um Schrien geht, die
später als gut lesbare Brotschrien1 fungieren sollen.

Dann hätten wir noch die Detailtypografie, in der es darum geht, die einzelnen
Buchstaben, Wörter und Satzzeichen so nebeneinander oder untereinander zu
arrangieren, dass die Inhalte lesefreundlich und professionell präsentiert
werden. Hier wird sehr genau hingeschaut: Muss zwischen der Zahl und dem
Prozentzeichen ein ganzes, ein halbes oder ein Dreiviertel-Leerzeichen gesetzt

1. Brotschrien sind solche Schrien, die für lange Texte optimiert sind. Der Begriff stammt
von der Berufsgruppe der Setzer, welche früher nach Textmenge bezahlt wurden, und die
sich vor allem mit langen Textabschnitten ihre Brötchen bzw. ihr Brot verdienten.
#webtypobuch – 9

werden? Ist ein Semikolon nach einem fett gesetzten Wort ebenfalls fett?
Welche Anführungszeichen setze ich, wenn ich ein englisches Zitat innerhalb
eines deutschen Zitats in einem Roman kennzeichnen muss? Die treibende
Kra hinter exzellenter Detailtypografie ist laut Friedrich Forssmann2 omals
die Geheime Sorgfalt: Kunden und Leser werden zwar niemals bewusst erken-
nen, wie viel Arbeit hinter einem sorgfältig abgesetzten Text steckt, aber es
scha dem Gestalter eben nur dann eine merkliche Befriedigung, wenn alles
wirklich perfekt ist.

Vergessen wir zuletzt die Makrotypografie nicht. Dieser Begriff ist zu 80 %


deckungsgleich mit Layout, was den meisten Lesern vertraut sein düre. Hier
spielen sehr viele unterschiedliche Aspekte eine Rolle: Seitenaueilung in Spal-
ten und Abschnitte, Schriarten, Schrigrade, Farben und Auszeichnungen für
diverse redaktionelle Ebenen wie Überschrien, Fließtexte, Infokästen, Fußno-
ten usw. Im Grunde also die Gestaltung und das Arrangement aller typografi-
schen Elemente, ohne dabei jedoch den einzelnen Buchstaben anzusehen. Es
geht um Zeilenabstände, Zeilenlängen, Kontraste, aber auch um die Wahl des
Papiers und des Druckverfahrens, sowie buchbinderische Fragestellungen.

Wir sehen also schon: Typografie hat natürlich immer noch viel mit Drucktech-
nik zu tun und schleppt damit ein paar hundert Jahre tradiertes Wissen mit
sich herum, welches im Web (Alter: gut 20 Jahre) zu weiten Teilen fast genauso
gültig ist wie auf Papier. Grund genug, sich das einmal genauer anzuschauen,
diese Sache mit den Bildschirmen und den Buchstaben. Und wie es alles zu-
sammenhängt.

2. Friedrich Forssmann ist Mitautor des hochgradig empfehlenswerten Buches


„Detailtypografie“ aus dem Mainzer Hermann-Schmidt-Verlag.
#webtypobuch – 10

Kleine Geschichte der Webtypografie


Man kann argumentieren, dass Typografie im Web eine sehr langwierige Phase
der Emanzipation hinter sich habe; Emanzipation wovon? Wir kommen noch
darauf. Andererseits ist es genauso valide zu behaupten, die Entwicklung wäre
rasend schnell vorangeschritten. Es hängt einfach davon ab, in welchen Maß-
stäben man denkt! Vergleicht man die Abstände der Meilensteine von Guten-
berg bis @font-face, so kann man sicher in den letzten Jahren von einem
Feuerwerk der Innovation sprechen. Ungeduldigere Zeitgenossen hingegen
sind ja schon genervt, wenn die neueste absurde Layouteffekt-Idee des Webkit-
Teams nicht innerhalb von wenigen Tagen vom W3C zum offiziellen Webstan-
dard erklärt wird.

Die wohl erste Website der Welt

Dabei hat alles ganz anders angefangen, im Jahr 1991. Von ausgefeilter Typo-
grafie war damals keine Rede, als Tim Berners-Lee im Keller des Schweizer
CERN seine Idee von digital vernetzten Forschungstexten in die Tat umsetzte.
Wer jemals eine formal standardisierte wissenschaliche Arbeit in den Händen
hatte, wird dabei nicht sofort an optimale Zeilenlängen oder optischen Rand-
ausgleich denken. Es zählt hier der pure Inhalt. Von daher gab es in den ersten
#webtypobuch – 11

Versionen von HTML kaum Möglichkeiten, diesen Inhalt visuell zu gestalten.


(Und wenn es sie gegeben hätte, wäre damit auch niemandem geholfen gewe-
sen; das gestalterische Geschick eines typischen CERN-Wissenschalers ließ
sich auf den PowerPoint-Folien zur Entdeckung des Higgs-Teilchens sehr
anschaulich begutachten.3)

Vielleicht keine schlechte Sache also, dass in der ganz frühen Zeit des Webs
außer einem Wechsel von Arial auf Times New Roman und der Auswahl einer
Schrifarbe aus einer 216er-Palette gestalterisch nicht viel geboten war.

Eine frühe Version des Netscape-Browsers mit zeitgenössischer Website (um 1995)

„Raus aus der Wissenscha, rein ins Marketing!“ hieß es dann Mitte der Neun-
zigerjahre. Amazon und eBay gingen 1995 als leuchtende Vorbilder an den
Start und viele unerschrockene Unternehmer folgten ihnen und suchten ihr

3. Die wissenschaliche Jahrhundertentdeckung wurde der Weltöffentlichkeit auf


quietschbunten Farbflächen und in der Schri Comic Sans präsentiert.
#webtypobuch – 12

Glück im (damals tatsächlich) neuen Medium Internet. Mit der erstmaligen


Aussicht auf Konsum, Massenmarkt und Lifestyle stiegen die gestalterischen
Ansprüche plötzlich enorm. Das Grafikdesign der Neunziger gilt ja auch nicht
gerade als, nun, zurückhaltend. Im Web wollte man da nicht zurückstehen,
wenn auch die technischen Voraussetzungen dafür eigentlich gar nicht vorhan-
den waren. Es gab zwar inzwischen erste Browserversionen, die Tabellen dar-
stellen konnten, und Microso ließ eine Handvoll websicherer Schrien
anfertigen, die mit Fokus auf die Bildschirmdarstellung gestaltet wurden. Und
zugegeben: Am Horizont erschienen bereits solche Dinge wie Cascading Style
Sheets (CSS). Aber im Grunde war es immer noch eine traurige Zeit für den
gestaltungswilligen Webdesigner. Wenn sich bestimmte Designentwürfe nicht
mit fragwürdig verschachtelten Tabellenkonstruktionen umsetzen ließen,
musste man allzu o die Notbremse ziehen und die Layouts in Pixeldateien
packen, um sie dann als tote Non-Inhalte auf die Modemnutzer der damaligen
Zeit loszulassen. Insbesondere zwielichtige Erotik-Angebote im Netz waren
dafür berüchtigt, aufwendige Grafik-Arrangements kurzerhand als gestückelte
Bitmap-Orgien in HTML zu gießen.

Aber wir hatten ja nichts! Nicht einmal einen anpassbaren Zeilenabstand! Da


war es dann viel weniger verpönt als heute, zur GIF-Grafik zu greifen, um Cor-
porate-Design-gerechte Typografie umzusetzen. Und weil die unterschiedli-
chen Browser ganz verschiedene Dinge gut oder schlecht konnten, war es
gängige Praxis, verschiedene Versionen einer Website mit gleichem Inhalt
anzubieten. Nicht etwa über inkrementelle Fallbacks wie heutzutage mit Media-
Queries, sondern tatsächlich die gesamte Website – doppelt oder dreifach.

Aber es ging voran. Aus dem weitestgehend unbeachteten CSS1 von Dezember
1996 wurde anderthalb Jahre später bereits CSS2, und dieser Standard brachte
(in der Revision 2.1) ab 2003 tatsächlich den Durchbruch für das, was wir heut-
zutage als selbstverständlich und einzig guten Stil ansehen, nämlich die sorten-
rein getrennte Lagerung von Inhalten und Layoutregeln in separaten Dateien.
Erst die Floats und Positions aus CSS2 ermöglichten es uns Webdesignern,
komplexere Layouts mit frischen typografischen Ansätzen zu realisieren, ohne
komplett den Verstand zu verlieren in den Tabellenlabyrinthen und <font>-
Elementen der Websteinzeit. Die ersten prominenteren Websites begannen nun
#webtypobuch – 13

mit der Umstellung auf reine CSS-Layouts; etwa fünf bis sechs Jahre später
dure man diese Entwicklung als abgeschlossen betrachten. Und mit CSS2
konnten fähige Frontend-Entwickler – aus damaliger Sicht – ganz schön viel
anstellen! Die Webdesign-Szene war ja bescheiden geworden in den vergange-
nen zehn Jahren, in denen sie die meiste Zeit gegen den Browser gekämp statt
für den Browser entwickelt hatte. Dieser Kampf ging selbstverständlich trotz-
dem weiter, aber die schickeren Ergebnisse entlohnten die harte Arbeit der
Browserbugjagd.

Ein praktikabler Ausweg aus dem Dilemma zwischen gestalterischem


Anspruch und der Realität der stückwerkhaen Browserlandscha schien
einige Zeit lang die Flash-Technologie zu sein. Von einer schneidigen kommer-
ziellen Firma in schnellen Schritten weiterentwickelt, war Flash zwischen 1998
und 2005 das Tool der Wahl für Heerscharen von Webdesignern, die nicht auf
die schleichende Evolution im HTML-Universum warten wollten. Eine Weile
ging das auch ganz gut: gestalterische Freiheit, beliebige Schrien, nach unten
abgeschlossene Seitenlayouts, schicke Animationen – eine famose Geschichte!
Doch der Anfang vom Ende für Flash in der klassischen Websitegestaltung kam
spätestens mit dem Trend zu User Generated Content und immer dynamische-
ren Community-Portalen. Man musste sich eingestehen, dass diese neue Art
von Mitmach-Websites mit einem HTML-Frontend schneller und agiler umzu-
setzen war. Und glaubwürdiger obendrein, denn eitle Flashanimationen hatten
immer mit dem Ruf zu kämpfen, heiße Lu in hübscher Verpackung zu sein.
#webtypobuch – 14

Das (inzwischen eingestellte) Videoportal watchberlin.de, komplett mit Flash umgesetzt

Etwa um die gleiche Zeit, also 2005, gab es auch einen deutlich erkennbaren
Umbruch im visuellen Stil. Man sprach damals vom Web-2.0-Design. Und
auch wenn diese Zeit von vielen Klischees und Lächerlichkeiten geprägt war, so
war es doch der erste grafische Stil, der im Web geboren wurde, aber durchaus
auf die Gestaltung im Real Life abgefärbt hat: riesige bunte Headlines, großzü-
gige und minimalistische Formensprache, Spiegelungen und Verlaufsflächen,
dazu die Ausnutzung des gesamten Browser-Viewport statt kaum lesbarer
Minischrien im eingekastelten Postkartenformat.

Das Webdesign wollte sich – und damit greifen wir den obigen Gedanken auf –
von zweierlei Paradigmen emanzipieren: einmal natürlich vom Diktat der
Printdesigner, die nach immer kleineren und kontrastärmeren Buchstaben als
Grauwert-Füllmaterial strebten. Andererseits aber auch von den technischen
Einschränkungen, die man nicht länger durch „pfiffigen“ Missbrauch der Brow-
serfähigkeiten umgehen, sondern über elegante neue Webstandards auflösen
wollte.
#webtypobuch – 15

Nicht immer hübsch, aber meistens bunt: Web-2.0-Design

Nach den Neunzigerjahren und der raschen Kommerzialisierung des Webs


mittels schäbig improvisierter Lösungen kamen nun die Ingenieure unter den
Webdesignern an die Reihe und forderten aus Eigeninteresse (oder Notwehr)
neue technische Möglichkeiten. In Form von CSS3-Modulen, HTML5 und
natürlich der Rückkehr von JavaScript ist dies in den letzten sieben Jahren ganz
ordentlich gelungen! Alle heute verfügbaren Browserfamilien werden in akzep-
tablen Zyklen mit neuen Versionen versehen, so dass sich innovative Schri-
und Layouttechniken schneller durchsetzen können als noch vor zehn oder
fünfzehn Jahren. Die Webdesign-Szene, bestens vernetzt über Weblogs, Bar-
camps4 und Twitter, ist heute stärker denn je in den Prozess der technischen
Weiterentwicklung involviert und kann moderne Funktionen mit zunehmend
gutem Gewissen einsetzen, ohne allzu große Teile der Nutzerscha auszugren-
zen.

Und der technische Fortschritt scha auf der anderen Seite natürlich wieder
kreativen Freiraum im Screendesign; die allseits beliebten Webfonts sind da nur

4. Barcamps sind informelle Branchentreffs von web- und technikaffinen Menschen und
werden alle paar Wochen in größeren Städten organisiert. Die Teilnahme ist kostenlos
oder kostengünstig. Jeder Teilnehmer kann und soll sich dabei aktiv einbringen.
#webtypobuch – 16

eines von vielen Beispielen. Wir stehen gerade (wieder einmal) am Anfang
eines neuen digitalen Designparadigmas, wo wir einerseits die althergebrachten
typografischen Basisregeln endlich auch im Web umsetzen können, anderer-
seits flexibel genug für frische Ansätze sind, um die visuelle Gestaltung unseres
virtuellen Lebensraumes voranzutreiben!

Welches nun im Einzelnen die Bausteine und Parameter sind, mittels denen
man heute im Web Layouts plant und Schri gewinnbringend (ein)setzt –
darum soll es in diesem Buch gehen.
#webtypobuch – 17

Kapitel 2:
Darstellungstechnik
#webtypobuch – 18

Gedanken zum Lesen am Bildschirm


Erfahrene Webdesigner wissen es längst: Schri am Bildschirm hat enorm viele
Vorteile gegenüber dem gedruckten Wort, und zwar in erster Linie hinsichtlich
der Flexibilität. Sind die Buchstaben vom Gestalter zu klein angelegt, kann sich
der Nutzer diese kurzerhand selber vergrößern. Abends im Dunkeln lesen?
Kein Problem, der Bildschirm leuchtet ja, und zwar bestenfalls genauso stark,
wie es der Situation angemessen ist. Nutzer mit einem exotischen Sehfehler
können sich darüber hinaus die Kontraste und Farben so zurechtbiegen, dass es
für sie passt. (Für bestimmte Nutzergruppen ist nur gigantisch vergrößerter,
hellgelber, serifenloser Text auf schwarzem Hintergrund wirklich gut lesbar.
Versuchen Sie das einmal mit Ihrer nächsten Hochglanz-Imagebroschüre!)

Doch Lesen am Bildschirm ist gleichzeitig alles andere als perfekt, auch wenn
vieles inzwischen besser geworden ist. Bis vor wenigen Jahren hatten wir aus-
schließlich Röhrenmonitore zur Verfügung, die eine unangenehme Strahlung
mit sich brachten und zur Unschärfe neigten, wenn sie nicht optimal kalibriert
oder billig produziert waren – außerdem konnte man sich an den Dingern
leicht einen Bruch heben. Inzwischen haben wir deutlich schärfere und weniger
augenfeindliche LCD- oder LED-Schirme, die aber immer noch störend strah-
len können, wenn man sie nicht ständig an die Umgebungshelligkeit anpasst.
Einen Sonderweg schlagen die sogenannten E-Ink-Displays („elektronische
Tinte“) ein, die wir seit einigen Jahren in den meisten der mittlerweile recht
populären E-Book-Readern finden, allen voran im klassischen Kindle von
Amazon. E-Ink hat grandiose Vorteile in Sachen Energieverbrauch und Augen-
freundlichkeit, bringt jedoch wiederum andere Nachteile mit sich: extrem träge
Auauzeit, bisher nur mit wenigen Graustufen erhältlich, und insgesamt tech-
nisch noch nicht so ausgerei und günstig herzustellen, wie man es von LCD
gewohnt ist.

Allen diesen Bildschirmtechnologien ist aber eines gemein, und das ist das
Pixel (= Picture Element) als Grundlage der Darstellung. Pixel sind quasi die
Atome der Bildschirmgrafik und somit auch für das Webdesign von buchstäb-
lich elementarer Bedeutung. Auch wenn wir in den späteren Kapiteln erfahren
werden, dass es einen Trend zum pixellosen Denken gibt, muss man sich den-
#webtypobuch – 19

noch damit auseinandersetzen, was es bedeutet, die eleganten Kurven eines


Vektorfonts in unbarmherzige digitale Klötzchen umzuwandeln. Damit uns das
nicht so schwer fällt, richten wir unseren Blick zunächst auf einen besonderen
Schrityp: Die von vornherein auf eine beschränkte Darstellung angelegten
Pixelschrien.

Exkurs: Pixelfonts

Ohne Frage, Pixelfonts waren zuerst da. Als die frühen Heimcomputer in der
Lage waren, Buchstaben und Zahlen auf einem Bildschirm darzustellen, musste
das mit so wenig Rechenpower wie möglich geschehen. Die Glyphen hatten
also tunlichst exakt so im Speicher zu liegen, wie sie später am Bildschirm lan-
deten: als Pixelmatrix. Die Auflösung der Screens war darüber hinaus so gering,
dass man die Schrien nur dann wirklich lesen konnte, wenn ihre einzelnen
Pixel sorgfältig manuell für die widrigen Umstände angepasst waren. Denken
wir der Einfachheit halber an den C-64 mit seiner bespielbaren Bildschirmflä-
che von 320 × 200 Pixeln. Die typische C-64er-Typografie bestand meist kom-
plett aus Versalien (= Großbuchstaben), welche pro Zeichen eine Fläche von
8 × 7 Pixeln verbrauchten. Minuskeln (= Kleinbuchstaben) machen in diesen
Größenordnungen nur Probleme und wurden daher eher ungern eingesetzt.

Typische C-64-Typografie
#webtypobuch – 20

Da bei Pixelfonts eine exakte Übereinstimmung des Bildschirm-Grids mit dem


Fontpixel-Grid Voraussetzung ist, gibt es sie auch jeweils nur in einer Schri-
größe; sie lassen sich auch nicht sinnvoll vergrößern oder verkleinern. Wer eine
größere Darstellung wünscht – sei es für Überschrien oder andere Hervor-
hebungen – muss einen anderen Pixelfont verwenden, beziehungsweise einen
anderen Schnitt der gleichen Schriart, der für die entsprechende Größe ent-
worfen wurde.

Diesen Umstand kann man übrigens in einer interessanten Parallele zu den


Bleisatz-Schrien sehen; auch hier wurden einzelne Schrischnitte immer für
eine bestimmte Druckgröße hergestellt – und auch entsprechend gestaltet. Die
Formen einer 8-Punkt-Garamond waren andere als die einer 18-Punkt-
Garamond. Und wer die Schri in 19 Punkt einsetzen wollte, hatte leider Pech,
wenn es die entsprechende Größe nicht gab. Genauso bei den Pixelfonts! Sie
sind nicht frei skalierbar, und für jede Pixelgröße muss ein ganz neues Set an
Buchstabenformen entworfen werden. Für das Desktop-Publishing ein untrag-
barer Zustand, denn natürlich möchte man am Bildschirm eine realistische
Vorschau von seinen Schrien haben, ganz egal in welcher exotischen Größe
sie gesetzt sind. Das ganze WYSIWYG-Versprechen basiert letztlich auf dem
Prinzip der freien Skalierbarkeit von Schrien – am Drucker und am Bild-
schirm! Man wechselte deshalb in der Druckvorstufe (die damals tatsächlich so
hieß) relativ schnell fast vollständig auf vektorbasierte Fonts, die erst kurz vor
der tatsächlichen Bildschirmdarstellung in die benötigten Bildschirmpixel
gerastert wurden. Dazu gleich mehr.

Im Webdesign tri man Pixelfonts aber ebenfalls nur noch sehr selten an. Als
es noch große Mode war, Websites mit Flash (oder dem De-facto-Vorgänger
Shockwave) umzusetzen, sah das noch ein wenig anders aus. Typografisch
interessierte Designer konnten hier bereits – im Gegensatz zur HTML/CSS-
Welt – sehr leicht beliebige Fonts einbetten. Und da zu dieser Zeit das Gros der
Nutzer noch keine geglätteten Schrien auf Betriebssystem-Ebene gewohnt
waren, wirkten gerade die Pixelschrien frisch und modern und schindeten
mächtig Eindruck beim Nutzer. Man erkennt darin auch heute noch ein prä-
gendes Element des typischen Neunzigerjahre-Looks im Screen- und Web-
design: winzige, auf modernen Bildschirmen quasi unleserliche 9-Pixel-Lettern,
#webtypobuch – 21

gern auch in Versalien und mit zu wenig Kontrast gesetzt. Dies dann noch als
GIF-Datei oder gleich über Flash in den Browser gemogelt … So schlimm war
das damals, wenn nicht noch schlimmer!

Wir merken uns also: Außer für wirklich nicht zum Lesen gedachtes Kleinge-
drucktes sollte man heute in der Regel auf Pixelschrien verzichten und statt
dessen einen ordentlich geglätteten Vektorfont wählen, und diesen im Idealfall
auch live vom Browser rendern lassen statt in eine vorbereitete Bilddatei
hineinzubacken.

Retina-Bildschirme und das Pixel als Maßeinheit


Seit es Computermonitore im freien Handel gibt, ist deren Pixeldichte langsam
aber stetig gestiegen. Zu Beginn der Desktop-Publishing-Revolution, Mitte der
Achtzigerjahre, waren es noch die berühmten 72 ppi (pixel per inch), die bei
professionellen Layoutbildschirmen dafür sorgten, dass ein einzelnes Pixel
genauso groß war wie ein Typografischer Punkt, nämlich 0,35 × 0,35 mm. Das
hatte den pragmatischen Vorteil, dass man Drucksachen tatsächlich in physi-
scher Originalgröße am Bildschirm entwerfen konnte (Ausdrucken war teuer),
und eine 12-Punkt-Helvetica am Bildschirm mit 12 Pixeln dargestellt wurde. So
ließ es sich leichter rechnen.

Später kletterten die Bildschirmauflösungen dann locker über die 100er-


Grenze, bis hin zu besonders protzigen Geräten mit bis zu 150 ppi. Letztere vor
allem bei hochpreisigen Windows-kompatiblen Laptops Mitte der Nullerjahre,
zum Beispiel ein Dell Dimension mit 15,4" Bildschirmdiagonale und
1.920 × 1.200 Pixeln. Viel höher jedoch konnte die Pixeldichte dann nicht mehr
werden – zumindest nicht ohne Quantensprung. Und zwar weniger aus techni-
schen, sondern aus konzeptionellen Gründen; das Problem an kleineren Pixeln
ist nämlich, dass nicht nur die einzelnen Pixel im Vergleich schrumpfen, son-
dern mit ihnen alles, was aus ihnen gebildet wird. Und das ist zum großen Teil
Text, der von menschlichen Augen gelesen werden soll. Eine heikle Angelegen-
heit, denn die gleiche 11-Pixel-Arial, welche auf dem 112-ppi-Monitor noch
#webtypobuch – 22

einigermaßen gut zu erkennen ist, kann auf einem 147-ppi-Monitor schon zu


winzig sein, um sie ohne Lesebrille entziffern zu können; eine deutlich erhöhte
ppi-Zahl führt bei sonst gleichbleibenden Parametern zu deutlich kleinerer
Schridarstellung.

Die Webdesignwelt hat glücklicherweise darauf reagiert und in den letzten


sieben bis acht Jahren die früher üblichen 11 oder 12 Pixel großen Fließtexte
schrittweise zu den heute eher üblichen 14 bis 16 Pixeln transformiert. Damit
einher ging auch die maximal empfohlene Layoutbreite von anfangs 640 Pixeln
über später 800 Pixel auf heute 1024 Pixel. (Einige verwegene Webdesignkolle-
gen versuchen es zwar inzwischen auch mit 1280 Pixeln oder experimentieren
gar mit absichtlich horizontal scrollenden Inhalten, doch davor rate ich im All-
gemeinen ab.)

Diese Anpassung des marktüblichen Leseschrigrads an die steigenden Auflö-


sungen der Monitore geht natürlich nur dann gut, wenn sich das Ganze über
mehrere Jahre hinweg langsam entwickelt. Doch was passiert, wenn ein Hard-
ware-Hersteller auf einmal nach vorne prescht und die Auflösung eines Gerätes
auf einen Schlag, sagen wir: verdoppelt? Nun. Apple hat im Jahr 2010 genau das
getan und mit dem iPhone 4 einen Bildschirm am Markt platziert, der statt
163 ppi satte 326 ppi darstellen konnte. Also für jeden Pixel des Vorgänger-
screens vier Pixel auf dem neuen Screen – denn die Verdoppelung der Auflö-
sung bezieht sich ja auf beide Richtungen, horizontal und vertikal.

Wenn Apple bei diesem Quantensprung das Gleiche getan hätte wie bei der
bisher üblichen Evolution, stünden die Dinge in Sachen Lesbarkeit nicht zum
Besten. Eine 12-Pixel-Arial wäre dann nämlich so außerordentlich winzig, dass
wahrscheinlich selbst kerngesunde Teenager mit 120 % Sehkra eine Lupe
benötigten.

Statt dessen griff Apple zum einzig sinnvollen Trick und verdoppelte nicht nur
die Auflösung, sondern auch die dargestellte Pixelanzahl aller angezeigten Ele-
mente. Unsere 12-Pixel-Arial wird automatisch zu einer 24-Pixel-Arial, die
dann den gleichen physischen Platz einnimmt wie früher, mit dem Unter-
schied, dass sie aus mehr Geräte-Pixeln besteht und von daher viel schärfer und
detailreicher ist.
#webtypobuch – 23

Damit wir uns nicht falsch verstehen: Die Entwickler von Apps und Websites
müssen nichts an ihren Stylesheets ändern! Statt dessen nimmt man bei diesen
hohen Auflösungen eine Trennung zwischen der virtuellen und der physischen
Auflösung vor. Etwas vereinfacht gesprochen behauptet das iPhone intern wei-
terhin, nur 320 × 480 statt der tatsächlichen 640 × 960 Pixel zu besitzen. Man
rechnet als Designer auch weiterhin in den kleineren Größen, nennt das Pixel
dann aber bisweilen Punkt/Point, oder auch logisches Pixel. Erst sobald es an die
konkrete Darstellung geht, verwendet das Betriebssystem die zusätzlichen
Hardwarepixel dafür, Schrien und Grafiken schärfer und detailreicher zu
machen.5

Dieses Prinzip hat das Potenzial, einiges auf den Kopf zu stellen – auch und
gerade im Webdesign. Denn in Zukun wird es immer mehr sogenannte High-
PPI-Bildschirme geben, bei denen ein 1:1-Verhältnis zwischen Soware- und
Hardware-Pixel nicht mehr sinnvoll ist. Genau genommen hat es auch in der
offiziellen CSS-Spezifikation nie eine zwingende Übereinstimmung zwischen
Hardware-Pixel und CSS-Pixel gegeben. Es war nur viele Jahre so, dass ein
font-size:14px; fast immer zu einer in 14 Pixeln dargestellten Schri geführt
hat. Jetzt ist das immer häufiger nicht mehr der Fall.

Entwickler für die Smartphone-Plattform Android kennen diese zusätzliche


Abstraktionsebene übrigens schon ein wenig länger. Bereits in recht frühen
Versionen von Googles Smartphone-Betriebssystem gab es den Density-Faktor,
der von einer Basis-Auflösung 160 ppi ausgeht und für jedes Hardware-Gerät
einen ausgleichenden Wert annimmt. Android-Telefone mit 120 ppi erhalten
einen Density-Wert von 0.75, während ein 320-ppi-Gerät (analog zum Retina-
Display des iPhones) eine Density von 2.0 erzeugen würde. Wenn man diesen
Faktor brav beachtet, bleiben die physischen Größenverhältnisse der Bedienele-
mente ungefähr gleich, was für die Touch-Bedienung mit dem Finger nicht

5. Über die fachgerechte Bespielung von hochaufgelösten Bildschirmen, auch über


typografische Gesichtpunkte hinaus, hat Frontend-Guru omas Fuchs mit „Retinafy Me“
ein empfehlenswertes E-Book geschrieben: retinafy.me
#webtypobuch – 24

ganz unwichtig ist. Die Darstellungqualität hingegen verbessert oder ver-


schlechtert sich eben je nach Displaydichte.6

Obwohl also das Konzept der Virtuellen Auflösung zum ersten Mal bei den
Smartphones in größerem Stil eingesetzt wurde: Die Idee der Auflösungsunab-
hängigkeit geistert auf Computern mit klassischen Betriebssystemen (Win-
dows/Mac OS) auch schon sehr lange durch den Raum, ohne bisher jemals
tatsächlich konsequent umgesetzt und vermarktet worden zu sein. Und
irgendwo verspüren viele Webdesigner auch keinen besonderen Drang, es tat-
sächlich einzufordern, denn eine Unsicherheit bezüglich der virtuellen und
physischen Auflösung erschwert natürlich die bequeme pixelbasierte Planung
und Umsetzung, wie man sie seit Jahren gewohnt ist. Im Zweifelsfall werden die
Pixelkonstrukte beim Endkunden verkleinert oder vergrößert dargestellt,
dadurch unscharf oder komisch gekrümelt, je nach Density-Wert. Nicht nur
Auraggeber hätten damit Probleme.

Doch der Trend geht trotzdem ganz klar weg vom klassischen Pixel, dessen
Breite man „irgendwo zwischen 0,2 mm und 0,3 mm“ ansiedeln konnte. Das
Hardwarepixel wird heutzutage immer kleiner, flexibler und unberechenbarer,
und damit letztlich auch immer unwichtiger, zumindest als Einheit zum Rech-
nen und Layouten. Es lohnt sich im Gegenzug mehr denn je, auf Vektorgrafi-
ken und -fonts zu setzen, wo immer es geht, und auf Pixelgrafiken für Layout-
elemente möglichst zu verzichten!

Noch sind wir allerdings nicht so weit, das Pixel vollständig vernachlässigen zu
können, denn es gibt mehr als genug konventionelle Bildschirme, auf denen
man sehr wohl unscharfe Halbpixelkanten erkennen kann, welche bei der Ska-
lierung von Vektorformen omals entstehen. Man beachte insbesondere die
untere Kante des 40-Pixel-Icons (ganz rechts):

6. Kleine Anmerkung für die nerdigen Leser: Die Sache mit dem Viewport-Zooming auf
Smartphone-Browsern lasse ich an dieser Stelle aus, weil es meine Erläuterung unnötig
kompliziert machen würde. Aber: Ja, das käme als weitere Abstraktionsschicht potenziell
auch noch hinzu.
#webtypobuch – 25

Bei der Produktion von Icon-Sets – ob vektorbasiert oder nicht – verwenden


professionelle Screendesigner nach wie vor ein 32er- oder 48er-Raster, um
solche Nebeneffekte zu reduzieren. Aber in ein paar Jahren, so glaube ich, wird
unseren Kindern der Pixelfetischismus im Webdesign der Nuller- und Zehner-
jahre ähnlich lustig erscheinen wie uns die drolligen Pixelklötzchen der 8-Bit-
Games aus den Achtzigern.

Schriftwahl in Zeiten hoher Pixeldichte


Als Merkmale einer besonders bildschirmgerechten Schri galten bisher
Robustheit, eine vereinfachte Formensprache und der Verzicht auf verspielte
Details. Bei Mengentexten zwischen 9 und 16 Gerätepixeln blieb einem kaum
etwas anderes übrig, wenn die Schri halbwegs nach etwas aussehen sollte. Dies
ist einer der Gründe dafür, dass auch heute noch viele Webdesigner im Fließ-
text eher auf websichere Systemschrien vertrauen, selbst wenn sie sich für die
Überschrien längst spektakuläre Webfonts besorgt haben. Die Kollegen
scheuen sich davor, Schriarten mit komplexen Formen in kleinen Schrigra-
den einzusetzen.

Doch sieht die Situation nicht mit den jetzt in Mode kommenden High-PPI-
Bildschirmen ganz anders aus? Wenn auf dem neuen MacBook Pro eine Web-
site mit einer 14-Pixel-Georgia daherkommt, werden dort ja physikalisch
28 Pixel in der Höhe verwendet, und in der Breite verdoppelt sich die Darstel-
lungsdichte ebenfalls. Wie wirkt sich diese Vervierfachung der Pixelmenge auf
unsere Georgia aus?
#webtypobuch – 26

Leider nicht besonders gut. Natürlich sind die Linien alle glatt und quasi pixel-
frei. Doch die eher langweiligen und wenig überraschenden Kurven der
Georgia wurden nicht für diese hohe Auflösung gemacht, und somit wirkt die
retinafizierte Georgia – wie alle anderen websicheren Schrien – seltsam blut-
leer und spannungsarm. Gerade die vereinfachten Formen, welche die websi-
cheren Schrien in kleinen Graden zu gerne genutzten und exzellent lesbaren
Standards gemacht haben, werden ihnen nun zum Verhängnis. Dreht man die
Rasterdichte rauf, zeigt sich der fehlende Biss!

Doch kann man überhaupt beides haben? Optimale Darstellung auf klassischen
Bildschirmen und individuelle, spannende Formgebung für die Retina-Welt?
Sicherlich wäre es möglich, mehrere Versionen einer Schri zu gestalten, die
auf den gleichen Proportionen auauen, aber unterschiedliches Detailreichtum
besitzen. Oder man ho auf eine verbesserte Darstellungstechnik seitens der
Betriebssysteme, die die optimierenden Vereinfachungen für grobe Rasterung
automatisch selber vornimmt. Nicht undenkbar wäre es auf jeden Fall, ab-
hängig von der Pixeldichte mit unterschiedlichen Fette-Stufen zu agieren. Da
unter hohen Auflösungen konventionelle Webfonts eher zu fett wirken, könnte
man versuchen, solchen Systemen eine magerere Variante auszuliefern, falls
vorhanden.

Letztlich ist dies eine noch nicht ausreichend erforschte Herausforderung, wird
aber – Hand aufs Herz – nur sehr pingeligen Designeraugen auffallen. Behalten
Sie einfach im Hinterkopf, dass man zwar freilich jede Vektorschri beliebig
groß skalieren kann, dass aber nur bestimmte Schrien in starker Vergröße-
rung auch wirklich gut aussehen!

Anmerkung: Naturgemäß war es mir nicht möglich, überzeugende Abbildun-


gen zu dieser ematik zu erstellen. Zu wenig kann ich über die Darstellungs-
technik des Mediums Bescheid wissen, auf dem Sie diese Zeilen lesen.
Verbringen Sie einfach ein bisschen Browserlesezeit auf einem iPad 3/4 oder
einem MacBook Pro mit Retina-Display und bilden Sie sich Ihr eigenes Urteil.
#webtypobuch – 27

Vom Vektor zum Pixel: Rasterizer


(Zunächst ein Hinweis: Wir sprechen in diesem Kapitel ausschließlich von
Gerätepixeln. Davon abweichende logische Pixel oder CSS-Pixel haben mit der
hier beschriebenen Darstellungstechnik nichts zu tun.)

Aus Gründen existieren heute die allermeisten Schriarten in Form von digita-
len Vektordateien, im Gegensatz zu den Pixelfonts der Heimcomputer-Frühzeit.
Und das im vollen Angesicht der Tatsache, dass Bildschirme immer noch ledig-
lich aus Pixelzeilen und Pixelspalten bestehen; die Bildschirmmatrix ist eigent-
lich gar nicht in der Lage, die Vektorformen eines modernen Fonts darzustel-
len! Vektoren sind mathematische Beschreibungen von Linien und Kurven,
besitzen keine definierte Auflösung und werden schon gar nicht mittels einer
Pixelmatrix definiert. Sie sind vielmehr theoretische Gebilde, welche man sich
zunächst als nackte Auflistung von Koordinaten vorstellen kann.

Die Vektor-Bézierkurven eines Buchstaben

Um ein solches Gebilde nun aber doch auf einem Bildschirm sichtbar zu
machen, muss der Rechner es erst für den Kontext einer Pixelmatrix umwan-
deln. Dieser Vorgang nennt sich Rastern und wird meist vom Betriebssystem
erledigt; das zuständige Sowaremodul ist der Rasterizer. Nun wäre dies ein
kurzes Kapitel, wenn es eine offizielle mathematische Formel gäbe, nach der die
Konvertierung „Fontvektor zu Fontpixel“ zu handhaben wäre. Doch so einfach
ist es nicht, denn ein Rasterizer muss ein Stück weit intelligent sein und die
Schri nicht nach streng mathematischen, sondern auch nach visuellen
#webtypobuch – 28

Gesichtpunkten darstellen, und dabei bisweilen sogar psycho-optische Schwä-


chen des menschlichen Auges ausnutzen.

Doch fangen wir von vorne an. Die einfachste und direkteste Art, Schri auf
dem Bildschirm darzustellen, ist die 1-Bit-Methode: schwarze Pixel auf
weißem Hintergrund. Oder umgekehrt. Oder auch in Farbe – auf jeden Fall
wird die Buchstabenform auf einer simplen Matrix mit lauter ja/nein-Optionen
abgebildet. Wenn eine einzelne Pixelfläche von der Original-Vektorform mehr
als 50 % überlagert wird, füllt man das Pixel, ansonsten nicht.

Bis heute gibt es eine Reihe von Windows-Anwendern, die auf diese Art der
Darstellung schwören, weil sie – zugegebenermaßen – die maximale Schärfe
des Schribilds garantiert. Das Hauptproblem ist jedoch: Mit rein rechneri-
schen Methoden lässt sich eine Vektorschri nicht überzeugend auf ein 1-Bit-
Pixelraster übertragen, es sei denn, sie ist bereits exakt für diesen Schrigrad
optimiert oder verwendet diverse Tricks. Dazu gleich mehr.

Bei der hier zu begutachtenden Graustufen-Glättung geht der Rasterizer subti-


ler vor: Je mehr Pixelfläche durch die Vektorfläche überdeckt wird, desto dunk-
ler stellt man das Pixel dar. Die Formeln dafür sind simpel – doch auch hier tut
man sich schwer, wenn man rein mathematisch vorgeht. Unvollständige Pixel
in ungünstiger Platzierung werden zu matschigen Störfaktoren und machen
das Schribild unscharf. Dieses Problem wird allerdings immer irrelevanter, je
feiner wir unser Pixelraster aufziehen, was immer dann der Fall ist, wenn wir a)
#webtypobuch – 29

der Schri einen höheren Schrigrad verpassen oder b) die Pixeldichte des
Gerätes sich vergrößert, wie beispielsweise bei Apples Retina-Bildschirmen
(siehe vorherige Abschnitte).

Dennoch ist die Graustufen-Glättung noch nicht das Ende der Fahnenstange.
Die Soware-Hersteller suchten um die Jahrhundertwende fieberha nach
Methoden, um die Schridarstellung am Bildschirm weiter zu verbessern. Sie
entwickelten schließlich eine geniale Methode, die einem Zaubertrick nicht
unähnlich ist: die Verdreifachung der Auflösung eines einzelnen Pixels. Beim
sogenannten Subpixel-Antialiasing macht man sich die Tatsache zunutze, dass
fast alle modernen LCD-Monitore aus dreigeteilten Pixeln aufgebaut sind. Die
streifenähnlichen Teilpixel leuchten von links nach rechts in den Farben Grün,
Blau und Rot und bilden damit den RGB-Farbraum ab. Wenn man nun ein
Pixel statt in neutralem Grau (alle Farben gleichermaßen aktiv) in Grün leuch-
ten lässt, verschiebt sich der Dunkelheitsschwerpunkt nach rechts; rote Pixel
neigen sich etwas nach links. Diese Schwerpunktverschiebung innerhalb eines
Pixels kann man sich für die noch feinere Schriglättung zunutze machen. Aus
der Distanz erkennt man die Einfärbung kaum, und die Schri wirkt insgesamt
schärfer und besser lesbar.

Ob man die Subpixelglättung für extrem hochaufgelöste Bildschirme überhaupt


benötigt, sei dahingestellt. Sie hat uns in den vergangenen zehn Jahren auf
jeden Fall wertvolle Dienste geleistet und insgesamt zur Akzeptanz von geglät-
teten Schrien beigetragen. Auch wenn einige Puristen davon nichts wissen
#webtypobuch – 30

wollen: Typografische Kultur mit reinen 1-Bit-Fonts ist nur sehr schwer zu eta-
blieren. Erst die geglättete Darstellung lässt uns interessante Webfonts mit indi-
viduellen Details genießen.

Doch es bleiben einige Stolpersteine – und diese stecken in den unterschiedli-


chen Technologien, welche für das Rastern von Vektorfonts verantwortlich
sind. Sie sind nicht nur vom verwendeten Betriebssystem abhängig, sondern
auch vom Browser und sogar dem Format der zugrunde liegenden Schridatei.
Die Notwendigkeit, alle diese Faktoren in ihren Details zu beschreiben, sehe ich
an dieser Stelle nicht. Wer es ganz genau wissen will, darf als freiwillige Haus-
aufgabe einen herausragenden Artikel von Tim Ahrens aus dem Smashing
Magazine durcharbeiten: „A Closer Look At Font Rendering“.7 Wir bleiben hier
bei den Grundlagen, die für den typografischen Alltag völlig ausreichen.

Windows und Hinting


Unter Windows existieren zwei verschiedene Systeme, Schrien darzustellen:
GDI/GDI+ (XP, Vista, Windows 7) und DirectWrite (Vista SP2 mit Platform
Update, Windows 7, Windows 8). Beide Systeme können wahlweise das Sub-
pixel-Glättungsmodul namens ClearType in Anspruch nehmen, welches unter
DirectWrite noch einmal deutlich erweitert und verbessert wurde.

Doch egal welche Version von ClearType gerade aktiv ist: Die Windows-Ent-
wickler haben sich dem Paradigma der möglichst scharfen Schridarstellung
verschrieben und gehen dabei verhältnismäßig progressiv vor. Um verwaschene
Schri zu verhindern, versucht Windows, möglichst viele Buchstabenbestand-
teile exakt auf dem Pixelraster abzubilden und nur wenige Stellen „zwischen
den Pixeln“ zu platzieren. Auch die Fette der Linien sollte möglichst exakt den
Maßen eines Pixels entsprechen, um graue Ränder zu vermeiden:

7. www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering
#webtypobuch – 31

Weil dieses Festtackern am Pixelraster mit einer frei gestalteten Vektorschri


freilich nur selten Hand in Hand geht, griffen die Schöpfer des TrueType-For-
mates zu drastischen Mitteln und erfanden das sogenannte Hinting (auch:
Instructions) und bauten es in den TrueType-Standard ein. Beim Hinting dreht
sich alles um eine Reihe von Zusatzinformationen, die in der Fontdatei gespei-
chert werden und zur besseren Bildschirmdarstellung beitragen sollen. Grob
gesagt erklären die Hinting-Anweisungen dem Rasterizer die Formsemantik
der einzelnen Zeichen, damit diese in gezielter Weise verformt werden können,
um besser ins Pixelraster zu passen und letztlich für den menschlichen
Betrachter schärfer zu wirken. Es wird festgelegt, welche Linien wichtiger sind
als andere, wie fett einzelne Bereiche der Glyphen im Bezug auf das Pixelraster
sein sollen, und welches die erwünschten Ankerpunkte sind, um diese Fette zu
regulieren.

Hinting lässt sich auf Seiten des Schrientwerfers mit unterschiedlich hohem
Aufwand betreiben. Wer es richtig ernst meint, hintet von Hand und kann
dabei diverse Schichten durcharbeiten: 1-Bit-Darstellung, Graustufen und
ClearType. Wer extrem viel Zeit hat, macht auch noch einzelne Anpassungen
für diverse Skalierungsgrade: 9px, 10px, 11px und so weiter. Die am aufwen-
digsten manuell gehinteten Schrien sind wahrscheinlich die Core Fonts von
Microso (siehe Kapitel zur Schriwahl). Noch bis heute lassen es sich einige
verrückte Schrientwerfer nicht nehmen, ihre Werke von Hand für den Win-
dows-Markt zu optimieren, auch wenn diese spezielle typografische Nischen-
kunst tendenziell immer weniger wichtig wird.
#webtypobuch – 32

Hinting-Arbeitsumgebung in FontLab

Denn einerseits kann man Schrien heute auch durchaus automatisch hinten.
Die dazu benötigte Soware ttfautohint8 wird nach einer erfolgreichen Crowd-
funding-Aktion im letzten Jahr stetig weiterentwickelt. Andererseits steigt der
durchschnittliche Schrigrad von Websites stetig an, und es gibt immer mehr
High-PPI-Monitore, gerade bei Smartphones, so dass in Zukun nur noch
selten die besonders kritischen Schrigrade 8px–16px angefordert werden
müssen, die es ohne manuelles Hinting schwer haben, eine akzeptable Darstel-
lungsqualität zu erzielen.

Unabhängig vom ema Hinting hat sich mit dem neuen Windows-Rasterizer
DirectWrite einiges verbessert. Vorausgesetzt, die Browser unterstützen den
GDI-Nachfolger – was im Falle von Firefox von der Grafikkarte abhängt und
bei Chrome derzeit leider verneint werden muss –, lassen sich mit DirectWrite
neuerdings Schrien auch in Subpixeln platzieren, stufenlos skalieren, drehen
und anderweitig misshandeln: Die Darstellung bleibt dabei erstaunlich robust
und scharf. Von dieser Leistung in Extremsituationen kann sich der Mac

8. www.freetype.org/ttfautohint
#webtypobuch – 33

durchaus noch eine Scheibe abschneiden! Womit wir schon beim ema
wären.

Quartz unter OS X und iOS


Auf den aktuellen Apple-Betriebssystemen spielt Hinting interessanterweise
keine Rolle. Sämtliche entsprechende Regeln, die in TrueType-basierten
Schridateien enthalten sind, werden vom Darstellungsmodul Quartz schlicht
ignoriert. Statt dessen nimmt der Rasterizer direkt bei der Darstellung eine
automatische Anpassung an das Pixelraster vor, die einen etwas anderen
Schwerpunkt setzt als Microsos GDI oder DirectWrite: Unter OS X und iOS
gelten die ursprünglichen Vektorformen der Schriart als wertvolles Gut, wel-
ches nicht durch rücksichtslose Verformung zu beeinträchtigen ist. Der indivi-
duelle Entwurf einer Schri mit ihren Eigenheiten und Details soll erhalten
bleiben – im Zweifel auch zu Ungunsten der Schärfe.

Denn viele Windows-Nutzer beschweren sich über die verwaschenen und


angeblich zu fetten Schrien auf dem Mac. Als sich vor einigen Jahren Apple
erdreistete, auch die Windows-Version seines Safari-Browsers mit der Quartz-
Schriglättung auszuliefern, hagelte es Protest. Schnell ruderte der Konzern
zurück und setzte kurz darauf standardmäßig die jeweils vom Windows-OS
vorgegebene Darstellungstechnik ein.

Freetype unter Linux und Android


Zu Unrecht ist die Schriglättung unter Linux ein kaum diskutiertes ema
unter Typografie-Nerds. Eventuell liegt es schlicht daran, dass Gestalter immer
noch mehrheitlich auf den Mac schwören und maximal das weitverbreitete
Windows zu unterstützen bereit sind. Doch gerade angesichts des immensen
Erfolgs von mobilen Android-Geräten lohnt sich ein Blick auf die Schridar-
stellung von Linux-basierten Betriebssystemen.

Und es sieht gut aus! Die meisten Linux-Distributionen setzen für die Schri-
darstellung Freetype ein, welches wahlweise das eingebaute Hinting der Font-
dateien verwendet oder selbstständig während der Darstellung optimiert. Die
Qualität der Textdarstellung ist dabei insgesamt sehr akzeptabel. Die optische
#webtypobuch – 34

Fette der Glyphen liegt zwischen Mac und Windows, allein das Schribild
wirkt insgesamt ein wenig ruppiger, jedoch noch völlig im Rahmen.

Dass die üblichen Linux-Oberflächen Gnome, KDE und Unity allesamt kein
besonders glückliches Händchen bei der Wahl ihrer Systemschrien beweisen,
hindert uns Webdesigner nicht daran, mit großartigen Webfonts das typografi-
sche Niveau auf den alternativen Desktop-Betriebssystemen und der beliebten
Smartphone-Plattform ordentlich anzuheben.

Fazit
Wahrscheinlich ist es letztlich Geschmackssache. Durch den einprogrammier-
ten Drang der Windows-Rasterizer, die Buchstabenlinien immer in exakter
Pixelbreite – nicht schmäler, nicht breiter – darzustellen, wirken die Formen in
kleineren Schrigraden meist außerordentlich dünn und filigran. Zudem stim-
men die Proportionen der Buchstaben o nicht so recht, und das gesamte
Schribild neigt in manchen Fällen zum Flimmern, wenn man es von weiter
weg betrachtet und die Augen leicht zusammenknei. Auf dem Mac sieht hin-
gegen vieles recht fett und unscharf aus, insbesondere bei invers gesetzter
Schri (siehe nächstes Kapitel).

Eine Taktik, die wir seit einiger Zeit auf der praegnanz.de-Website erproben, ist
übrigens die Einbindung unterschiedlicher Schrischnitte des gleichen Fonts
für die diversen Betriebssysteme. So bekommen Windows-User die FacitWeb
in regular und bold ausgeliefert, während auf dem Mac mit der light und semi-
bold eine vergleichbare optische Fette erreicht wird. So etwas funktioniert frei-
lich nur bei Schrien mit entsprechend fein abgestuen Fetten, doch von denen
gibt es glücklicherweise immer mehr.
#webtypobuch – 35

Schriftdarstellung in Extremsituationen
Dass Schriglättung nicht gleich Schriglättung ist, haben wir im vorherigen
Kapitel besprochen. Doch es kommt noch komplexer und ein wenig nerviger.
Denn die geschilderten Verhältnisse beziehen sich in erster Linie auf den klas-
sisch-konservativen Schrisatz, sprich: dunkle Schri auf hellem strukturlosen
Grund, Zeile für Zeile in einem statischen Layout verbaut. Es gibt jedoch einige
Gestaltungsparameter und CSS-Effekte, welche entweder die Schriglättung
negativ beeinflussen oder eine optimale Schridarstellung auf andere Weise
korrumpieren. Hier einige Beispiele dafür, wo man grundsätzlich vorsichtig
sein sollte:

Text auf IE-Filter-Hintergründen


Eine beliebte Methode, um auch den älteren Browsern IE6 bis IE8 Farbverläufe
(und andere Effekte) zu entlocken, ist der gezielte Missbrauch der Microso-
eigenen filter-Eigenscha in CSS. Das sieht im Code ungefähr folgender-
maßen aus:

div.teaserbox  {
   filter:  progid:DXImageTransform.Microsoft.gradient(  
       startColorstr='#1e5799',  
       endColorstr='#7db9e8',
       GradientType=0  
   );
}

Nicht Teil des Webstandards – und im IE10 endlich abgescha – hat diese
Technik jedoch auch ihre Nachteile. Abgesehen davon, dass fürchterlicherweise
keine Ecken mehr per CSS abgerundet werden können, streikt auch die Schri-
glättung aller Textelemente, die sich visuell auf dem entsprechenden Kasten
befinden. Selbst dann, wenn sie nicht zum gefilterten HTML-Element selber
gehören. Der Text wirkt dann wieder wie unter Windows 95, komplett mit
1-Bit-Pixeln.
#webtypobuch – 36

Man könnte behaupten, dass Nutzer des Internet Explorers diesen Darstel-
lungsfehler üblicherweise gar nicht bemerken, oder, falls doch, sie es nicht
anderes verdient haben. Eventuell hätte man damit sogar Recht.

Rotation
Man kann sich seine Designvorlagen nicht immer aussuchen. Dieses Jahr
hatten wir einen Kunden, dessen Website komplett um ca. 4 Grad schräggestellt
werden sollte. Da ich manchmal einen perversen Spaß an der technischen
Herausforderung besitze, ließen wir uns darauf ein. Das grundsätzliche Layout
stellte sich als fast schon triviale Aufgabe heraus, da man mit der CSS3-Eigen-
scha transform:rotate(4deg) sehr pragmatisch und schnell arbeiten kann.
Der Haken ist die Schridarstellung der angeschrägten Textzeilen, welche in
Abhängigkeit von Betriebssystem und Browser zwischen akzeptabel und grau-
sam schwankt.

Unterschiedlichste Raster-Ergebnisse beim Rotieren

Das beste Resultat erzielt der Internet Explorer 9 unter Windows 7, weil hier
durchgängig das überlegene DirectWrite im Einsatz ist, welches in alle Richtun-
gen saubere und stufenlose Subpixelglättung ermöglicht. Auch Firefox läu
unter Windows 7 potenziell mit DirectWrite, allerdings nur unter bestimmten
#webtypobuch – 37

Voraussetzungen – die Grafikkarte des Rechners spielt dabei eine überraschend


wichtige Rolle.

Qualitätsmäßig dicht dahinter folgen Safari, Chrome und Opera unter OS X,


welche ebenfalls erträglich gut leserliche, wenn auch etwas unscharfe Textzeilen
hervorbringen.

Wieder etwas schlechter schlägt sich Firefox unter OS X, wo die Buchstaben


schon deutlich hinauf und hinab hüpfen – deren vertikale Position also offen-
bar an das Pixelraster des Bildschirms gebunden zu sein scheint.

Katastrophal hingegen ist die Schridarstellung unter GDI, also bei allen Win-
dows-XP-Browsern. Hier sieht man deutlich, dass die erste ClearType-Version
nur für die horizontale Optimierung ausgelegt war und mit als stufenlos ange-
dachten Verschiebungen auf der y-Achse nicht klarkommt. Die Folge: hässliche
Treppeneffekte in der Grundlinie der Textzeilen, was die Schri sehr schwer zu
erfassen macht.

Animation
Sobald ein HTML-Element fließend animiert wird – sei es per JavaScript oder
modernerer CSS-Transition –, wechseln in vielen Browsern die Glättungsme-
thoden lustig hin und her. Vor allem Safari auf dem Mac entwickelt eine
gewisse Eigenintelligenz und versucht, den Abschluss einer Animation selbst-
ständig zu erkennen, worauin wieder zu einer merklich fetteren Darstellungs-
methode gegriffen wird als während der Animation.

Die genaue Aufstellung, welche Browser sich bei welchem Animationseffekt


unter welchen zusätzlichen Umständen besonders schlecht benehmen, erspare
ich Ihnen an dieser Stelle – es wäre eine komplizierte Tabelle, die sich ständig
ändert, wenn neue Browserversionen auf den Markt kommen. Zur Veranschau-
lichung düre vorerst die folgende visuelle Dokumentation dienen:
#webtypobuch – 38

links: während der Animation, rechts: vor/nach der Animation

Inverse Schrift
Man könnte es als optische Täuschung auffassen, wenn es nicht doch so auffäl-
lig wäre: Die sowieso schon als zu fett geltende Schridarstellung unter OS X
wird noch extremer, wenn sie in weiß auf schwarz (oder generell hell auf
dunkel) gesetzt ist. Um dieses Problem zu umgehen, haben sich manch verwe-
gene Webdesign-Kollegen zwischenzeitlich sogar eines – inzwischen gefixten –
Bugs beholfen, indem sie die opacity des Textes auf 0.999 gesetzt haben, um
einen anderen Schridarstellungsmodus zu triggern, der visuell magerere
Schrien erzeugt.

Glücklicherweise fällt die fettere Darstellung vor allem bei Serifenschrien in


kleineren Schrigraden störend auf (siehe Darstellung oben). Bei den inzwi-
schen üblicheren 16 Pixeln aufwärts düre sich der Unterschied der negativen
zur positiven Schri optisch größtenteils erledigt haben. Und auf High-PPI-
Displays sowieso, weil hier selbst eine 11-Pixel-Georgia mit physischen
22 Pixeln gerastert wird.
#webtypobuch – 39

Kapitel 3:
Typografisches
Handwerkszeug
#webtypobuch – 40

Über die Leserlichkeit


Kaum ein ema beschäigt Setzer und Grafikdesigner seit Jahrhunderten so
sehr wie die optimale Leserlichkeit von Texten. Immer dann, wenn Typografie
ausschließlich dem Inhalt dient und sich nicht selber auffällig insziniert, geht es
in erster Linie um diesen heiligen Gral.

Leserlichkeit wird häufig mit Lesbarkeit verwechselt, und ganz falsch ist das
auch nicht: Die erste ist ein Teilbereich der zweiten. Während zur reinen Leser-
lichkeit in erster Linie typografische Faktoren beitragen, wie beispielsweise
Schriart, Größe, Buchstabenabstand, Zeilenabstand und Zeilenlänge, sind
zum Gesamtkomplex der Lesbarkeit auch orthografische und stilistische Quali-
täten wichtig. Rechtschreibfehler, falsche Interpunktion, Bandwurmsätze oder
zu viele Füllwörter verringern die Lesbarkeit und Erfassbarkeit eines Textes,
ohne dass der Layouter hierauf einen Einfluss hat.

Die folgenden emen innerhalb des Kapitels Typografisches Handwerkszeug


sind allesamt für eine optimale Leserlichkeit mitverantwortlich – manche mehr
und manche weniger. Wenn Niklas Lumann Recht hatte, und das Medium die
Message ist, können Sie bereits mit der nun folgenden typografischen Knigge
einiges dafür tun, dass Sie (oder Ihr Unternehmen) als souverän und professio-
nell wahrgenommen werden.

Die korrekten Sonderzeichen


Wenn doch alles so einfach wäre wie in Word! Zwar ärgern sich viele Nutzer
zurecht über die enervierende Eigendynamik, welche die Office-Soware häufig
an den Tag legt. Doch die Tatsache, dass zumindest "falsche" Anführungszei-
chen oder - zu kurz geratene - Gedankenstriche meist automatisch gegen die
„korrekten“ Versionen – und zwar in Windeseile – ersetzt werden, tilgt schon
einmal 70 % der Sonderzeichen-Sünden, die unbedare Hobbysetzer sonst ver-
ursachen würden.
#webtypobuch – 41

Dass viele HTML-Editoren und Content-Management-Systeme noch nicht so


weit sind, sieht man daran, dass selbst die Internet-Auritte großer Zeitungen
und Magazine bisweilen nicht in der Lage sind, elementare Satzregeln zu beach-
ten. Dabei ist das doch gar kein Problem, wie wir gleich sehen werden.

Vom & zum ;


Eines haben alle Sonderzeichen gemeinsam: Sie lassen sich auf insgesamt vier
Arten im HTML-Quelltext definieren. Zum einen ist es möglich und inzwi-
schen auch üblich, das HTML-Dokument im UTF-8-Format (Unicode) anzule-
gen und die Sonderzeichen einfach ohne weitere Kodifizierung einzugeben.

In manchen altertümlichen Server/Datenbank-Umgebungen, wo UTF-8 noch


nicht durchgängig verwendet wird, benötigt man jedoch eine sogenannte mas-
kierte Schreibweise. Dafür muss eine spezielle Kennung des gewünschten Zei-
chens zwischen einem kaufmännischen & und einem Semikolon ; platziert
werden. Diese Kennung kommt in drei möglichen Schreibweisen vor:

■ HTML-Entity: Sie besteht aus maximal sechs Buchstaben und ist eine
Abkürzung des englischen Ausdrucks für das entsprechende Zeichen. Zum
Beispiel wird die öffnende spitze Klammer folgendermaßen maskiert:
&lt; (lower than = kleiner als)

■ Unicode: Hier darf man die Raute # nicht vergessen, welche vor dem
eigentlichen Zahlencode gesetzt wird. Das „ß“ wird hier so erzeugt: &#60;

■ Unicode (hexadezimal): Eine Raute # plus ein x kennzeichnen ein


Unicode-Zeichen im hexadezimalen System. Unser „ß“ sieht dann so aus:
&#x003C;

Alle drei Möglichkeiten sind legitim und können auch vermischt eingesetzt
werden. Natürlich sind die HTML-Kennungen am leichtesten zu lernen. Die
wichtigsten sollte man auch tatsächlich auswendig können, alles andere schlägt
man bei SelfHTML9 nach. Wer mit einem HTML-Editor arbeitet, der Sonder-

9. de.seltml.org/html/referenz/zeichen.htm
#webtypobuch – 42

zeichen automatisch in Codes umwandelt, muss aber eigentlich nur die


richtigen Tastenkombination wissen, die ich auch hier in den Tabellen aufführe.

Umlaute und ß
Zu den deutschen Umlauten erspare ich mir weitschweifende Erklärungen,
besondere Satzregeln gibt es hier nicht. Anders beim „scharfen s“ (oder „Eß-
Zett“ für die norddeutschen Leser). Bis vor kurzem galt dies als der einzige
Buchstabe des deutschen Alphabets, der ausschließlich als Kleinbuchstabe exis-
tiert. Er wurde scheinbar nicht benötigt, denn kein deutsches Wort beginnt mit
einem ß. Die Tatsache aber, dass VERSALSATZ zur alltäglichen typografischen
Realität gehört, und sich viele gelungene Beispiele von selbstgebauten Versal-ß
nachweisen lassen, ließ progressive Typografen in den letzten Jahren umdenken
und für die Standardisierung dieses neuen Buchstaben kämpfen.

Vor allem im Internet formierte sich eine kleine Bewegung von Experten, die
schlüssig und nachvollziehbar die Notwendigkeit eines Versal-ß argumentieren
konnten und letztlich auch Erfolge erzielten: Im Frühjahr 2008 wurde der
Buchstabe offiziell in den Unicode aufgenommen, und immer mehr Fonts
werden nun mit einem entsprechenden Zeichen ausgestattet bzw. nachgerüstet.
Bis in die amtliche deutsche Rechtsschreibung hat es das große ß allerdings
noch nicht gescha. Da der Versalsatz jedoch eher eine typografische als eine
orthografische Angelegenheit ist, sind wir darauf nicht wirklich angewiesen.

Leider müssen beide Versionen des ß, wie viele andere Sonderzeichen auch,
beim Einsatz in Dokumenten mit veralteten Kodierungen vorher maskiert
#webtypobuch – 43

werden. Sie sollten sich allerdings grundsätzlich überlegen, ob das neue


Versal-ß im HTML-Quelltext überhaupt richtig aufgehoben ist. Wenn Sie ein
Wort oder einen Abschnitt in Versalien setzen möchten, ist dies über die CSS-
Eigenscha text-­‐transform:uppercase wesentlich eleganter lösbar als über
die irreversible und nicht-sematische Versalschreibweise direkt im Quelltext.
Ob dann die Soware wiederum so schlau ist, aus dem kleinen ß auch ein
großes ß10 zu zaubern, darf hingegen bezweifelt werden. Manche Browser sind
immerhin soweit an die deutsche Sprache angepasst, dass sie den im Duden
empfohlenen „SS“-Fallback verwenden. In einer perfekten Welt würde der
Browser bei der Anwendung der uppercase-Eigenscha jedoch erst nachsehen,
ob in der gerade aktiven Schri ein echtes Versal-ß vorhanden ist, und nur bei
bei negativem Ergebnis auf SS zurückfallen. Doch erklären Sie das mal den
amerikanischen Sowareentwicklern bei Apple, Mozilla und Microso! Selbst
unseren direkten Nachbarn in der Schweiz ist das alles zu kompliziert; die Eid-
genossen schreiben seit vielen Jahrzehnten überhaupt kein ß mehr – weder
klein noch groß – und kommen mit ss und SS ganz gut über die Runden.

Name HTML Unicode Unicode hex Eingabe Eingabe


Windows Mac
ä a-Umlaut &auml; &#228; &#x00E4; Ä Ä

Ä A-Umlaut &Auml; &#196; &#x00C4; ⇧Ä ⇧Ä

ö o-Umlaut &ouml; &#246; &#x00F6; Ö Ö

Ö O-Umlaut &Ouml; &#214; &#x00D6; ⇧Ö ⇧Ö

ü u-Umlaut &uuml; &#252; &#x00FC; Ü Ü

Ü U-Umlaut &Uuml; &#220; &#x00DC; ⇧Ü ⇧Ü

ß scharfes s &szlig; &#223; &#x00DF ß ß

ẞ Versal-ß &#7838; &#x1E9E

10. Ich verzichte im Rahmen dieses Buches weitestgehend auf eine native Darstellung des
Versal-ß, da ich eine Vorahnung habe, was ein E-Book-Reader damit Schlimmes
anzustellen in der Lage ist.
#webtypobuch – 44

„Anführungszeichen“
In deutschsprachigen Texten gibt es genau drei korrekte Arten, Anführungszei-
chen zu setzen, nicht mehr und nicht weniger. Zunächst die „klassische“ Vari-
ante: immer erst unten, dann oben! Die Form der Zeichen lehnt sich an die
Zahlen 99 und 66 an, weswegen dies eine beliebte Eselsbrücke ist. Das allgegen-
wärtige "Zollzeichen", mit ⇧ 2 schnell erzeugt, darf für Anführungen eigentlich
nicht verwendet werden.11

Leider sieht diese korrekte Form der Anführungszeichen in einigen Schrien,


darunter die Systemfonts „Verdana“ und „Courier“, etwas kurios aus. Das
liegt mutmaßlich an der mangelnden Sorgfalt der englischsprachigen Schri-
entwerfer, welche die deutsche Form der Anführungen keinem Ästhetik-Test zu
unterziehen scheinen. Ein Ausweg aus dem Dilemma ist die Verwendung der
«französischen Guillemets». In deutschen Texten üblicher sind aber die »umge-
kehrten Guillemets«. Beide haben den Vorteil, dass sie sich harmonischer in
den Zeilenverlauf einfügen; sie sind von daher manchmal die bessere Wahl.

Bitte niemals mischen! Im Rahmen einer einzelnen Publikation sollten immer


einheitliche Anführungszeichen verwendet werden. Und falls man, beispiels-
weise innerhalb einer wörtlichen Rede, weitere Anführungen benötigt, so
müssen diese in der ‚abgespeckten‘ Form gesetzt werden:

„Ich glaube ihm nicht“, sagte Markus. „Dieser hinterhältige Lügner meinte doch
glatt: ‚Ich bin dein Freund!‘ “ Betroffen wandte er sich ab.

11. Pragmatische Typografen haben jedoch nichts gegen den Einsatz der Zollzeichen in der
informellen digitalen Korrespondenz per Mail oder auf Twitter.
#webtypobuch – 45

Name HTML Unicode Unicode Eingabe Eingabe


hex Windows Mac
„ Anführungszeichen unten &bdquo; &#8222; &#x201E; Alt 0132 alt ^

“ Anführungszeichen oben &ldquo; &#8220; &#x201C; Alt 0147 alt ⇧ ^

‚ einfaches Anführungszeichen &sbquo; &#8218; &#x201A; Alt 0130 alt S

‘ einfaches Anführungszeichen &lsquo; &#8216; &#x2018; Alt 0145 alt #

« Guillemet &laquo; &#171; &#x00AB; Alt 0171 alt Q

» Guillemet &raquo; &#187; &#x00BB; Alt 0187 alt ⇧ Q

‹ einfaches Guillemet &lsaquo; &#8249; &#x2039; Alt 0139 alt ⇧ B

› einfaches Guillemet &rsaquo; &#8250; &#x203A; Alt 0155 alt ⇧ N

Horizontale Striche –
Es gibt – entgegen landläufiger Praxis – nicht nur den simplen Trennstrich.
Nein, er hat noch zwei große Brüder! Zum einen den Gedankenstrich, auch
Halbgeviert-Strich oder bis-Strich genannt. Im Englischen hat er sogar noch
einen vierten Namen: n-dash, weil er ungefähr die Breite eines n hat. Nur
logisch, dass der längste der drei Brüder der m-dash ist, oder auch Geviert-
Strich.

Der kurze Trennstrich (Divis) -

■ bei Silbentrennungen.

■ um zusammengesetzte Wörter zu gliedern: Fußball-Weltmeisterscha,


Rheinland-Pfalz, Leutheusser-Schnarrenberger, Groß- und
Kleinschreibung.

■ zum Durchkoppeln von Namen: Matthias-Grünewald-Gymnasium,


Willy-Brandt-Haus, Content-Management-System.
#webtypobuch – 46

Der Gedankenstrich (n-Dash) –

■ verrichtet bei Einschüben und Satzpausen – wenn es genehm ist – seinen


Dienst. Bitte nicht vergessen, ein geschütztes Leerzeichen vor dem Strich
zu setzen – sonst bricht dieser womöglich in die nächste Zeile um.

■ als bis-Strich ohne Leerzeichen: 7–8 Uhr abends, 2–3 Runden über den
Sportplatz, Ludwig van Beethoven (1770–1827).

■ als Streckenstrich, maximal mit einem halben Leerzeichen:


Mainz–Hamburg, die Begegnung Leverkusen – Rostock.

■ als Auslassungsstrich: 299,– Euro.

Das Minuszeichen −

sieht in den meisten Schrien genauso aus wie der Gedankenstrich, besitzt aber
eine andere Semantik und wird auch als eigenes Unicode-Zeichen geführt
(siehe Tabelle weiter unten).

Der Geviert-Strich (m-Dash) —

stammt aus dem englischen Satz, wird aber auch dort als eher konservativ-
altertümliche Form des Gedankenstriches—without surrounding spaces—ver-
wendet. Er sieht für deutsche Augen ungewöhnlich aus und sollte hier nur der
Vollständigkeit halber erwähnt werden.

Silbentrennung und Sollbruchstellen

Trennstriche werden in HTML niemals fest in den Code geschrieben. eore-


tisch sollten die aktuellen Browser inzwischen in der Lage sein, deutsche Texte
über das lang-Attribut zu erkennen und dann mittels der CSS-Eigenscha
hyphens:auto automatisch zu trennen.

Dies ist jedoch bisher noch Wunschdenken. Internet Explorer und Chrome
scheren sich in den aktuellen Versionen gar nicht um eine automatische Tren-
#webtypobuch – 47

nung, und Firefox ist lediglich auf die englische Sprache eingeschossen. Einzig
Safari bietet eine deutschsprachige Silbentrennung an.

Gezielt nachhelfen geht jedoch immer, und zwar über manuelle Sollbruchstel-
len innerhalb von langen Wörtern. Diese werden von allen Browsern akzeptiert
und dienen als Trennstellen, wo immer es sinnvoll erscheint. Damit man sie im
Quelltext wiederfindet, empfiehlt es sich, die maskierte Schreibweise &shy;
(so hyphen) zu verwenden. Ansonsten ist dieses reine Steuerzeichen im Quell-
text nämlich unsichtbar. Ein kleines Beispiel sei erlaubt:

Donau&shy;dampf&shy;schiffahrts&shy;gesell&shy;schaft

Suchmaschinen haben übrigens mit den so hyphens kein Problem; sie werden
bei der Indexierung ausgefiltert und zerstören nicht etwa das heilige Keyword-
Konzept des SEO-Meisters, wie manchmal befürchtet.

Name HTML Unicode Unicode Eingabe Eingabe


hex Windows Mac
- kurzer Trennstrich - - - - -
– Gedankenstrich &ndash; &#8211; &#x2013; Alt 0150 alt –
— langer Gedankenstrich &mdash; &#8212; &#x2014; Alt 0151 alt ⇧ —
− Minus &minus; &#8722; &#x2212;
- Sollbruchstelle (soft hyphen) &shy; &#173; &#x00AD; Alt 0173

Weitere wichtige Sonderzeichen ’ × ...

Das geschützte Leerzeichen (non-breaking space)

ist nützlich, um unschöne Umbrüche zu vermeiden. Wer also sicher gehen will,
dass bestimmte Wörter oder Zahlen nebeneinander stehen und nicht in die
nächste Zeile abrutschen, setzt ein geschütztes Leerzeichen: 17 Grad im Schat-
ten, Prof. Dr. Klaus Brinkmann, Er bekam die Note 6.
#webtypobuch – 48

Das schmale Leerzeichen

gibt es in einer normalen und einer umbruchgeschützten Version, wobei die


letztere deutlich nützlicher sein düre. Man kann das schmale Leerzeichen
wunderbar in allen Situationen einsetzen, wo man sich nicht sicher ist, ob ein
Leerzeichen tatsächlich angebracht ist oder nicht, beispielsweise: § 21, € 1.099,
128 kB/s, 38 cm.

Der Apostroph ’

Merket auf, hier ist Fehlerquelle Nr. 1. Es gibt definitiv nur eine einzige Mög-
lichkeit, einen Apostroph korrekt zu setzen, egal in welcher Sprache. Der Apo-
stroph hat die Form eines ganz normalen Kommas, befindet sich jedoch oben
und nicht unten. Das war’s. So schwer? Ein Akzent-Zeichen, egal ob so ´ oder
so ` hat damit nichts zu tun, genauso die einfachen schließende Anführungs-
zeichen ‘ oder gar das Minutenzeichen ′.

Die Ellipse …

Bei drei Punkten kann man nichts falsch machen, richtig? Falsch! Drei aufei-
nanderfolgende Punkte sind eine Ellipse und sollten immer durch ein entspre-
chendes Sonderzeichen ausgetauscht werden. Bei diesem sind dann die
Abstände zwischen den Punkten meist etwas größer, was die ganze Sache
hübsch macht. Wenn die Ellipse nicht gerade ein Wort unterbricht („Ich find’
dich sch…“), so sollte außerdem ein (geschütztes) Leerzeichen vor die Punkte
gesetzt werden …

Das Malzeichen ×

Wer die Maße von etwas angibt, braucht das Malzeichen: 34 × 23 × 8 cm. Auch
wenn es in vielen Schrien zunächst so wirken mag: Das Malzeichen ist nicht
identisch mit dem kleinen x. Letzteres besitzt nicht zwingend einen rechten
Winkel und hat in den entsprechenden Schrien sogar Serifen, ganz im Gegen-
satz zum rein geometrisch geformten Mal-Zeichen.
#webtypobuch – 49

Name HTML Unicode Unicode Eingabe Eingabe


hex Windows Mac
’ Apostroph &rsquo; &#8217; &#x2019; Alt 0146 alt ⇧ #

× Malzeichen &times; &#215; &#x00D7; Alt 0150

… Ellipse &hellip; &#8230; &#x2026; Alt 0133 alt .


geschütztes Leerzeichen &nbsp; &#160; &#x00A0; Alt 0160 alt <space>
schmales Leerzeichen &thinsp; &#8201; &#x2009;
geschütztes schmales &#8239; &#x202F
Leerzeichen

Schriftwahl und Leserlichkeit


Bei der Frage, welche Typen von Schrien sich am besten lesen lassen, scheiden
sich bereits die Expertenmeinungen. Folgende esen stehen dabei im Raum,
deren jeweilige Validität jedoch leider noch nicht zufriedenstellend wissen-
schalich erforscht ist:

■ Schriarten mit Serifen sind für lange Texte besser geeignet als Grotesk-
Schrien. Der Grund: Serifen tragen durch ihre Form und Platzierung zur
besseren Zeilenbildung bei und sorgen dafür, dass das Auge wie auf
Schienen besser durch den Text gleitet.

■ Am Bildschirm sind Serifenschrien unterhalb eines dargestellten


Schrigrades von 16 Pixeln in der Regel eine große Herausforderung für
die Leserlichkeit von längeren Texten. Nur wenige Schrien sind in der
Lage, auch in 14px oder gar 12px für eine überzeugende Leserlichkeit zu
sorgen.
#webtypobuch – 50

■ Ähnliche Buchstaben, die sich in kleinen Details voneinander


unterscheiden, erleichtern die Texterfassung, weil sie charakteristische
Silben- und Wortbilder erzeugen. Natürlich sollten die Zeichen trotzdem
die gleiche grundsätzliche Formensprache sprechen. Doch je weniger
direktes Formen-Recycling zwischen den Buchstaben betrieben wird, desto
weniger Irritationen entstehen beim schnellen Lesen. Dies gilt
insbesondere für die spiegelbildlichen Formen von q / p / d / b. Aber auch
die vom Skelett her ähnlichen Zeichen i / j oder r / n.

■ Leserlichkeit ist Übungssache. Schrien, die wir ständig um uns haben,


können wir auch schneller und sicherer lesen, völlig unabhängig von deren
Gestaltung. Dieser Faktor lässt empirische Studien über die Lesequalität
von existierenden Schrien schwierig werden, denn wo findet man
heutzutage noch neutrale Probanden, die im Alltag nicht überproportional
häufig Arial zu sehen bekommen?

Wie man es dreht und wendet: Um sorgfältige Praxistests oder einen reichen
Erfahrungsschatz kommt man bei der Wahl der Schriart nicht herum. Je
länger die Texte des jeweiligen Webprojektes sind, desto mehr Zeit sollten Sie
sich dafür nehmen. Die oben genannten Faustregeln sind von daher nur als ein
erster Anhaltspunkt zu verstehen und dürfen jederzeit gebrochen werden,
wenn man sich mit der tatsächlichen Leserlichkeit einer bestimmten Schri
ausgiebig beschäigt hat.
#webtypobuch – 51

Laufweite
Die Laufweite wird häufig mit der Zurichtung verwechselt. Letztgenannte ist im
deutschen Sprachraum inzwischen besser unter dem englischen Ausdruck
Kerning bekannt. Während bei der Zurichtung jedoch vereinzelte individuelle
Abstandskorrekturen vorgenommen werden, wo immer bestimmte Zeichenfor-
men aufeinandertreffen, handelt es sich bei der Laufweite um den Standard-
Abstand zwischen den Lettern, der sich natürlich auch global und unabhängig
vom Kerning ändern lässt. Eine besonders deutliche Vergrößerung der Lauf-
weite nennt man auch S p e r r e n.12

Viel subtilere Anpassungen der Laufweite gehören seit Jahrzehnten zum Hand-
werkzeug im Printbereich. Im Web stehen wir erst am Anfang, da die kleinst-
mögliche Einheit, die sich mit der zugehörigen CSS-Eigenscha letter-­‐
spacing erzielen lässt, bisher ein ganzer Pixel war – für die meisten Leseschri-
grade viel zu grob! Mit DirectWrite unter neueren Windows-Versionen wäre es
nun zwar möglich, auch bei der Laufweite Anpassungen im Subpixel-Bereich
zu machen, doch bisher ist dies in keinem Browser zufriedenstellend imple-
mentiert.

Die Erkenntnisse aus der Printwelt sind beim ema Laufweite relativ griffig in
einer Faustregel zusammenzufassen: Je kleiner die Schri gesetzt ist, desto
mehr Laufweite kann sie vertragen. Und zwei Ergänzungstipps: In Versalien
gesetzte Wörter und Phrasen benötigen quasi immer ein wenig mehr Laufweite,
während große Überschrien (ab 30px aufwärts) omals erst mit ein paar
Pixeln weniger Laufweite die notwendige Kompaktheit erlangen.

12. Sperren ist eine eher historische Form der Hervorhebung und wird heute meist nur noch
in entsprechenden Kontexten oder als Zitat verwendet.
#webtypobuch – 52

Abstand & Weißraum


Es ist inzwischen zu einem festen Ritual geworden: Wann immer mich mein
Kollege Philip in unserem Büro nach meiner Meinung zu einem Screendesign
befragt, antworte ich stets ohne hinzusehen: „Mehr Abstand, dann ist okay!“

So weit hergeholt ist dieser Running Gag allerdings in der Tat nicht; beinahe
jedes nur denkbare Screendesign gewinnt durch vergrößerte Abstände automa-
tisch an Qualität und Übersichtlichkeit – bewusste Kunstgriffe erfahrener
Typografen einmal ausgenommen. Zu viel Abstand gibt es eigentlich nicht!
Doch worauf bezieht sich dieser Abstand, und was bedeutet dieser ominöse
Weißraum?

Zunächst zu Letzterem: Weißraum bezeichnet die Gesamtheit der Abstands-


und Leerflächen in einem Layout. Er muss natürlich nicht wirklich weiß sein,
sondern bezieht sich sich auf die Farbe des jeweiligen Seitenhintergrundes
(= Fond). Auch wenn ich ein Webdokument mit dunklem Fond und weißer
Schri habe, dann sind alle Flächen, die weder mit Text noch mit Bildern oder
anderen grafischen Elementen zugebaut sind, als Weißraum zu betrachten.

Abstände hingegen beziehen sich meist speziell auf eine bestimmte Stelle im
Layout. Und es gibt viele verschiedene Abstandstypen, die ich hier unvollstän-
dig aufzähle: Spaltenabstand, Zeilenabstand, Randabstand nach oben/unten/
links/rechts, Kastenabstand, Innenabstand, Außenabstand, Absatzabstand,
Überschrienabstand, Buchstabenabstand, Wortabstand …

Mit Ausnahme der letztgenannten Buchstaben- und Wortabstände, welche


wieder anderen Regeln folgen, lässt sich bei allen anderen mit einer gewissen
Hemdsärmeligkeit sagen: „Zu viel schadet selten, zu wenig ist tödlich!“ Layouts
brauchen Lu zum Atmen, die Elemente dürfen nicht aussehen, als wären sie
nachträglich in die Lücken gequetscht worden. Es muss vielmehr so wirken, als
ob sich das Layout durch die organische Größe der Inhaltselemente ganz natür-
lich ergeben hätte; was bei gut gemachten HTML/CSS-basierten Layouts ja
auch tatsächlich der Fall ist.
#webtypobuch – 53

Spannender Weißraum in schwarz, visualisiert in rot (blackestate.co.nz)

Wenn man differenzierter an die Sache rangeht, muss man selbstverständlich


trotzdem Abstufungen betrachten; „50 Pixel Abstand für alles“ kann nicht die
Lösung sein! Es ist empfehlenswert, durch geschickte Wahl der unterschiedli-
chen Abstände solche Dinge als eine Einheit zu kennzeichnen, die auch tatsäch-
lich zusammengehören. Eine klassische Fehlerquelle sind hierbei mehrzeilige
Überschrien. Es ist unbedingt darauf zu achten, dass der Zeilenabstand der
Überschri geringer ist als die Abstände des Überschrien-Blocks zu den
umgebenden Blöcken, sonst kommt es zu fehlerhaen Zuweisungen des Be-
trachter-Auges:
#webtypobuch – 54

Zuviel Zeilenabstand in der Headline verwirrt das Auge


(leicht montiert zur Verdeutlichung)

Diese Regeln sind durch das Gestaltungsgesetz der Nähe begründet und gelten
quasi universell. Achten Sie deshalb darauf, die Abstände zwischen zugehörigen
Elementen geringer zu wählen als die Abstände zu lockerer verbundenen Ele-
menten.

Ein weiterer Aspekt: Weißraum, der durch die natürliche Beschaffenheit des
Inhalts entsteht, muss nicht unbedingt künstlich gefüllt werden. Wenn die
Hauptspalte etwas länger geworden ist, sind eben am Ende des Textes keine Sei-
tenboxen mehr zu sehen, was soll’s? Oder, ganz profan: linksbündiger Flatter-
satz, der manche Hobbygestalter nervös macht, weil der rechte Rand eines
Textabschnitts vermeintlich unordentlich aussieht. Lassen Sie es ruhig einmal
flattern! Ein lebendiger Umgang mit freien Flächen bringt o erst so richtig
Rhythmus und Spannung in ein Layout. Solange Sie darauf achten, dass jedes
Element an mindestens einer Kante eine gewisse Verankerung besitzt – zum
Beispiel an einer gedachten Linie zu anderen grafischen Elementen – kann man
es ruhig an einer anderen Kante frei fließen lassen. Hier ein Beispiel von unse-
rer eigenen Website:
#webtypobuch – 55

Kann man machen: nach rechts und unten flatternde Textblöcke

Wir hätten uns auch einen sechsten Textblock aus den Fingern saugen und alle
Texte so umschreiben können, dass sie exakt die gleiche Länge besitzen. Aber
dadurch, dass alle Blöcke an ihrer oberen Kante ordentlich fest aufgehängt sind
und die gleiche Spaltenbreite besitzen, ist genug Stabilität vorhanden, um die
Anzahl der Zeilen variabel zu halten. So bleibt der Inhalt König und muss nicht
durch schnöde Layoutzwänge korrumpiert werden.

Ob man die klassischen Innen- und Außenabstände (padding und margin)


dann in px, em oder %-Werten angibt, hängt vom verwendeten Layoutmodell ab
und spielt an dieser Stelle keine gewichtige Rolle – Hauptsache, sie sind ausrei-
chend groß!
#webtypobuch – 56

Zeilenabstand (ZAB)
Der Zeilenabstand bedarf noch einmal einer genaueren Betrachtung, da er für
die Leserlichkeit von Texten eine so elementare Rolle spielt. Grundsätzlich
bezeichnet man als Zeilenabstand die vertikale Entfernung der Grundlinie
einer Textzeile zur Grundlinie der nächsten Textzeile.13

Wer es sich ganz leicht machen möchte, wählt als Zeilenabstand einfach immer
1,5 und kann sich wieder schlafen legen. Wer es differenzierter angehen
möchte, kann eine ganze Reihe von Aspekten beachten, die zur Bestimmung
eines geeigneten Zeilenabstandes beitragen.

Am Anfang steht die Frage, für welche Textlänge ich einen Zeilenabstand
suche. Handelt es sich um eine Überschri, die maximal drei Zeilen umfasst
und insgesamt deutlich größer gesetzt ist als der Rest des Textes? Oder dreht es
sich um einen langen Fließtext, der außer einigen Absätzen kaum Binnenstruk-
tur aufweist? Wie breit ist die Spalte, in der sich dieser Text befindet? Auch die
verwendete Schriart spielt eine Rolle.

Trennscharfe Regeln sind gar nicht so einfach zu finden. Der zuverlässigste


Faktor ist tatsächlich der gesamte visuelle Eindruck beim kritischen Gestalter.
Dennoch haben sich ein paar Faustregeln etabliert, die man durchaus anbrin-
gen kann, um eine gewisse Ausgangsbasis zu haben:

Mindestens doppelte Versalhöhe


Betrachten Sie ein großes E oder H, verdoppeln Sie es im Geiste und stapeln sie
es über das Original. Wenn die obere Kante des verdoppelten Buchstaben über
die Grundlinie der oberen Zeile hinausragt, ist der ZAB aller Wahrscheinlich-
keit zu gering. Jedenfalls für längere Texte mit mehr als vier Zeilen.

13. Früher benutzte man bisweilen noch den Ausdruck Durchschuss, welcher aber nur im
Bleisatz wirklich sinnvoll war. Er bezeichnete den zusätzlichen Abstand von der
Kegelunterkante einer Textzeile bis zur Kegeloberkante der nächsten Zeile.
#webtypobuch – 57

Kleinere x-Höhen brauchen weniger


Wer Platz sparen möchte, wählt solche Schriarten, die eine kleine x-Höhe
besitzen, bei der also Kleinbuchstaben wie das a oder eben das x im Vergleich
zu den Buchstaben mit Oberlänge – also etwa A, E, f oder h – eher niedrig
geraten sind. Durch das Mehr an Platz, welches dadurch oberhalb der Klein-
buchstaben entsteht, vergrößert sich rein optisch der Zeilenabstand schon von
sich aus, ohne dass man den tatsächlichen Wert verändern muss.

Wie identifiziert man eine geringe x-Höhe? Nun, man sieht sich eine Schri
einfach an und betrachtet die Unterschiede zu anderen Schrien. Ein kleiner
Anhaltspunkt: Grundsätzlich sind es meist die etwas historisch angehauchten
Serifenschrien wie Garamond oder Palatino, welche geringe x-Höhen be-
sitzen. Schrien aus den letzten 25 Jahren (und die meisten Serifenlosen) haben
eine eher größere x-Höhe. Ausnahmen sind natürlich immer und überall zu
finden.

Überschriften folgen eigenen Regeln


Es kommt selten vor, dass mehrzeilige Überschrien mit der Faustregel 1,5-fach
an Eleganz gewinnen. Man sollte sogar überprüfen, ob nicht tatsächlich der im
Font eingebaute Zeilenabstand 1:1 schon gut funktioniert. Grundsätzlich kann
man sagen: Je größer der Schrigrad einer Headline, desto kleiner kann der
Zeilenabstand werden. Werte unter 1 sind dabei absolut erlaubt. Und selbst sich
berührende Unter- und Oberlängen müssen kein Tabu sein. Aber eben nur,
„wenn es besser aussieht“, um ein bekanntes Erik-Spiekermann-Plakat zu zitie-
ren.

Auswirkungen auf korrespondierende Elemente


Bei der Wahl eines Zeilenabstands darf der betreffende Textblock nicht isoliert
betrachtet werden! Alle umliegenden Elemente sollten auf den gewählten Zei-
lenabstand abgestimmt sein und wachsen in der Regel mit. Am einfachsten
lässt sich das am Abstand zwischen zwei Textabsätzen betrachten. Dieser sollte
proportional mit dem Zeilenabstand zusammenhängen, sonst wirkt der verti-
#webtypobuch – 58

kale Rhythmus gestört. Auch das Verhältnis zur Überschri oder dem Teaser-
Abschnitt ist wichtig; hier müssen die Fronten geklärt werden, sonst spielt dem
Betrachter das Gesetz der Nähe einen Streich, und er fasst im Kopf Elemente
zusammen, die gar nicht zusammen gehören (siehe Abstand & Weißraum).
Nicht zuletzt müssen natürlich auch die Zeilenabstände von Texten in einer
Marginalspalte oder Sidebar mit dem ZAB der Haupttextspalte harmonieren.
Subtile Unterschiede können hier bereits viel kaputt machen.

Fazit
Wenn ich mit den obigen Absätzen ein wenig Verwirrung gestiet haben sollte,
so war das selbstverständlich Absicht. Bei der Wahl des Zeilenabstandes muss
der Gestalter zwangsweise ein gutes Auge entwickeln, um Platzbedarf, Lesbar-
keit und ein ausgewogenes Gesamtbild unter einen Hut bringen zu können. Die
Faustregeln sind lediglich als grobe Anhaltspunkte gedacht und sollen beim
Üben helfen. Ich empfehle einen Ausflug zu typecast.com – eine grandiose
Spielwiese zum Testen von Schri- und Layoutfragmenten direkt im Browser.
#webtypobuch – 59

Grundlinienraster oder „Vertical Rhythm“


Vor einigen Jahren geisterte eine vermeintlich brandneue Layouttechnik durch
die Webdesign-Blogs. Losgetreten wurde die Idee von Richard Rutter in seinem
populären Artikel „Compose to a Vertical Rhythm“ aus dem Jahre 2006.14 Darin
beschreibt er in blumigen Musikmetaphern, dass es der generellen Leserlichkeit
und Harmonie gut täte, wenn die verschiedenen redaktionellen Ebenen eines
Webdokuments (Überschrien, Subheadlines, Absätze und Marginalboxen)
immer so gestaltet wären, dass alle Fließtextzeilen stets direkt auf streng regel-
mäßig gesetzten Hilfslinien stehen. Das Beispiel aus dem Artikel verdeutlicht
die Intention:

Nun ist das natürlich nicht falsch oder hässlich, sondern durchaus ein löblicher
Ansatz. Allerdings fangen wohl gerade die ersten Printdesigner bereits zu
Gähnen an, denn das sogenannte Grundlinienraster ist seit Jahrzehnten Teil
jeder halbwegs professionellen Layoutsoware. Hier kann man seinen Textzei-
len sogar per Knopfdruck gebieten, sich immer exakt auf einer Hilfslinie nie-
derzulassen, niemals dazwischen. Und das Konzept der Registerhaltigkeit
existiert im Buchdruck de facto schon immer. Dass nun aufgeschlossene Web-

14. 24ways.org/2006/compose-to-a-vertical-rhythm
#webtypobuch – 60

designer, endlich ermächtigt durch die neue Flexibilität mittels CSS, diese nütz-
liche Tugend in die Tat umsetzen können, ist in jedem Fall ein Schritt in die
richtige Richtung.

Sie sollten sich jedoch davor hüten, das Stilmittel des Grundlinienrasters als
Pflichtübung anzusehen. Ich habe die Erfahrung gemacht, dass es – je nach
genereller Komplexität des Layouts – durchaus eine Menge Arbeit machen
kann, die Integrität des Rasters beizubehalten. Eine automatische Snap-to-Grid-
Funktion sucht man in CSS nämlich vergeblich! Die Gestalter/in muss vielmehr
sämtliche Elemente genauestens im Auge behalten. Denn nur wenn für jeden
Elementtyp die Innenabstände, Außenabstände und Randlinien, sowie der
Schrigrad und der davon abhängige Zeilenabstand fehlerfrei zusammenspie-
len – natürlich in beliebig austauschbarer Reihenfolge – kann man ein Layout
tatsächlich als robust in seinem Verhältnis zum Grundraster bezeichnen. Und
wenn man es gescha hat, alle Elemente dergestalt aufeinander abzustimmen,
dass es am Fußende der Seite tatsächlich aufgeht, loggt sich der Kunde das erste
Mal ein, lädt ein falsch skaliertes Bild ins System und macht im Handstreich
alles wieder kaputt!

Aber ganz abgesehen davon, dass das Grundlinienraster eine fragile Angelegen-
heit ist: Auf dem Bildschirm wird es gar nicht so dringend gebraucht. Wo man
im Print in aller Regel ganze Seiten oder Doppelseiten auf einen Blick betrach-
tet, sehen die Besucher einer (modernen) Website immer nur einen – häufig
rauf- und runterscrollenden – Teilbereich des Layouts. Somit kann es uns rela-
tiv egal sein, ob am Ende der Footertext auf einer gedachten Linie steht, die Teil
eines Rasters ist, welches ganz oben im Headerbereich begonnen hat.

Also: Wer es ganz gut meint, außerdem ein eher bibliophil-minimalistisches


Layout im Sinn hat, und darüber hinaus volle Kontrolle über die verwendeten
Elemente des Quelltextes besitzt, kann sich das mit dem Vertical Rhythm gerne
zu Gemüte führen. In der täglichen Praxis ist der Gewinn an Eleganz selten den
Aufwand wert.
#webtypobuch – 61

Zeilenlänge, Spalten und mehr


Niemand liest gerne sehr kurze oder sehr lange Zeilen. Ein Blick in die Bild-
Zeitung verrät uns, dass 20 Anschläge pro Zeile visuell einfach nicht überzeu-
gend sind. Außer in leicht verdaulichen, maximal fünfzeiligen Fragmenten in
Teaserboxen oder Seitenspalten haben solch kurze Textzeilen nichts verloren.
Das andere Extrem, zu lange Zeilen, kennt jeder Wikipedia-Nutzer mit breitge-
zogenen Browserfenstern. Hier findet das Auge am Ende einer Zeile einfach
nicht mehr so leicht zum Anfang der nächsten Zeile zurück. Es empfiehlt sich
bei liquiden Layouts von daher immer, über max-­‐width eine Maximalbreite für
den Textbereich festzulegen.

Als optimal gilt im Allgemeinen eine Zeilenlänge von 50–80 Anschlägen. Über-
prüfen Sie diesen Wert gerne in gedruckten Romanen oder auf Websites, die
für hervorragende Leserlichkeit optimiert werden, wie informationarchitects.net
des geschätzten Kollegen Oliver Reichenstein.

Um beim Layout von Seiten und Doppelseiten flexibler agieren zu können,


haben sich gedruckte Zeitungen, Magazine und Illustrierte schon vor langer
Zeit für den Einsatz von Spalten entschieden. Hier reduziert sich in aller Regel
die Zeilenlänge auf ca. 40–50 Zeichen, was immer noch voll im leserlichen
Rahmen liegt, aber schon merklich die Ruhe aus dem Lesevorgang nimmt. Hier
geht es nicht mehr nur um den reinen Text, sondern verstärkt auch um unter-
schiedliche Gewichtungen im Gesamtlayout, visuelle Emotion und natürlich
Werbung. Kurz: Zu sehr soll der Leser gar nicht im Inhalt versinken.

Auf Websites sind mehrspaltige Texte jedoch ein eher sperriges und nicht
mediengerechtes Konzept. In den vergangenen Jahren war es schon rein
HTML/CSS-technisch kaum möglich, sie umzusetzen. Doch auch mit den
diversen Spaltenmodellen, welche in modernen Browsern durchaus umsetzbar
wären15, fremdelt es noch zwischen den Spaltenbefürwortern mit Printvergan-
genheit und websozialisierten Usability-Experten. Das fehlende Konzept einer
Seite, welche in Höhe und Breite fixiert ist, machen die Mehrspaltigkeit im Web

15. www.drweb.de/magazin/css-spaltenlayouts-die-zukunigen-moglichkeiten
#webtypobuch – 62

zu einer umständlichen Angelegenheit; die o notwendige Hin- und Herscrol-


lerei sowie die Unmöglichkeit, Bildschirmbreiten und -höhen vorherzusagen,
lassen mich Ihnen von Spaltenexperimenten abraten. Es sei denn, Sie bewegen
sich in einem sehr offenen und freien Kontext, wo nur wenig andere Faktoren
das Layout beinflussen.

Ausrichtung und Silbentrennung


Die Textausrichtung ist einer der am häufigsten falsch eingesetzten typografi-
schen Stilmittel im Web und anderswo. Der Standardzustand in allen Sprachen,
die von links nach rechts gelesen werden, ist hierbei natürlich die linksbündige
Ausrichtung. Aus bestimmten Gründen fühlen sich viele Amateurgestalter
jedoch dazu aufgerufen, statt dessen lieber zentrierten Text zu verwenden oder
gleich zum Blocksatz zu greifen. Es liegt ja alles nur einen Mausklick oder eine
text-­‐align-Eigenscha weit entfernt!

Nur ganz kurz abhandeln möchte ich zentrierten Text. Mit der Ausnahme von
Überschrien und zwei- bis dreizeiligen Teasertexten hat die Mittelachse im
professionellen Satz selten etwas verloren. Sie ist ein zuverlässiger Garant für
stilechten Amateur-Look und hätte die Kondolenzkarten und Grabsteine dieser
Welt besser nie verlassen.

Rechtsbündig ausgerichteter Text kommt in der Realität deutlich seltener vor,


und das ist auch gut so. Sein Einsatz ist tatsächlich nur für gezielte Kunstgriffe
im Rahmen eines freieren Layouts (beispielsweise bei Plakaten oder Werbean-
zeigen) legitim und für mehr als eine Handvoll Zeilen völlig ungeeignet.

Bleibt noch der hochgradig beliebte Blocksatz. Dieser ist leider meist das Ergeb-
nis von zuviel Macht und Sorglosigkeit in der Hand von Uneingeweihten. Doch
ich verrate Ihnen nun das Geheimnis: Blocksatz ist nur dann typografisch in
Ordnung, wenn er in vollem Bewusstsein seiner potenziellen Probleme sowie
unter zwei zwingenden Voraussetzungen eingesetzt wird: a) eine ausreichende
Zeilenlänge und b) eine funktionierende Silbentrennung.
#webtypobuch – 63

Doch zunächst der Grund, warum Blocksatz überhaupt so gerne verwendet


wird: Er beruhigt längere Textpassagen. Wenn alle Zeilen eines Textes exakt
gleich lang sind und stets von links nach rechts die gesamte Spalte ausfüllen,
sind die Fronten geklärt, und das Gehirn kann sich auf wichtigere Dinge kon-
zentrieren als ständig unterschiedliche Zeilenlängen wahrzunehmen, nämlich
das Verständnis des Textinhaltes.

Problematisch wird es jedoch, sobald mit dem Blocksatz ein zusätzlicher Irrita-
tionsfaktor einhergeht, der die Vorteile der glatten rechte Textkante wieder
zunichte macht: unregelmäßige und viel zu breite Wortabstände! Jede Form
von Blocksatz führt unweigerlich zu unterschiedlichen Wortabständen inner-
halb eines Absatzes. Zeilen, die normalerweise kürzer wären, erfahren eine
künstliche Verlängerung durch Vergrößerung der enthaltenen Wortabstände –
und je weniger Wörter pro Zeile, desto größer der Effekt. Ist keine Silbentren-
nung aktiv, wird es besonders schlimm. Und wenn der Text dazu noch auf
Deutsch verfasst ist, mit allerlei ellenlangen
Wortzusammensetzungskonstrukten, verteilt sich die Last bisweilen auf nur ein
oder zwei Wortabstände, die die jeweilige Zeilenstreckungsanforderung im
Alleingang schultern müssen.

Das Ergebnis ist stets unschön, und gerade im Web, wo die automatische
Silbentrennung per CSS-Anweisung noch in den Kinderschuhen steckt (siehe
Silbentrennung und Sollbruchstellen), tut man gut daran, extrem vorsichtig mit
der Anweisung text-­‐align:justify zu agieren. Doch selbst Leute, die sich
eigentlich mit langen Texten auskennen müssten, beispielsweise Sowareent-
wickler für E-Book-Reader, bekommen bisweilen keinen ordentlichen Block-
satz auf die Reihe:
#webtypobuch – 64

Schlechter Blocksatz in Amazons offizieller Kindle-Präsentation


(Hervorhebungen von mir)

Wirklich exzellenter Blocksatz ist ein typografisches Handwerk alter Schule,


welches viel mit manueller Optimierung und jahrelanger Erfahrung zu tun hat.
Den Aufwand dafür macht sich heute kaum jemand mehr, und im Web können
wir froh sein, wenn es eines Tages eine halbwegs akzeptable automatische
Lösung gibt, welche trainierten Augen nicht mehr ganz so wehtut, wie es der-
zeit leider o der Fall ist.

Eine Ode hingegen würde ich verfassen auf die simpelste und naheliegendste
Methode der Ausrichtung: den linksbündigen Satz. Es gibt nur selten einen
Grund, eine andere Textausrichtung zu verwenden, denn linksbündig ist
schick, trendy und klassisch zugleich. Das Gesamtlayout erhält mehr visuelle
Spannkra und Lebendigkeit, und das Auge kann sich besser an den prägnan-
ten Kanten der unterschiedlichen redaktionellen Ebenen festhalten. Ich stelle
mir ein Layout mit mehreren linksbündigen Absätzen, Kästen und Bildunter-
schrien immer ein wenig wie eine Ansammlung von Fahnen vor. Die Fahnen-
stange ist die linke Kante der Textabschnitte. Sie ist der stabile Faktor, während
die eigentlichen Textzeilen alle vom gleichen Westwind gen Osten getrieben
werden, und dabei fröhlich flattern. Feste Verankerung links und lebendiges
Spiel nach rechts, so baut man moderne und aktive Textblöcke, die man viel
#webtypobuch – 65

lieber liest als tote Bleiwüsten im gleichgeschalteten Rechtecksformat. Soviel


Polemik muss sein.

Kontraste und inverser Satz


Viel wurde – und wird immer noch – gestritten um das richtige Helligkeitsver-
hältnis zwischen Hintergrund- und Schrifarbe, vulgo: Kontrast.16 Einige
Designer (vor allem solche, die längeren Textinhalt lediglich als zu verteilende
Gestaltungsmasse ansehen) haben sich auf geringe Helligkeitskontraste einge-
schossen. Hellgraue Schri auf weißem Grund oder gar mausgraue Schri auf
steingrauem Grund werden als kreative Layoutelemente eingesetzt. Auf der
anderen Seite steht die Usability- und Accessibility-Polizei, die mit inquisitori-
schem Ehrgeiz möglichst alle Schridarstellung mit der brutalen Kontrastkeule
auf #000 und #FFF zu korrigieren strebt.

Selbstverständlich hat keiner der beiden Gruppen uneingeschränkt Recht. In


der Praxis hat es sich bewährt, einen weißen Hintergrund mit ca. 80-prozenti-
gem Schwarz zu bespielen, also etwa #333 oder #444. Wenn farbige Hinter-
gründe im Spiel sind, lohnt sich der Einsatz eines Kontrast-Prüfungstools,
welche im Internet leicht zu finden sind.17 Achten Sie am besten auf WCAG2-
oder BITV2-Konformität ihrer gewünschten Kontrastwerte, denn diese offiziel-
len Verordnungen zur Barrierefreiheit sind ein guter Anhaltspunkt für die
Grenzen der Kontrastfreiheit und orientieren sich insgesamt auch an vernüni-
gen Werten.

Womit ich persönlich überhaupt nicht klarkomme, sind hingegen invers


gesetzte Texte, also hellere Schri auf dunklerem Grund. Rein rechnerisch kann
der Kontrast hier zwar genauso groß oder klein sein wie auf dem positiven

16. Im Schrientwurf spricht man auch von Kontrast, meint damit aber meist den
Strichstärkenkontrast, also die unterschiedlich breiten Linien innerhalb einer Glyphe. Dies
hat mit dem Helligkeitskontrast, um den es hier geht, nichts zu tun.
17. leaverou.github.com/contrast-ratio
#webtypobuch – 66

Spektrum (die WCAG/BITV-Anforderungen sind also erfüllt), doch es flim-


mert in den Augen und bildet ein Abbild auf der Netzhaut, welches auch noch
einige Sekunden später beim Blick in die Ferne sichtbar bleibt.

Wenn Sie sich nicht sicher sind, ob ihre Augen möglicherweise ähnlich veran-
lagt sind, besuchen Sie das beliebte Apple-Partisanenblog daringfireball.net und
lesen zwei oder drei Bildschirmhöhen. (Alternativ tut es wahrscheinlich auch
ein beliebiges Gothic- oder Black-Metal-Forum …) Meines Erachtens hat es
schon einen praktischen Grund, dass 98 Prozent der Websites mit hellem Hin-
tergrund und dunkler Schri daherkommen. Ich will ihnen den inversen Satz
nicht kategorisch verbieten, aber bei längeren Texten sollten Sie sich lieber
zweimal überlegen, ob eine vermeintlich originelle Gestaltung wichtiger ist als
ein angenehmes Lesegefühl.
#webtypobuch – 67

Kapitel 4:
Die richtige Schrift
#webtypobuch – 68

Websichere Schriften
Ich könnte es mir natürlich auch leicht machen. Ich könnte behaupten, dass es
in Zeiten von komfortablen Webfont-Sammlungen wie Typekit oder Google
Web Fonts gar nicht mehr sinnvoll ist, bei der Schriwahl zwischen nativen
Systemfonts und eingebundenen Webfonts zu unterscheiden. Schließlich
werden diese im Browser letztlich auf identischem Wege dargestellt, spielen
technisch also in derselben Liga.

Doch in ein paar Punkten unterscheiden sich diese beiden Gruppen von Fonts
immer noch. Deshalb hier eine gesonderte Betrachtung derjenigen Schrien,
welche zwischen 1993 und 2009 de facto die einzigen waren, die man ruhigen
Gewissens bei der Gestaltung von Websites einplanen konnte: die Websicheren
Schrien (Web Safe Fonts).

Die allgemein akzeptierte Definition (= meine) spricht hierbei von Schrien,


die folgende Kriterien erfüllen:

■ Sie können über eine simple Angabe in HTML oder CSS verwendet werden,
ohne externe Referenzierung oder Einbettung.

■ Sie müssen folgerichtig auf einem Großteil der Computer installiert und ak-
tiviert sein, auf denen die Website betrachtet werden soll.

■ Sie sollten speziell für die Bildschirmdarstellung, gerade in kleineren Schri-


graden (9–16px), optimiert sein.

Das Problem dieser Geschichte: Wenn man mit „Großteil der Computer“ einen
Wert von mindestens 95 % im Visier hat, schrump die Fülle an typografischer
Vielfalt ganz schnell zu einer kleinen Gruppe von alten Bekannten zusammen:
Arial, Arial black, Times New Roman, Verdana, Georgia, Trebuchet MS, Cou-
rier new und unter Umständen noch Lucida Grande/Sans, Tahoma oder Comic
Sans.
#webtypobuch – 69

Diese Schrien sind die einzigen ihrer Art, welche in den späten Neunzigern
sowie den Nullerjahren mit einer hohen Wahrscheinlichkeit auf beiden großen
Desktop-Betriebssystemen (Windows & Mac) zu finden waren. Durchaus kein
Zufall, denn es gab natürlich das Bestreben, hier eine Art gemeinsame Basis zu
schaffen. Interessanterweise hatte Microso den richtigen Riecher und enga-
gierte im Jahr 1996 unter anderem den hochgeachteten Schrientwerfer
Matthew Carter, einige Schrien speziell für den Bildschirmeinsatz zu produ-
zieren. Die Initiative nannte sich „Core Fonts for the Web“ und bescherte uns
beispielsweise Verdana, Georgia und Trebuchet MS.

Die offizielle Liste dieser Microso-Kernschrien umfasst insgesamt zehn


Fonts18, ist aber in der Praxis nicht deckungsgleich mit dem, was man tatsäch-
lich im Netz einsetzen konnte. Denn einerseits gab es ja noch andere Betriebs-
systeme außer Windows, welche jeweils nur eine Teilmenge dieser Schrien
abdeckten, andererseits waren (und sind) auch gestalterische und technische
Zweifel angebracht, ob beispielsweise die brachiale Impact mit ihren winzigen
Binnenform-Schlitzen tatsächlich auch in 12px noch eine souveräne Figur
macht.

18. de.wikipedia.org/wiki/Core_fonts_for_the_Web
#webtypobuch – 70

Nur als Headline halbwegs leserlich: die Impact

Den meisten dieser Schrien gemein ist jedoch ihre wirklich aufwendige tech-
nische Optimierung für niedrige Schrigrade. Es ist ohne größere Schwierig-
keiten möglich, selbst die 9-Pixel-Darstellung zu lesen – wenn sie auf
modernen 150-ppi-Bildschirmen denn nur nicht so winzig wäre! Diese Robust-
heit am Screen erreichen die Websicheren Schrien über zwei Maßnahmen:

1. Einfache Formensprache. Eher generisch und gerne auch ins Klobige oder
Charakterlose gehend, ohne schmückende Verzierungen oder liebevolle
Details. Es dominiert ein modulhaer Gestaltungsansatz mit konsequentem
Recycling von Buchstabenbestandteilen, um die Komplexität zu verringern
und so die Robustheit zu erhöhen.

2. Sorgfältiges Hinting. Man überlässt die Darstellung kleinerer Schrigrade


nicht einfach dem Betriebssystem, sondern reichert die Buchstabenformen
mit einer gewissen Semantik an, welche dem Rasterizer mitteilt, wie er die
Glyphen an bestimmten Stellen zu quetschen oder zu dehnen hat, um sie
ordentlich an das gerade benötigte Pixelraster anzupassen.
#webtypobuch – 71

Die Bedeutung von Hinting/Instructions wurde ja im Abschnitt Windows und


Hinting bereits genauer erläutert. Wichtig zu wissen ist an dieser Stelle, dass die
allgemein bekannten Systemschrien zu den am sorgfältigsten gehinteten
Schrien überhaupt gehören, und das verdient eine Menge Respekt! Niemand
käme auf die Idee, eine andere Schriart außer Verdana oder Arial in einer
Größe von 9 oder 10 Pixeln einzusetzen – jedenfalls nicht unter Windows XP –,
weil bei diesen Schrigraden fast jeder andere Font kläglich versagt und sich in
hässlichen Pixelmatsch verwandelt.

Bei all diesen Überlegungen zu groben Rastern und genereller Klobigkeit


könnte man leicht auf den Gedanken kommen, den Spieß einmal umzudrehen!
Warum nicht beim Entwurf einer neuen Schri einfach mit den Pixeln begin-
nen, diese sorgfältig und lesbar manuell ins Raster setzen und aus dem Ergeb-
nis eine korrespondierende Vektorform ableiten? Man würde dadurch doch
den ultimativen Screenfont erhalten, der einerseits die kleinen Pixelraster ziel-
genau bedient, aber andererseits trotzdem frei nach oben skalierbar ist.

Ich muss Sie enttäuschen: Das ist keine brandneue Idee. Susanna Licko hat
bereits 1995 mit Base 9 und Base 12 zwei genau solche Schrien herausgebracht,
die auf Basis eines 9er- bzw. 12er-Rasters enstanden sind.

Die Base-Schrien waren sicherlich nicht uninteressant und passten auch zum
Techno-Zeitgeist der Neunziger, doch sie boten leider nicht das, was man in der
normalen Kommunikation gebraucht hätte: vertraut wirkende Formen für den
universellen Einsatz – sowohl im gedruckten als auch im pixelgerasterten Zu-
stand.

Doch werfen wir nach diesem kurzen Schlenker nun einen genaueren Blick auf
die – meines Erachtens – wichtigsten Vertreter der Websicheren Schrien. Vor-
hang auf!
#webtypobuch – 72

Arial & Arial black

Unter Gestaltern liefert sich die Arial seit jeher einen harten Kampf mit der
Comic Sans um den Status als unbeliebteste Schri aller Zeiten. Wobei dies ein
eher ungleicher Kampf ist: Während bei der Comic Sans sowieso Hopfen und
Malz verloren ist (die Diskussion ist ermüdend), nervt die Arial mit ihrer uner-
hörten Helvetica-Ähnlichkeit und gilt als schlampig durchgeführte Kopie des
berühmten Klassikers der Sechzigerjahre.

Ganz so einfach will ich es uns aber nicht machen! Selbstverständlich spricht
einiges dafür, dass Helvetica die direkte Vorlage war, als Monotype im Jahr 1982
die Arial schuf – übrigens nicht etwa Microso, wie omals kolportiert wird.
Aber auch die Helvetica ist 1957 nicht vom Himmel gefallen und besitzt mit der
Akzidenz Grotesk (1896) einen wesentlich älteren Vorläufer, der sich in Laien-
augen auch nicht stärker von der Helvetica unterscheidet als selbige von der
Arial. Zudem existieren mit der Neue Helvetica (1983) und der Neue Haas
Grotesk (2011) inzwischen zwei weitere digitale Interpretationen des gleichen
Stoffs. Man sollte also gelassen bleiben – schließlich sagt auch niemand etwas
Negatives über die mannigfaltigen Garamond-Versionen19, welche sich auf dem
Markt tummeln.

Festzuhalten bleibt: Im ausgedruckten Zustand ist die Arial tatsächlich so etwas


wie die blasse und unbeholfene Schwester der Helvetica, während sie jedoch
am Bildschirm in kleinen Schrigraden zur Höchstform aufläu! Natürlich
mag dies auch an den vielen Jahren Gewöhnung liegen, die man als altgedienter
Internetsurfer inzwischen mit dem Anblick dieser Schri besitzt. Aber auch
objektiv betrachtet macht die Arial zwischen 10 und 14 Pixeln eine sehr gute
Figur – vor allem unter Windows, da sie exzellent und aufwendig gehintet
wurde. Sie ist immer noch das Universal-Arbeitspferd der Webtypografie und

19. Die Garamond-Schrien stammen aus dem 16. Jahrhundert und wurden für den
modernen Bleisatz, den Fotosatz und den Digitalsatz am laufenden Meter von
verschiedenen Schrihäusern neu interpretiert.
#webtypobuch – 73

kann – eine gewisse Fantasielosigkeit des Gestalters vorausgesetzt – quasi


bedenkenlos eingesetzt werden. Erwarten Sie aber keine emotionale oder the-
matische Verstärkung Ihrer Inhalte! Wer Arial einsetzt, will bestenfalls den Text
inhaltlich für sich wirken lassen, und hat sich im schlechtesten Falle einfach
nur für den Weg des geringsten Widerstandes entschieden.

Die Arial existiert – wie jede der Core Fonts – in vier Schristilen: normal, fett,
kursiv und kursiv-fett. Eine Besonderheit ist jedoch der separate Schrischnitt
Arial black, welcher noch einmal einen ultrafetten und ultrafett-kursiven Stil
hinzufügt. Kann man natürlich machen, aber bitte nur in ausreichend wichti-
gen Überschrien!

Times New Roman

Ach ja, die Times New Roman! Einst von Spiekermann als „Typografisches
Suppenhuhn“ verspottet, kann man nicht umhin, ihr zumindest eine gewisse
Würze zu attestieren. Zugegeben: Sie ist ruppig und kantig, und das kleine „e“
treibt mich wegen seines geschwollenen Beins links unten in den Wahnsinn!
Dennoch verströmt sie natürlich den Geist ihrer Herkun: Die Times New
Roman ist eine digitale Interpretation der Times, welche für die gleichnamige
britische Tageszeitung entwickelt wurde – und zwar in den 1930er Jahren. Dort
konnte sie einige Jahrzehnte ihren Dienst zuverlässig verrichten, bevor sie dann
letztlich doch ersetzt wurde. Aber inzwischen haben fast alle Tageszeitungen
mehr oder minder fundamentale Redesigns hinter sich und setzen darin ver-
stärkt auf aktuelle Schrien mit eher glatter und stromlinienförmiger Anmu-
tung, so dass die Times wohl langsam zu den historischen Schrien gezählt
werden muss. Man sieht sie im Alltag nicht mehr so häufig wie noch vor zehn,
fünfzehn Jahren. Die Straßenschilder in Dresden sind noch so ein Ort. Oder
das politische Magazin Cicero, bei dem sie in Riesenlettern das Cover ziert.
Und natürlich in wissenschalichen Arbeiten, da sie immer noch in vielen
Styleguides vorgeschrieben ist – stets mit „1,5-fachem Zeilenabstand“.
#webtypobuch – 74

Im Web war die Times – im Vergleich zur Arial – nie der ganz große Star, wenn
auch von der technischen Qualität durchaus akzeptabel. Serifenschrien im
Grobpixelraster sind nun einmal grundsätzlich eine problematische Angelegen-
heit, da konnte die gut auereitete Times News Roman auch nicht viel bewe-
gen. Der gestalterische Zeitgeist sowie die technischen Schwierigkeiten
arbeiteten gegen sie. Doch inzwischen schreiben wir 2012, sind aufgeschlossen
und besitzen hochaufgelöste Bildschirme. Vielleicht ist es ja genau jetzt mal
wieder Zeit für eine Renaissance der Times?

Verdana

Ausgerechnet die webgerechteste aller Websicheren Schrien scha es –


17 Jahre nach ihrer Schöpfung – in das zweitmeistgedruckte Buch der Welt, den
IKEA-Katalog.

Aber mal ganz langsam! Lange Jahre galt die Verdana als die leserlichste Bild-
schirmschri für kleine Schrigrade zwischen 9 und 12 Pixeln, denn genau
dafür wurde sie optimiert. Allerdings schummelte sie auch ein wenig, denn sie
war so zurechtgehintet, dass ihre x-Höhe omals einen Pixel größer ausfiel als
die der Arial und der meisten anderen Schrien:

Von daher: Ja, sie war bei gleichem Schrigrad besser lesbar. Aber nein: Das
war keine Zauberei.

Ich schreibe dies ausdrücklich in der Vergangenheitsform, da sich diese Vor-


teile der Verdana in erster Linie auf die früher üblichen kleinen Schrigrade
beziehen. Ab spätestens 16 Pixeln muss man die Dinge mit anderen Maßstäben
betrachten. Und hier lässt sich der Verdana eine durchaus störende Ungelenkig-
keit attestieren. Ihre Formen wirken seltsam mechanisch und sperrig, die ein-
#webtypobuch – 75

zelnen Bestandteile der Glyphen wie nachträglich aneinandergeschweißt statt


aus einem Guß. Durch die breiten Buchstabenformen nimmt sie außerdem
relativ viel Platz weg, was man auch nicht immer gebrauchen kann. „Finger weg
von der Verdana für Überschrien im Web, und für den gesamten Printbereich
sowieso!“ Das war eine Faustregel, die bis vor kurzem kaum jemand in Frage
gestellt hätte.

Und dann kam 2010 IKEA um die Ecke, kürte Verdana zur alleinigen Haus-
schri und setzt den ehemaligen Bildschirmfont seitdem für alles ein. Also, tat-
sächlich alles. Ob Verdana-Gestalter Matthew Carter von dieser Praxis
tatsächlich begeistert ist, weiß man nicht genau20. Die Designbranche jedenfalls
war insgesamt leicht schockiert.

Ich bleibe jedoch dabei: Verdana nur bis maximal 13 Pixel einsetzen, wenn
überhaupt. Ich selber verwende sie in der Tat nur noch sehr selten. Sie lässt sich
nicht so gut mit anderen Schrien mischen, zumindest im Vergleich mit ande-
ren Serifenlosen. Und sie ist einfach noch ein wenig klobiger und hässlicher als
die Arial.

Fazit: Viel mehr muss man über diese Schri im Jahre 2012 eigentlich nicht
wissen. Sie gehört eher zur Geschichte des Webdesigns und hat meines Erach-
tens keine rosige Zukun vor sich.

20. www.feltandwire.com/2011/02/07/matthew-carter-talks-type-with-patrick-coyne-at-the-
book-club-of-california
#webtypobuch – 76

Georgia

Eigentlich schade, dass wir nicht alle viel früher angefangen haben, mit der
Georgia unsere Weblayouts zu setzen! Aber sie stieß eben auch erst 1996 dazu,
und bis sie sich auf Mac und PC gleichermaßen durchgesetzt hatte, dauerte es
noch rund sieben bis acht Jahre.

Im Paket der Web Safe Fonts war Georgia neben Times New Roman die zweite
Serifenschri – und übertraf ihre ältere Verwandte in fast allen Punkten! Wobei
ein solch simpler Vergleich zwischen gut und schlecht der Sache nicht gerecht
wird. Die Georgia war in erster Linie braver und angepasster. Dort wo die
Times ruppig, sperrig und individuell daherkommt, werden bei der Georgia
alle Ecken und Kanten weggeflauscht. Sie ist rundlich, oberflächlich freundlich,
und dabei immer ein wenig unpersönlich. Dennoch kann man quasi nichts
falsch machen, wenn man eine unkomplizierte Serifenschri im Web braucht.
Das war sicherlich auch das Ziel von Matthew Cartner, dem Schöpfer der
Georgia.

Wegen der unzureichenden Bildschirmdarstellung hatten wir Webdesigner ja


lange Zeit die Hoffnung schon aufgegeben, überhaupt Serifen unterhalb von
18 Pixeln einsetzen zu können. Und dann noch in der kursiven Variante? Um
Gottes Willen, da würde man vor lauter Pixeltreppen gar nichts mehr erkennen
können!

Doch die Georgia meisterte den Übergang von ungeglätteter Schwarz/Weiß-


Pixeldarstellung unter Windows 95–2000, über XP-ClearType und Quartz-
Glättung bis hin zu DirectWrite und Retina-Auflösung in brillanter Art und
Weise. Und kann somit für sich verbuchen, zu einem nicht unerheblichen Teil
den Web-2.0-Look der Jahre 2004–2009 mitbestimmt zu haben. Das Glän-
zende, Bonbonfarbige und Abgerundete dieser Zeit passte perfekt zu einer so
harmonischen Schri wie der Georgia.
#webtypobuch – 77

Man kann ihr einfach nicht böse sein, und nicht ganz zu Unrecht setzte ich sie
selber lange Jahre als meine Hausschri für praegnanz.de ein. Aber die Zeit
schreitet voran, und mit den Webfonts und dem Trend zu höheren Schrigra-
den sind die Möglichkeiten für individuellere Serifenschrien explodiert! Es ist
zu erwarten, dass wir in Zukun immer weniger Georgia sehen werden –
zumindest in den Überschrien. Im Fließtext jedoch sind viele Webdesigner
noch ein wenig zögerlich mit der progressiven Verwendung von Webfonts. Hier
wird sich die Georgia als gutmütiges, rundliches Arbeitstier noch ein paar Jähr-
chen halten. Und das völlig zurecht.

Trebuchet MS

Ja, das „MS“ gehört wirklich zum Namen dazu. Und es steht natürlich für den
Soware-Riesen Microso, der die Trebuchet MS im Jahr 1996, zeitgleich mit
der Georgia, ins Portfolio der Core Fonts aufnahm. Die Formgebung steht ganz
offenbar für den Wunsch, neben den beiden eher blassen serifenlosen Schrien
(Arial und Verdana) noch eine individuelle und charakterstarke Auswahlmög-
lichkeit für Screen- und Webdesigner anzubieten. Das Ergebnis ist eine nicht
wirklich überzeugende Reißbrettnummer, die zu keinem Zeitpunkt von irgend-
einem Designer wirklich gemocht wurde, und meist nur dann zum Einsatz
kam, wenn man sich zum hundertsten Mal nicht zwischen Verdana und Arial
entscheiden konnte.

Bei der Trebuchet denke ich fast automatisch an frühe Blogdesigns aus der
Antville- und Movable-Type-Ära um 2003, als man zum ersten Mal komplette
Layouts mit purem CSS umsetzte und eben auch auf typografischem Wege
zeigen wollte, dass man hier etwas Neues machte, was vorher nicht dagewesen
war.

Nun, überzeugend ist leider etwas anderes. Die Trebuchet war nie wirklich gut
leserlich, besaß einen falsch gehinteten und dadurch riesigen i-Punkt, der bei
#webtypobuch – 78

bestimmten Schrigraden das ganze Schribild zu zerstören wusste, und


konnte in all ihrer unkoordinierten Rumpeligkeit niemals mit der etwas später
auommenden Lucida mithalten.

Man sollte ihr zugute halten, dass sie eine der ersten Serifenlosen war, welche
eine echte Kursive statt einem schräggestellten Oblique-Schnitt zu bieten hatte:
Die Glyphen der Italic-Variante waren alle individuell neu gezeichnet und ent-
sprachen damit einem Trend, der in der sonstigen Typografiewelt erst ein paar
Jahre später richtig groß wurde. Allerdings sind auch die kursiven Formen
nicht wirklich hübsch anzusehen, und von daher lautet mein vernichtendes
Urteil: nicht benutzen!

Comic Sans MS

Bereits im Kindergarten lernt man, dass man auf schwächere Gegner, die
bereits am Boden liegen, nicht weiter einprügeln soll. Deswegen erliege ich hier
nicht der Versuchung, noch mehr Sprüche zu reißen, um die meistverhöhnte
Schri der Welt nicht noch stärker zu demütigen. Im Grunde ist dazu alles
gesagt.21

Deswegen hier ein paar aufmunternde Worte. Karl Lagerfeld sagte einmal in
einem Interview: „Erfolg muss sich nicht rechtfertigen.“ Und Erfolg kann man
der Comic Sans nun wirklich nicht absprechen! Sie ist auch im Jahr 2012 buch-
stäblich überall, vom Limonadenstand bis zum Fortune-500-Konzern. Dabei
war das gar nicht so geplant, denn sie sollte ursprünglich nur in einem sehr
begrenzten Anwendungsfall eingesetzt werden, nämlich im Rahmen von
Microso Bob, einer experimentellen, skeomorphen Desktop-Alternative für
Windows 3.1. Dass es sich so viel gewaltiger entwickeln würde, ahnte zu diesem
Zeitpunkt noch niemand, schließlich wurden von MS Bob nur 30.000 Exem-

21. bancomicsans.com
#webtypobuch – 79

plare verkau. Aber Eigendynamik entwickelt sich eben nicht immer in voraus-
berechenbaren Bahnen.

Eine interessante ese besagt, dass Comic Sans für junge Menschen mit
Dyslexie (spezielle Form der Lese- und Schreibschwäche) eine hervorragend
lesbare Schri ist. Dies hat wahrscheinlich mit der simplen organischen Form-
gebung zu tun, eventuell zusätzlich mit der hohen Verbreitung im Alltag. Man
sieht sie überall, man kennt ihre vertrauten Formen, und schon kann man sie
besser lesen. Das gilt grob für alle häufig auretenden Schrien, so selbstver-
ständlich auch für die Comic Sans.

Dennoch sollten Sie als Webdesigner tunlichst auf den Einsatz dieser System-
schri verzichten. Für den informellen Comic-Look gibt es weit bessere, auch
kostenlose Alternativen, beispielsweise die Web Letterer.22 Dabei handelt es sich
um eine echte Comic-Lettering-Schri, die in gedruckten Comicbüchern zum
Einsatz kommen könnte. Comic Sans hat mit Comics im Grunde gar nichts zu
tun. Sie ist nur eine zu lange in der Sonne gelegene, müde Reminiszenz an das,
was professionelle Letterer in amtlichen Comic-Publikationen einzusetzen
pflegen.

Oh.

Jetzt habe ich es doch getan.

22. www.blambot.com/font_webletterer.shtml
#webtypobuch – 80

Courier (New)

Es sind keine uninteressanten Geschichten, die sich um die Entstehung und


Verbreitung der Courier ranken, und welche in der englischsprachigen Wiki-
pedia kompakt zusammengefasst werden.

Die Grundform der Schri ist ein Werk von Howard „Bud“ Kettler aus dem
Jahr 1955 und wurde etwas später von Adrian Frutiger höchstpersönlich23 für
eine Serie von elektrischen IBM-Schreibmaschinen angepasst. IBM gilt zwar
seitdem als Inhaberin des „Geistigen Eigentums“, machte diese Rechte jedoch
niemals geltend. Somit konnten auch andere Firmen die Formen und sogar den
Namen der Schri verwenden und ihre eigenen Schreibmaschinen damit
bestücken, sowie später digitale Fonts daraus erstellen. Eigentlich eine echte
Open-Source-Erfolgsgeschichte, bevor Open Source als Konzept überhaupt
bekannt war. Denn lange Jahre war Courier eine Art Standardschri in vielen
Bereichen: Drehbücher, US-Staatsakten, auch deutsche Steuerbescheide setzten
oder setzen immer noch auf den einheitlichen Schreibmaschinenlook. Selbst
unter Corporate Designern gibt es eine nicht seltene Haltung, dass die Courier
(oder andere Schreibmaschinen-Schrien) für die geschäliche Brieorres-
pondenz eine valide Option sei, eben weil sie so tradiert-ikonisch für das
ema Korrespondenz steht.

Rein ästhetisch betrachtet gibt es hingegen kaum Gründe, die für den Einsatz
der Courier sprechen – zumindest auf dem Bildschirm. Die Microso-Variante
namens Courier New besitzt eine unglaublich dünne Strichstärke und könnte
als Vektorform normalerweise gar nicht überleben, wenn sie nicht in Schri-
graden unter 16 Pixel von einer Reihe von manuell gepixelten Hilfszeichen-
sätzen unterstützt würde. Der Grund: In kleinen Schrigraden betrüge die

23. An dieser Stelle verneige ich mich vor dem prägenden Schrientwerfer des letzten
Jahrhunderts. Danke, lieber Herr Frutiger, für Ihre großartige Arbeit in den letzten
sechzig Jahren.
#webtypobuch – 81

rechnerische Breite der Linien weniger als 1 Pixel, was – abhängig vom verwen-
deten Font-Rasterizer – in einem Fiasko enden düre!

Die von OS X mitgelieferte Variante Courier (ohne New) ist da besser aufgestellt
und funktioniert auch ohne Pixelunterstützung. Sieht aber auch nicht besser
aus. Insgesamt ging es bei dieser Schri ja auch nie um die digitale Darstellung.
Sie wurde für Schreibmaschinen optimiert, bei denen es primär wichtig ist, dass
die Punzen (= Buchstabeninnenräume) nicht mit Tinte zuschmieren, wenn
zuviel Farbe über das Farbband durchgedrückt wurde. Dies ist der Grund für
die großbauchigen runden Innenräume und die dünnen Strichstärken.

Jedoch einmal abgesehen von der visuellen Qualität handelt es sich bei der
Courier selbstredend um eine Monospace-Schri, auch nichtproportionale
Schri genannt, bei der alle Buchstaben die gleiche Breite aufweisen. Technisch
war das die einzige Möglichkeit, denn einfach konstruierte Schreibmaschinen
konnten nicht unterschiedliche Strecke mit dem Wagen weiterfahren, in
Abhängigkeit von der jeweils angeschlagenen Taste. Die Folge dieses Mangels:
Ein kleines i musste auf einmal genauso breit sein wie ein großes W, so dass der
eine Buchstabe visuell künstlich verbreitert, der andere trickreich verschmälert
werden muss. Man erkennt das an den auffälligen Serifen und zusätzlichen
Fundamenten bei den schmalen Glyphen und dem Fehlen solcher Elemente bei
den ursprünglich breiteren Glyphen. Spätestens seit WYSIWYG in den Neunzi-
ger Jahren in der Mitte der computerisierten Gesellscha angekommen war,
wurden nichtproportionale Schrien jedoch nur noch selten benötigt, zumin-
dest für das Gros der Anwendungsfälle.

Unverhoerweise wurde Monospace aber gegen Anfang des neuen Jahrtau-


sends unter urbanen Designern und Programmierern24 wieder ein bisschen
schick, allerdings meist unter Ausschluss der Courier. Sie gilt bis heute als ver-
staubte Bürokratenschri aus der Mitte des letzten Jahrhunderts, ohne echten
digitalen Bezug. Der Kult um die angesagteste Coding-Schri für Programmie-

24. Programmierer schreiben ihren Code meist in Monospace-Schri, um ihn leichter


übersichtlich formatieren und einrücken zu können.
#webtypobuch – 82

rer findet heute irgendwo zwischen Consolas, Menlo, Droid, Source Code Pro,
Monaco und weitaus exotischeren Schrien statt.

Und auch für den Webbereich rate ich eher dazu, eine lange font-­‐family-Liste
von alternativen Monospace-Schrien zu bilden, bevor der Browser auf die
Courier zurückfallen soll. Sie ist schon lange nicht mehr zeitgemäß und will
auch nicht so recht mit anderen Schrien harmonieren. Vielleicht braucht sie
einfach noch zehn oder fünfzehn Jahre, bis sie als ironische Kultschri wieder
auf den Screens unserer zukünigen Webzugangsgeräte auaucht.

Lucida Sans / Lucida Grande

Anders als die meisten anderen Bildschirmschrien ist die Lucida Sans Teil
einer riesigen Schrisippe, innerhalb derer sich alle möglichen Stilistiken tum-
meln, so dass man vom Namen Lucida alleine überhaupt nicht darauf schließen
kann, welcher Schrityp gemeint sein könnte. Die Lucida-Sippe wurde 1985
veröffentlicht und erhielt alle paar Jahre weitere Mitglieder als Ergänzung.

Im Webdesign spielen allerdings nur zwei Versionen der Lucida eine Rolle, die
zwar verschiedene Namen tragen, aber im Grunde die gleichen Grundformen
besitzen: Lucida Sans Unicode unter Windows und Lucida Grande unter OS X.
Beide sind erweiterte Versionen der Lucida Sans, und unterscheiden sich im
Ausbau, was Sonderzeichen und Unterstützung von nicht-lateinischen Buchsta-
ben angeht.

Vor allem auf dem Mac genießt die Lucida hohe Prominenz, da sie seit Einfüh-
rung von OS X im Jahre 2001 die dominierende Interface-Schri des Systems
ist. Umso erstaunlicher, dass sie unter Apples Smartphone-Betriebssystem iOS
gar nicht enthalten ist. Aber insgesamt scheint sich Apple auch derzeit unter
OS X etwas in Richtung Helvetica zu bewegen, welche bereits als meistgenutzte
Systemschri unter iOS fungiert.
#webtypobuch – 83

Auch wenn Lucida Sans spätestens seit Windows 98 auf allen PCs vorinstalliert
war, konnte sie nie ganz einen gewissen Apple-Chic ablegen, der Fluch und
Segen zugleich war. Einerseits war die schlanke Serifenlose, wie auch schon die
Georgia, eine der prägenden Schrien in der bunten Web-2.0-Zeit und stach
meist positiv heraus ob ihrer platzsparenden Lesbarkeit und Klarheit. Anderer-
seits wirkte sie eben vor allem mit der OS-X-eigenen Schriglättung Quartz
ganz besonders schneidig. Mit dem Antialiasing von Windows kam die Lucida
nie so richtig gut zur Geltung: die Strichstärke zu dünn, eine zu starke Beto-
nung der vertikalen Linien – das wirkte immer etwas holprig.

Insgesamt konnte man als Webdesigner also den Eindruck gewinnen, Lucida
wäre überall gewesen. Doch das trügte. Denn es waren dann doch vornehmlich
Websites mit der Zielgruppe „Webdesigner“, die sich den Luxus der Apple-UI-
Schri leisteten. Für die breite Masse zu gestalten, hieß in den meisten Fällen,
auf den Einsatz der Lucida zu verzichten, da es unter Windows einfach eine
Reihe von besser optimierten und ebenso schlanken Schrien gab, die man
hätte einsetzen können; beispielsweise die Tahoma oder – wenn es hart auf hart
kam – die Trebuchet MS.

Inzwischen tri die Lucida ein ähnliches Schicksal wie die Verdana: In Zeiten
von mehr Pixeln pro Buchstabe (sei es durch Retina-Screens oder durch höhere
Schrigrade), erkennt der sorgfältige Beobachter erst die Unpersönlichkeit und
die schlaksigen, fürs grobe Raster optimierten Formen.

Was bisher außerdem noch überhaupt nicht erwähnt wurde: Die im Betriebs-
system mitgelieferte Lucida Sans besitzt aus ungeklärten Gründen keinen kursi-
ven Schnitt – nicht einmal eine Oblique-Variante! Sollte der Browser also
einmal dazu gezwungen sein, ein Wort oder einen Abschnitt kursiv setzen zu
müssen, grei er zur brutalstmöglichen Methode und verzerrt die Formen rein
geometrisch um einige Grad. Das Ergebnis ist verhältnismäßig schauderha,
wie man sich denken kann.
#webtypobuch – 84

Die Rückkehr der Webfonts


Im Herbst 2007 ist schon etwas Bemerkenswertes in Gang gesetzt worden: Das
Webkit-Team bei Apple nimmt sich einer seit zehn Jahren real existierenden
Technik an und ermöglicht ihr über einen simplen kleinen Kniff den grandios
verspäteten Durchbruch. Was haben die Leute um Dave Hyatt gemacht? Ein-
fach ein anderes Fontformat unterstützt. Im Grunde ist es das.

Wir spulen aber erst einmal noch weiter zurück, ins Jahr 1997. Die ersten
Browserwars toben, Microso ist auf dem besten Wege, an Netscape vorbeizu-
ziehen, wir den brandneuen Internet Explorer 4 auf den Markt und platziert
ihn gegen den bisherigen Platzhirschen Netscape Navigator 4. Beide Browser
unterstützen – gemäß CSS-2.0-Standard – die temporäre Verwendung von ser-
verseitig gelagerten Fontdateien, um reichhaltige typografische Gestaltung zu
ermöglichen. Denn schließlich geht es mit der Kommerzialisierung des Webs
gerade so richtig los, und zeitgemäßes, innovatives Webdesign schreit nach
individuellen Schrien!

Doch wieso hat davon eigentlich niemand etwas bemerkt? Waren die damali-
gen Webdesigner einfach zu sehr mit anderen Dingen überlastet, um sich mit
mehr als zehn websicheren Schrien zu beschäigen? Die Sache ist rück-
blickend extrem dumm gelaufen, aber sie ist durchaus zu erklären. Denn in
CSS 2.0 war zwar die Möglichkeit einer Schridarstellung via @font-­‐face vor-
gesehen, aber es wurde nicht festgelegt, welches Dateiformat dafür verwendet
werden sollte. Und so entschied sich Microso für Embedded OpenType (EOT),
während Netscape sein Glück mit Portable Font Resource (PFR) aus dem True-
Doc-Universum versuchte. Das Problem bei der Geschichte: Schrien existier-
ten zu dieser Zeit in keinem dieser beiden Formate, sondern ausschließlich in
TrueType oder PostScript, jeweils in diversen Geschmacksrichtungen.25 Nie-
mand hatte je zuvor von EOT oder PFR gehört. Gerüchtehalber soll Microso
zwar eine Soware angeboten haben, mit der man EOTs herstellen konnte, aber

25. Wer im Dschungel der OpenType-Formate das Licht sehen möchte, sollte unbedingt
diesen Blogbeitrag von Ralf Herrmann lesen:
opentype.info/blog/2010/07/31/opentype-myths-explained
#webtypobuch – 85

sie war so kompliziert in der Bedienung, dass man es lieber gleich sein ließ.26
Bei Netscape sah die Situation ähnlich aus, außerdem befand sich der Netscape
Navigator ein Jahr später sowieso auf dem absteigenden Ast.

Mangels einsetzbarer Schrien schlummerte die Webfont-Technologie also


zehn Jahre lang in allen Internet-Explorer-Versionen und kam de facto nie zum
Einsatz. Bis eben 2007 die Webkit-Entwickler auf die Idee kamen, man könne
doch einfach das inzwischen etablierte und akzeptierte Standardformat Open-
Type (ohne „Embedded“) mit @font-­‐face zusammenbringen und die entspre-
chende Funktionalität in die aktuellste Safari-Entwicklerversion implemen-
tieren. Der Browser von Apple wäre somit zukünig in der Lage, beliebige
Schrien darzustellen, die per URL verfügbar sind und auf die man bequem im
CSS verweisen könnte.

Und genauso ist es passiert: Im März 2008 wurde Safari 3.1 für Mac und Win-
dows herausgegeben und beherrschte von nun an Font-Embedding, wie es
damals genannt wurde. Und das mit beliebigen TrueType- oder OpenType-
Schrien, die in diesem Zusammenhang auch als Raw Fonts bezeichnet
wurden, um sie von den durch den Fleischwolf gedrehten Embedded-Open-
Type-Schrien abzugrenzen.

Doch was passierte nun? Einmal abgesehen davon, dass innerhalb weniger
Jahre die webtypografische Welt weitestgehend umgekrempelt wurde?

Zunächst einmal gab es monatelange Piraterie-Diskussionen. Denn wenn eine


Schri vom Browser eingebunden werden sollte, musste diese auf einem öffent-
lich zugänglichen Webserver liegen. Durch den entsprechenden Upload einer
Schridatei wurde der Webdesigner (oder sein Kunde) auf einmal zum Font-
Anbieter, und das war in kaum einer Schrilizenz vorgesehen. Nicht einmal bei
kostenlosen Schrien war geregelt, ob die Nutzung per @font-­‐face erlaubt sein
könnte; es existierte bisher schlicht keine Notwendigkeit, dies zu regeln.

Erstaunlich flott jedoch, nämlich innerhalb von gut zwei Jahren, einigten sich
Schrischmieden, Schriverkäufer und Browserhersteller soweit, dass im jetzi-

26. Ein langer und schmerzensreicher Erfahrungsbericht:


v1.jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
#webtypobuch – 86

gen Jahr 2012 folgende organisatorische Meilensteine als gesicherte Basis zu


verzeichnen sind:

Neues Font-Format: WOFF


Ein bisschen klingt es so, als habe man aus der Geschichte nicht gelernt. Aber
diesmal stehen tatsächlich alle Parteien voll dahinter: Im Jahr 2009 wurde das
Web Open Font Format (WOFF) spezifiziert, welches den Webfonts eine tech-
nische und lizenzrechtliche Zukun ermöglichen sollte, ohne auf zum Schei-
tern verurteilte DRM-Lösungen zu setzen.

WOFF unterscheidet sich technisch kaum von klassischen OpenType-Dateien.


Vielmehr packt man einfach einen regulären Raw Font zusammen mit einigen
XML-Meta-Informationen in ein ZIP-Archiv und ändert das Datei-Suffix auf
.woff – viel mehr ist das tatsächlich nicht. In den Meta-Informationen bringt
man lediglich einige Informationen über Autor, Herausgeber und Lizenz unter.

Dass dieses Format technisch nicht in der Lage ist, Piraterie zu verhindern, ist
allen Beteiligten klar. Man hat jedoch eingesehen, dass nur eine DRM-freie
Lösung ein Gewinn für die typografische Kultur sein kann. Kurz gesagt: Wer
Fonts unlizensiert nutzen will, kann dies seit jeher tun, auch wenn er damit
illegal handelt. Wenn man aber mit den Webfonts ein neues legales Geschäs-
feld eröffnen möchte, muss dieses attraktiv und einfach zu nutzen sein. WOFF
ist dabei der akzeptierte Kompromiss zwischen unveränderten, druckfähigen
Raw Fonts und komplett abgeriegelten, DRM-verseuchten Scheinlösungen.

Browserunterstützung
■ Alle aktuellen Browser, mit Ausnahme des vorinstallierten Android-
Browsers, unterstützen das neu geschaffene WOFF.

■ Alle aktuellen Browser, mit Ausnahme des Internet Explorer, unterstützen


zusätzlich die Darstellung von TrueType-Schrien sowie TrueType-
basierten OpenType-Schrien.
#webtypobuch – 87

■ Internet Explorer 4–8 sind jedoch in jedem Falle auf die Einbindung von
EOT-Dateien angewiesen.

Mit diesen Fakten und einem Dank an caniuse.com/fontface lässt sich sagen,
dass dem großflächigen Einsatz von Webfonts technisch kaum etwas im Wege
steht, wobei Sie selbstverständlich die Darstellungstechnik der verschiedenen
Betriebssysteme und Browser (siehe Kapitel 2) vorher genau studieren und
testen sollten!

Wie genau der CSS-Code zum robusten Einbinden von mehreren Fontforma-
ten aussieht, hängt immer ein wenig vom aktuellen Stand der Wissenscha und
der Browserlandscha ab. Ich vertraue hier auf das Portal FontSquirrel.com,
welches derzeit folgenden Code ausliefert, um wirklich alle Browser mitzuneh-
men, die heute mit Webfonts umzugehen wissen:
@font-­‐face  {
       font-­‐family:  'MySuperFont';
       src:  url('My_Super_Font.eot');
       src:  url('My_Super_Font.eot?#iefix')  format('embedded-­‐opentype'),
                 url('My_Super_Font.woff')  format('woff'),
                 url('My_Super_Font.ttf')  format('truetype'),
                 url('My_Super_Font.svg#MySuperFont')  format('svg');
       font-­‐weight:  normal;
       font-­‐style:  normal;
}

EOT-Demystifizierung
Das oben beschriebene Dilemma mit nicht-existierenden EOT-Fonts und feh-
lenden komfortablen Konvertierungs-Möglichkeiten ist größtenteils ver-
schwunden. Heute lassen sich über diverse Online-Konverter oder handels-
übliche Schri-Soware relativ leicht EOT-Schrien erstellen, die auch von
älteren Internet-Explorer-Versionen anstandslos dargestellt werden. Hier hat
die Nachfrage tatsächlich zu einer deutlichen Verbesserung des Angebots
geführt. Leider müssen wir zumindest den Internet Explorer 8 noch ein paar
Jahre lang unterstützen, bis sich die Sache mit Windows XP endgültig in Wohl-
gefallen aufgelöst hat. Wie Sie sicher wissen, lässt sich unter Windows XP der
#webtypobuch – 88

IE 9 oder gar IE 10 gar nicht erst installieren. Aber das ist eine anderes
Geschichte und soll ein andermal erzählt werden.

Schriftauswahl und Lizenzen


Noch sind leider nicht alle Schrien, die es für den Printbereich gibt, mit einer
Webfont-Lizenz ausgestattet. Bei einigen weniger populären und halbvergesse-
nen Schrien ist das auch tatsächlich kaum noch zu erwarten. Das bedeutet,
dass solche Fonts zwar technisch in den meisten Browsern verwendbar wären
(siehe oben), aber das Embedding schlicht nicht erlaubt ist und im Zweifelsfall
auch geahndet werden kann. Lieber nicht ausprobieren!

Generell jedoch arbeiten alle großen und kleinen Schrihäuser derzeit mit
Hochdruck daran, interessante legale Angebote zu etablieren, um einen Groß-
teil ihres Schrikatalogs auch für den Webeinsatz zu lizensieren. Ob das dann
im Einzelfall Miet- oder Kaufmodelle sind, lässt sich nicht pauschal beantwor-
ten. Hier befinden sich Anbieter und Kunden noch in einer spannenden Expe-
rimentierphase.

Abo, Cloud und Co. – ein Ratgeber


Entweder es bleibt für die nächsten Jahre die Gretchen-Frage unter typografisch
engagierten Webdesignern, oder eines der derzeit parallel existierenden
Modelle setzt sich dauerha durch. Wir reden von der fundamentalen Frage,
mit welcher Infrastruktur und welchem Geschäsmodell in Zukun Webfonts
vertrieben und genutzt werden.

Eines lässt sich vorweg korrigieren: Entgegen anders lautender Gerüchte kau
man in aller Regel keine Schrien; es sei denn, man heißt Siemens oder Deut-
sche Bahn und kann sich seine eigene Hausschri entwerfen lassen, die man
exklusiv und unbegrenzt nutzt. Alle kleineren Firmen und Webdesigner erwer-
ben mit ihrem Kauf maximal eine in vielen Punkten eingeschränkte Nutzungs-
lizenz. Der reine Besitz einer Fontdatei ist dabei unerheblich. Wenn Sie bei
#webtypobuch – 89

eBay eine gebrauchte Festplatte ersteigern, auf der sich lauter nicht gelöschte
Fonts tummeln, dürfen Sie diese trotzdem erst dann in Projekten verwenden,
wenn Sie eine personalisierte Lizenz nachweisen können.

Um zurück auf die Webfonts zu kommen: Hinsichtlich der Lizenz und deren
Erwerb spielen folgende taktische und technische Überlegungen eine Rolle:

■ Bezahle ich etwas für die Nutzung der Schrien, oder handelt es sich um
kostenlose Exemplare?

■ Bezahle ich einmalig oder in zeitlich wiederkehrenden Intervallen?

■ Bezahle ich für eine einzelne Schri(familie) oder kann ich eine ganze
Sammlung oder einen Katalog von Schrien nutzen?

■ Bekomme ich Fontdateien zum Download angeboten und kann diese auf
meinem eigenen Webserver hosten?

■ Erhalte ich eventuell sogar Raw Fonts im Gepäck, um die Schri auch in
Weblayoutprogrammen wie Photoshop, Fireworks oder Keynote27 zu
testen?

■ Bekomme ich nur einen Einbindungscode zur Verfügung gestellt, und die
eigentlichen Fonts werden auf den Servern des Schrianbieters gehostet?

Insbesondere die Frage nach den exakten Lizenzbedingungen und Preisen stellt
seit einigen Jahren etablierte Schrianbieter sowie hungrige Newcomer vor
kniffelige Entscheidungen! In der Printwelt hat es sich nämlich so eingebürgert,
dass man zu einem bestimmten Preis, meist um die 30 bis 40 Euro, die zeitlich
unbegrenzte Lizenz zur Nutzung eines einzelnen Schrischnitts für bis zu fünf
Arbeitsplätze erwirbt. Wie häufig die Schri dann tatsächlich verwendet wird,
und welche Auflagen mit ihr gedruckt werden, ist in aller Regel nicht einge-
schränkt. Ein traditionsreiches Designbüro hat unter Umständen mit einer vor
20 Jahren erworbenen Univers-Schrifamilie dutzende aufwendige Kunden-
kataloge gesetzt und musste dafür den gleichen dreistelligen Geldbetrag zahlen

27. Ein durchaus ernstgemeinter Tipp:


edenspiekermann.com/de/blog/espi-at-work-the-power-of-keynote
#webtypobuch – 90

wie eine Designstudentin, welche die Schri lediglich für die Gestaltung einer
Visitenkarte im Einsatz hatte.

Das ist selbstredend eher ungerecht. Doch mit den Webfonts und potenziellen
neuen Geschäsfeldern ergibt sich nun die Chance, den Technologiefortschritt
mit einem Wechsel zu gerechteren Lizenzmodellen zu verbinden. Schnell stand
bei den meisten Anbietern fest: Die Größenordnung der Nutzung soll in
Zukun eine Rolle spielen. Doch wie misst man die reale Nutzung eines Web-
fonts? Wer einen cloudbasierten Dienst betreibt, kann das freilich in Echtzeit
und sehr exakt den Serverstatistiken entnehmen. Gibt man die Fontdateien
jedoch zum Selberhosten heraus, kann man entweder auf die Einbindung eines
Zählpixel bestehen oder auf die Ehrlichkeit des Kunden vertrauen.

Die marktführenden Anbieter haben sich für das Vertrauen entschieden. Die
unlizensierte Nutzung von Schrien war und ist zwar ein gewisses Problem,
aber anders als die Musik- oder Filmindustrie geht man in der Schriindustrie
klüger mit seinen potenziellen Kunden um und macht – insgesamt – sehr
attraktive Angebote zu bezahlbaren Preisen.

Noch in den Kinderschuhen stecken übrigens passende Lizenzmodelle für


Computer-Applikationen. Abhängig davon, ob es sich um mobile oder klassi-
sche Plattformen handelt, und ob sie als native Entwicklung, über Webviews
oder gar als Offline-Webapp umgesetzt werden, lassen sich derzeit meist nur im
individuellen Gespräch mit den Schrianbietern rechtssichere Lösungen
finden, die dann zu teilweise überraschenden Preisen führen.

Doch diese bisherigen Überlegungen stellen im Wesentlichen die Anbieterper-


spektive dar. Vielleicht interessanter ist die Sicht des Nutzers! Bevor wir uns
konkret mit Glanz und Tücken von Bezahlung und Einbindung beschäigen,
müssen wir jedoch eine wichtige Fragestellung klären. Bei jedem neuen Web-
design-Projekt sollten Sie sich als Gestalter überlegen, ob Sie tendenziell a) eine
passende Infrastruktur anhand einer festgelegten Schrivorgabe finden möch-
ten oder b) innerhalb einer bewährten Infrastruktur nach einer passenden
Schri suchen. Zum besseren Verständnis drei kleine Beispiele:

Kunde X hat sich vor einigen Jahren ein komplett neues Corporate Design
maßschneidern lassen, welches als zentrale Schri die Fedra Sans vorsieht. Eine
#webtypobuch – 91

kurze Webrecherche ergibt, dass die einzige Möglichkeit, Fedra als Webfont
legal zu nutzen, ein Kundenkonto bei der Typotheque ist, dem Hostingservice
des Schrientwerfers Peter Biľak. Somit ist mit der Wahl der Schri bereits die
Entscheidung über Lizenzmodell und technische Umsetzung getroffen: Man
darf die Fedra nicht etwa herunterladen und selber hosten, sondern zahlt ein-
malig an Typotheque, um die Schri dort hosten zu lassen.

Ganz anders läu es mit Kunde Y. Dieser hat eine neue Unternehmung gegrün-
det und ist ohnehin eher im Internet aktiv, braucht also keine Drucksachen.
Dafür besteht er darauf, seine laufenden Kosten gering zu halten, weswegen ein
Mietmodell für ihn nicht in Frage kommt. Da wir sowieso ab und zu Schrien
bei FontShop kaufen, suchen wir uns dort für den Kunden einen Webfont aus,
den wir angemessen finden – beispielsweise die FF Tisa – und können diese tat-
sächlich als WOFF und EOT herunterladen, um sie auf unserem Kundenserver
abzulegen. Das kostet zwar erst einmal eine hübsche Stange Geld, aber verur-
sacht dafür keine laufenden Kosten.

Kunde Z hat nur eine sehr kleine Website und wenig Geld, ist aber ein guter
Freund. Wir surfen daher einmal quer über den Katalog von Typekit, wo wir
bereits wegen einiger anderer Projekte Kunde sind. Zufälligerweise stoßen wir
auch hier auf die FF Tisa, denn wie viele andere Hosting-Services bietet auch
Typekit Schrien von allen möglichen Herstellern an. Da wir noch genug unge-
nutzte Pageviews in Reserve haben, etablieren wir für den Kunden Z ein weite-
res Kit innerhalb unseres Accounts und lassen ihn das Hosting einfach
mitbenutzen.

Angenommen, wir hätten tatsächlich die freie Wahl zwischen Fremd- und
Eigenhosting, sowie zwischen Einmalzahlung und Abonnement: Wofür ent-
scheiden wir uns? Selbstverständlich ahnen Sie bereits, dass ich Ihnen keine
endgültige Antwort darauf geben kann. Es hil aber, sich die einzelnen Vorteile
noch einmal zusammengefasst durchzudenken:

Für das Selberhosten spricht zunächst einmal die volle technische Kontrolle.
Alles befindet sich auf dem eigenen Server, unabhängig von möglichen Abstür-
zen oder Caching-Problemen der Cloud-Dienste. Ungewollte Updates, plötzli-
cher Stopp der Schriauslieferung oder schlicht eine Verlangsamung des
#webtypobuch – 92

Seitenauaus sind nicht zu erwarten. Und wenn, dann ist sowieso die gesamte
Website betroffen.

Demgegenüber hat Fremdhosting über einen Cloud-Dienst ganz eigene Reize:


Sie müssen sich bei der Nutzung eines ausgereien Dienstes keinerlei Gedan-
ken um die technische Einbindung machen. Derlei Dinge stellen einen halb-
wegs erfahrenen Frontend-Entwickler zwar nicht vor unlösbare Probleme, aber
Typekit und Co. machen es im Zweifelsfall besser. Sie kümmern sich stets um
die neuesten Browserversionen auf allen denkbaren Plattformen und holen mit
diversen Maßnahmen, insbesondere gut geölten Content-Delivery-Networks
(CDN) immer noch ein paar Millisekunden an Auslieferungsgeschwindigkeit
heraus. Einige Dienste verfügen auch über sehr flexibles Subsetting – dampfen
also den Umfang der Schri auf tatsächlich benötigte Zeichen ein, bis hin zu
einzelnen Buchstaben.28

Die Vorteile der Einmalzahlung liegen auf der Hand: Kostensicherheit und
ruhiger Schlaf – es kommen keine weiteren Kosten oder Preissteigerungen auf
den Webdesigner und seine Kunden zu. Außerdem düre die jahrzehntelange
Etablierung des Vorgangs „Schrilizenzkauf “ eine Rolle spielen, vor allem in
größeren Design- und Werbeagenturen und deren Auraggebern. Es gibt hier
omals keinen betriebswirtschalichen Prozess für das Abschließen eines
„Schriabonnements“. Und auch unabhängig von den zu zahlenden Summen:
Eine dauerhae kostenpflichtige Mitgliedscha bei einem Webservice ist
immer ein Mehraufwand für die Buchhaltung und eher ungern gesehen.

Doch auf der anderen Seite steht den Nutzern bei vielen Abonnement-basier-
ten Diensten eine riesige Schrienvielfalt zur Verfügung. Statt also immer
wieder die gleichen Schrien zu verwenden, weil man irgendwann eine respek-
table Summe dafür ausgegeben hat – gängige Praxis in kleinen Designstudios –,
ist man hier bei jedem neuen Projekt stilistisch völlig frei. Das tut der Vielfalt
im Web natürlich gut. Grundsätzlich lege ich jedem Webdesigner ans Herz, sich
bei einem der folgenden Dienste zumindest ein kostenloses Entwicklerkonto

28. www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/
#webtypobuch – 93

anzulegen. Probieren Sie aus, wie Sie in der Praxis mit einer grandiosen Schri-
vielfalt zurechtkommen!

Webfont-Anbieter im Kurzporträt
Der weltweite Markt für Webfont-Hosting wird seit 2009 rasant von interessan-
ten Bewerbern bevölkert und brodelt auch heute noch fröhlich vor sich hin:
Adobe kau Typekit, Google verhil Adobe zu kostenlosen Webfonts, während
Monotype und Adobe sich gegenseitig ihre Font-Klassiker zur Verfügung stel-
len.

Von daher kann diese Marktübersicht nur eine Momentaufnahme sein und
erhebt keinen Anspruch auf Vollständigkeit. Wer es genauer (und vor allem
aktueller) wissen möchte, sollte in regelmäßigen Abständen die hervorragende
Vergleichstabelle29 von Silvia Eggert besuchen, welche auch als Basis für meine
Betrachtungen diente.

Um ein Fazit vorwegzunehmen: Es ist interessant zu beobachten, mit welch


unterschiedlicher Motivation diverse Anbieter auf den so jungen Webfont-
Markt streben! Neben Schrientwerfern als Einzelunternehmer finden sich tra-
ditionsreiche Schrihäuser, Sowareriesen, Web-Startups und Zusammensch-
lüsse von exklusiven Schrischmieden. Und Google ist natürlich auch mit
dabei. Die Vielfalt an Lizenzmodellen, Preisen und Nutzungsbedingungen ist
dabei definitiv zu unübersichtlich, um hier in kompletter Fülle besprochen zu
werden. Im Folgenden versuche ich mich von daher lediglich an einer kurzen
Porträtierung der derzeit interessantesten Dienstleister.

Doch zunächst eine wichtige Information für professionelle Webdesign-Dienst-


leister und Agenturen: Es ist bei den meisten Anbietern ausdrücklich verboten,
eine erworbene oder gemietete Schri auf mehreren Kundenwebsites zu ver-

29. sprungmarker.de/wp-content/uploads/webfont-services
#webtypobuch – 94

wenden. Im Regelfall ist der Kunde leider gezwungen, in seiner Funktion als
Website-Betreiber auch eigenständiger Lizenznehmer der Schrien zu werden.

MyFonts
Ganze 15.000 webfontfähige Familien bietet der populäre Anbieter MyFonts
(der mit dem genialen Logoschrizug) zum einmaligen Kauf an; dies entspricht
ca. 60 Prozent des Gesamtkatalogs. Die Konditionen sind dabei ziemlich ein-
fach zu verstehen: Im Warenkorb lassen sich die geplanten Pageview-Grenzen
auf Vertrauensbasis festsetzen und heraus kommt ein entsprechend angepasster
Endpreis. Einen Hosting-Service bietet MyFonts hingegen nicht an.

Ausgeliefert werden die Schrien in vier Formaten: EOT, WOFF, SVG und web-
only TTF. Letzteres ist vermutlich eine spezielle Version des ursprünglichen
Fonts, mit einer reduzierten Anzahl an Sonderzeichen, um Platz zu sparen. Von
einer speziellen Bildschirm-Optimierung der feilgebotenen Webfonts ist hinge-
gen nicht die Rede. Ich wäre hier auch eher etwas skeptisch, denn besonders
liebevoll und fachkundig wird das ema Webfonts auf dem Portal nicht unbe–
dingt auereitet.

Typekit
Ganz anders bei Typekit! Das Startup um Jeffrey Veen war im Frühjahr 2009
einer der ersten engagierten Versuche, einen Mietservice für Webfonts aufzu-
ziehen, und hat sich bis heute exzellent entwickelt. Da man anfangs völlig unab-
hängig von der traditionellen Schriindustrie agierte, gab es bei keinem der
teilnehmenden Firmen irgendwelche Berührungsängste oder Vorbehalte.
Typekit kooperierte daher schon früh mit allen möglichen Schrihäusern und
Einzelkämpfern – und die Akquise durch Adobe im Jahr 2011 scheint daran
nichts geändert zu haben. Natürlich gibt es jede Menge Schrien aus dem
Adobe-Fundus zur Auswahl, daneben aber auch Werke von Underware, Dalton
Maag, Bitstream, FontFont, Veer und seit kurzer Zeit auch – als bezahltes
Upgrade – die Klassiker von Monotype. Insgesamt mehr als 1.500 Familien.

Typekit ist einer der technisch ausgefeiltesten Services, deren Macher durchaus
auch eine gestalterische Mission erfüllen möchten, die über das reine Geld ver-
#webtypobuch – 95

dienen hinaus geht. So entwickelten sie gemeinsam mit Google den WebFont
Loader, ein kleines JavaScript zur optimierten Einbindung von Fonts, welches
sie unter einer Open-Source-Lizenz anbieten. Außerdem gibt es im Typekit-
Blog jede Menge lehrreiche Fachartikel zu diversen emen rund um Bild-
schirmdarstellung, Hinting und Schriwahl. Viele Sachverhalte sind darin noch
wesentlich ausführlicher dargestellt als es im Rahmen dieses Buches möglich
ist.

Adobe gliedert Typekit derzeit in seine Creative-Cloud-Strategie ein und macht


den Service seinen Abonnenten kostenlos zugänglich. Man kann sich jedoch
auch als Nicht-Adobe-Kunde weiterhin problemlos anmelden.

Typekit bietet als reiner Hostingdienst seinen Katalog nicht zum Download
oder Selberhosten an. Ein Kundenkonto kostet zwischen 25 und 100 Dollar im
Jahr und enthält jeweils ein bestimmtes Limit an monatlichen Pageviews sowie
unterschiedliche Teilkataloge. Das Schöne am verwendeten Lizenzmodell:
Lediglich die erzeugten Pageviews sind begrenzt. Wie ich als Webdesign-Agen-
tur die reale Nutzung der Schrien auf diverse Kundenwebsites und Domains
verteile, spielt erstmal keine Rolle.30

FontShop
Als Ende 2009 im FontShop-Sprachrohr Fontblog drei gleichberechtigte typo-
grafische Milieus ausgerufen wurden – nämlich Prepress, Office und Internet –,
verpflichtete man sich damit gleichzeitig, auch in Sachen Webfonts aktiv zu
werden und sich ein entsprechendes Geschäsmodell auszudenken.31 Das
Ergebnis sind einige tausend Pakete von Schrifamilien bunt gemischter Her-
steller, die für den selbstgehosteten Webfont-Einsatz heruntergeladen und
genutzt werden dürfen. Die Fonts kommen dabei ausschließlich im WOFF-
und EOT-Format daher. Beim Kauf entscheidet man sich pro Paket für eine

30. Typekit behält sich gleichwohl in den AGB vor, die Anzahl der Kundenwebsites, die eine
Agentur mit den Fonts bespielt, im Einzelfall zu begrenzen.
31. Hier enthalte ich mich eines wertenden Urteils, da FontShop als Buchsponsor auritt, und
ich als externer Berater im Prozess der Preisgestaltung ein wenig involviert war.
#webtypobuch – 96

von drei Größenordnungen, was die zu erwartenden monatlichen Pageviews


angeht: bis 500.000, bis 5 Millionen oder bis 50 Millionen.

Es gibt darüber hinaus eine interessante Kooperation mit Typekit: Wer Schri-
lizenzen bei FontShop erwirbt, kann diese wahlweise über Typekit stressfrei
und hochgradig kompatibel hosten lassen, auch wenn die betreffende Schri
bei Typekit normalerweise gar nicht zum Mieten bereit stünde.

fonts.com
Etwas verspätet, wie es sich für eine große traditionsreiche Firma gehört, ging
auch Monotype im Herbst 2010 mit einem eigenen Webfont-Service an den
Start. Vertreten sind allerdings nicht nur hauseigene Schrien, sondern auch
eine große Vielfalt anderer Hersteller, darunter der neue Kooperationspartner
Adobe. Insgesamt reden wir von ca. 20.000 Einzelschnitten und ca. 1.000 Fami-
lien. In erster Linie besticht Monotype jedoch gewohnheitsmäßig mit seinen
vielen Klassikern! Ob Frutiger, Interstate oder Avant Garde – die maßgeblichen
Schrien der Sechziger, Siebziger und Achtziger sind quasi alle mit an Bord
und teilweise fit für den Einsatz im Web. Man kann sich bei der Schrirecher-
che glücklicherweise die „hand tuned“ Schrien getrennt anzeigen lassen und
kommt dann auf knapp 2.000 Einzelschnitte, also etwa 10 Prozent des gesamten
Webfont-Repertoires, welche in der Bildschirmdarstellung unproblematisch
sein sollten.

Gehostet wird üblicherweise auf den Monotype-Servern. Das Zahlungsmodell


ist hierbei ziemlich flexibel, um nicht zu sagen: komplex. Zwischen 10 und
4.000 Dollar monatlicher Mietgebühr ist alles möglich, anpassbar je nach
geplanter Anzahl von Pageviews. In den teureren Tarifen ist zusätzlich der
Download zu Layoutzwecken mit dabei, und es darf auch selber gehostet
werden. Wie genau dann allerdings mit den Inklusiv-Pageviews umgegangen
wird, ließ sich nicht ohne Weiteres herausfinden. Für die Design- und Test-
phase können Agenturen einen speziellen kostenlosen Zugang beantragen.
#webtypobuch – 97

Fontdeck
Die Geschichte von Fontdeck ist der Typekit-Story nicht unähnlich. Web-
designer Richard Rutter und Typograf Jon Tan, dessen EOT-Erfahrungsbericht
hier bereits zur Sprache kam, gründeten das Unternehmen quasi zeitgleich mit
der frühen Konkurrenz, als noch kaum jemand anderes auf die Idee gekommen
war, so etwas zu machen.

Während man Typekit gewisse Platzhirsch-Ambitionen nicht absprechen kann,


ist bei Fontdeck alles eine Nummer kleiner, feiner, exklusiver, aber auf keinen
Fall schlechter. Es finden sich nämlich auch hier eine hübsche Anzahl an gut
kuratierten Schrischmieden wieder; hervorzuheben sind sicherlich exljbris,
Fontsmith, Storm Type Foundry, URW++ und Veer.

Fontdeck bietet ausschließlich Cloud-Hosting an. Interessant ist dabei das


Abrechnungsmodell: Man zahlt keine Flatrate für das gesamte Repertoire, son-
dern einen individuellen Betrag nach realer Benutzung eines einzelnen Schri-
schnitts. Dieser liegt irgendwo zwischen 2,50 und 20 Dollar pro Jahr. Die
Bandbreite ist dabei auf jeweils eine Million Pageviews pro Monat begrenzt,
wenn man nicht ein Traffic-Zusatzpaket erwirbt oder gleich ein individuelles
Enterprise-Angebot anfordert.

Das hört sich zunächst für die teilnehmenden Schrihäuser lohnenswerter an


als für den Endkunden, und wer viel und wild mit Webfonts experimentiert, ist
womöglich bei Flatrate-orientierten Services besser aufgehoben. Doch für den
gezielten und wohlüberlegten Einsatz kann Fontdeck ebenfalls hochinteressant
sein. Es sind großartige Schrien am Start, und Technik, Erfahrung sowie
Karma stimmen sowieso. Rechnen Sie einfach selber aus, was es Ihnen wert ist!

WebInk
Ungewohnt locker und startuppig kommt ein alter Bekannter des Schribusi-
ness daher: Extensis. Einst als Schöpfer des längst verstaubten Fontmanager
Suitcase bekannt, versuchen sie es mit WebInk noch einmal. Und die Sache sieht
nicht übel aus, soviel möchte ich festhalten!
#webtypobuch – 98

WebInk startete 2010 fast zeitgleich mit fonts.com – ist aber zu Unrecht viel
weniger bekannt. Es sind viele der bekannten Hersteller mit an Bord, wenn
auch direkte Konkurrenten (Monotype-Umfeld) oder die ganz großen Fische
(FontFont) fehlen. Aber man kann sich beispielsweise auf Werke von Adobe,
P22, ParaType, TypeTogether und URW++ freuen.

WebInk setzt auf das von Typekit bekannte Flatrate-Mietmodell, wobei mit Flat
nicht der Traffic, sondern die Anzahl der Schrien und Projekte gemeint ist.
Mitgezählt werden ausnahmsweise nicht die Pageviews, sondern die Unique
Visitors, was aber meines Erachtens lediglich ein Marketing-Gag ist, um sich
von den anderen Anbietern abzusetzen. Es gibt ein kostenloses Entwickler-
konto (wie bei fonts.com), aber Kunden von Agenturen müssen sich – im
Gegensatz zu Typekit – ein eigenes Konto zulegen, um die Fonts im Produktiv-
betrieb nutzen zu dürfen.

Fontspring
Der kleine, sympathische Schrihändler Fontspring wurde 2010 gestartet und
behandelt Print- und Webfonts erfrischenderweise als gleichberechtigte Pro-
duktvarianten. Alle gelisteten Schrien lassen sich mindestens für den Print-
und Webeinsatz lizensieren; manche Fonts stehen auch für Apps und E-Books
zur Verfügung. Einen Hosting-Service spart man sich, ebenso umgeht man das
Mietmodell: einmal kaufen, selber hosten, unlimiert nutzen – das ist das denk-
bar simple Fontspring-Modell. Die Website ist auch entsprechend übersichtlich
aufgebaut und schick gemacht. Im Grunde gibt es nur einen Nachteil: die eher
geringe Anzahl an bekannten Schrihäusern. Hervorstechend wieder einmal:
exljbris und Mark Simonson, die aber bekanntlich auf allen erdenklichen
Hochzeiten tanzen.

Gegründet wurde Fontspring übrigens von FontSquirrel-Macher Ethan


Dunham, dem man in Sachen Webfont-Technologie absolut vertrauen kann.
Alle Fontspring-Fonts sind, laut eigener Aussage, zumindest automatisch
gehintet. Man verlässt sich also nicht auf das Material, welches die Hersteller
anliefern, sondern schickt die Schrien noch einmal durch eine eigene Quali-
#webtypobuch – 99

tätskontrolle, was sicher ein gutes Kaufargument ist. Außerdem liegen die
Preise mit ca. 20 Euro pro Schnitt voll im marktüblichen Rahmen.
#webtypobuch – 100

Webtype

Eine überschaubare Menge an Köchen ist auch beim Hosting-Dienst Webtype


zugange. Im Wesentlichen sind dies e Font Bureau, die Agentur Roger Black
und Peter van Blokland, die – beinahe ausschließlich – die Schrien der erstge-
nannten Firma vertreiben. Die Website mag dafür auf den ersten Blick etwas
überambitioniert wirken, aber eventuell wächst das Angebot in Zukun ja
noch.

Das Preismodell ist vergleichbar mit Typekit. Besonders erwähnenswert sind


die brandneuen Schriarten mit dem Reading-Edge™-Label32, welche speziell
für kleine Schrigrade zwischen 9 und 16 Pixeln optimiert wurden. Sie sind
exklusiv über Webtype verwendbar.

Typotheque
Natürlich bieten auch manche selbstständige Schrientwerfer ihre eigenen
Webfonts-Lizenzen zum Kaufen oder Mieten an. Wer eine Schri ganz beson-
ders liebt, erwirbt sie also direkt beim Hersteller und umgeht somit ressourcen-
fressende Mittelsmänner.

Peter Biľak ist so ein Freigeist. Der in Holland lebende Tscheche ist seit vielen
Jahren ein bekannter und geschätzter Schrientwerfer, gestaltete unter anderem
die Fedra- und Greta-Großfamilien. Als Webfonts im Jahr 2009 greiar
wurden, ließ er sich jedoch nicht auf eine Partnerscha mit Typekit, Fontdeck
oder Monotype ein, sondern startete seinen komplett eigenen Webfont-Service
unter typotheque.com/webfonts, wo er ausschließlich Produktionen aus seinem
Atelier anbietet. Der besondere Clou für Webfont-Kunden: Man zahlt einmalig
einen festen Preis pro Schri oder Schrifamilie, kann aber den integrierten
Webfont-Service trotzdem ein Leben lang nutzen. Die Option zum Selberhos-
ten ist hier zwar vorhanden, aber extrem kostspielig und wohl nur für größere
Unternehmen interessant.

32. www.fontbureau.com/ReadingEdge
#webtypobuch – 101

Google Web Fonts

Und natürlich macht Google alles wieder ein wenig anders als die anderen. Das
Webfont-Verzeichnis des Internet-Konzerns ist komplett kostenlos, bietet über
500 Schrifamilien zum unbegrenzten Hosting sowie zum Download als Raw
Font an, und ist dabei auch noch werbefrei. Wie geht das?

Im Grunde ein einfach zu durchschauender Trick: Bei Google Web Fonts finden
sich ausschließlich Schrien mit Open-Source-Lizenz, und diese kommen in
den seltensten Fällen von bekannten Studios oder Gestaltern. Vielmehr sind es
junge Talente, Studenten und angehende Schrientwerfer, die sich auf dieser
Plattform einen Namen machen können – so die Idee dahinter. In der Praxis
hat das spürbare Auswirkungen. Auf Google Web Fonts muss man die richtig
guten Schrien sorgfältig suchen und testen, denn die durchschnittliche techni-
sche und gestalterische Qualität ist eher gering. Ausnahmen bestätigen die
Regel: Man findet natürlich eine Source Sans Pro, eine Gentium und eine Lato.
Aber neben den zwei Handvoll Freefont-Evergreens gibt es wenig Ausgefeiltes.
Vielmehr besteht bei einigen Schrien akuter Plagiatsverdacht, weswegen ein
nicht unerheblicher Teil der Schriindustrie eher die Nase rümp, wenn es um
Google Web Fonts geht.

Dennoch kann man ganz pragmatisch festhalten, dass der Service vorzüglich
funktioniert. Das Auswählen der Schrien ist flott und unkompliziert; man
schnürt sich sein Wunschpaket zusammen, bekommt sowohl einen Embed-
Code als auch einen gezippten Download und kann in weniger als drei Minu-
ten fertig sein mit dem gesamten Vorgang. Für den risikofreien Einstieg in die
Welt der Webfonts also wirklich ideal. Für anspruchsvolle Webdesigner jedoch
in den meisten Fällen nicht mehr als eine Spielwiese zum Testen.

Aber ganz unabhängig vom Webfont-Kontext ist das Google-Verzeichnis auch


einfach eine empfehlenswerte Quelle für das Finden und Herunterladen von
freien Printschrien.
#webtypobuch – 102

Adobe Edge Web Fonts


Ganz frisch auf dem Markt ist Adobe Edge Web Fonts, eine lupenreine
Mischung aus Typekit-Technologie und Google-Web-Fonts-Repertoire. Ja, es
sind in erster Linie tatsächlich die gleichen 500 Open-Source-Schrien, die hier
kostenlos zur unbegrenzten Nutzung bereit gestellt werden – die üblichen Ver-
dächtigen, wie man inzwischen sagen kann!

Der neue Hosting-Service ist darüber hinaus prominent in die Soware-Pro-


dukte der Edge-Marke von Adobe eingebettet, beispielsweise Edge Code oder
Edge Reflow, und lässt sich damit bequem einsetzen. Immer vorausgesetzt, man
hat von diesen Produkten schon einmal etwas gehört …

FontSquirrel
Eine letzte potenzielle Zielgruppe fehlt noch, und das sind diejenigen Web-
designer, die ihre Schrien kostenlos beziehen wollen, auf das Selberhosten
bestehen, aber dennoch keine Lust auf technische Probleme bei der Einbindung
haben. Hier springt FontSquirrel als Dienstältester aller aufgeführten Services
in die Bresche. Denn die meisten der hier angebotenen 800 Schrifamilien
lassen sich als komplett vorbereitetes @font-face Kit herunterladen (inkl. aller
Webfont-Formate und CSS-Regeln) und sofort stressfrei auf der eigenen Web-
site einbinden.

FontSquirrel hat dabei naturgemäß mit den gleichen Problemen zu kämpfen


wie Google Web Fonts: Die Qualität der Schrien ist omals zweifelha und/
oder riecht nach Plagiat. Seien Sie also auf der Hut und prüfen Sie genau, mit
welcher Schri als Grundlage Sie das nächste große Webportal auauen
wollen. Bei einem Bezahlanbieter können Sie diesbezüglich nicht viel falsch
machen und haben automatisch eine gewisse Qualitätssicherung. Nutzer von
Google Web Fonts, Adobe Edge Web Fonts und FontSquirrel sind da auf ihr
eigenes Gespür angewiesen.
#webtypobuch – 103

Schriftwahl konkret: Was nimmt man?


Es ist die häufigste Frage, die einem von ambitionierten Hobbygestaltern
gestellt wird, und selbstverständlich gibt es darauf keine gute Antwort: „Welche
Schri nimmt man denn jetzt so?“ Auch gerne in der Variation: „Und was ist
jetzt die beste Schri?“

Dutzende von Büchern und hunderte von Fachartikeln beschäigen sich mit
der Frage nach einer sinnvollen, passenden, provokativen oder aufregenden
Schriwahl für das nächste Kundenprojekt. Und die ganz Mutigen belassen es
nicht bei einer einzelnen Schri, sondern wagen sich an eine Schrimischung
heran, was eine Menge zusätzlicher Aspekte aufwir.

Am Anfang jeder Entscheidung stehen jedoch stets eine ganze Reihe von
Fragen, die Sie für sich und Ihr Projekt beantworten sollten:

■ In welcher Branche befinden wir uns?

■ Möchte ich zurückhaltend oder aggressiv aureten?

■ Befinde ich mich in einem konservativ-traditionellen Kontext, oder geht es


eher modern und weltoffen zu?

■ Welchen Lesemodus erwarte ich vom Besucher? Ist mein Projekt eher
etwas zum Nachschlagen, Recherchieren oder längeren Schmökern? Oder
soll der Besucher gar zu Aktionen getrieben werden?

■ Welche Geschichte will der Absender von sich erzählen? Handelt es sich
um einen hungrigen Underdog oder eine etablierte Marke von hoher
Seriosität?

■ Wie ironisch ist das Umfeld? Und gibt es eine Meta-Ebene, die man
ansprechen kann?

■ Ist Authentizität ein wichtiges ema? Wie selbstgemacht oder gar


„ungestaltet“ muss oder darf eine Website aussehen?

Ich will nicht behaupten, dass man mit der Wahl einer Schriart alle diese
Fragen zufriedenstellend beantworten kann. Aber man sollte im Hinterkopf
#webtypobuch – 104

behalten, wer am Ende die Texte lesen soll, und welchen Beigeschmack wir den
Inhalten hinzufügen, um die Sache stimmig zu machen. Oder gerade nicht
stimmig! Denn auch eine provokante oder abwegige Schriwahl kann ihre
Berechtigung haben; nur so entstehen typografische Trends. Man denke bei-
spielsweise an fette gebrochene Schrien, die erst im Heavy Metal (Motörhead)
und später im amerikanischen Hip-Hop groß in Mode waren. Heute kommt es
einem alltäglich vor, doch anfangs war dies ein krasser Stilbruch und ein muti-
ger Trend.

Bei den allermeisten Angeboten im Web geht es jedoch um Übersichtlichkeit


und schnelle Information. Eine allzu experimentelle Schriwahl schadet hier
meist. Sollten Sie aber die Chance haben, einen Entwurf im künstlerisch-kultu-
rellen oder gar popkulturellen Umfeld platzieren zu können, nutzen Sie es als
Spielwiese für typografische Experimente. Nur wer wagt, gewinnt!

Abgesehen davon möchte ich im Folgenden eine kleine Liste von Schriarten
besprechen, die es entweder bereits zu modernen Klassikern der Webtypografie
gescha haben, oder aber besonders sorgfältig für den Bildschirmeinsatz opti-
miert wurden. Sie werden mit diesen Fonts sicher keine Originalitätspreise
gewinnen, aber bedienen dafür zielgenau den Trend der frühen Zehnerjahre.

Museo

Jos Buivenga ist sicher einer der wichtigsten Schrientwerfer der letzten zehn
Jahre, der sich und sein kleines Unternehmen exljbris mit extrem geschickter
Platzierung von kostenlosen Schrischnitten bekannt gemacht hat. Auch die
Museo gibt es in Teilen kostenlos zum Download. Sie besteht insgesamt aus vier
Familien: Museo, Museo Sans, Museo Sans Rounded und Museo Slab. Wer die
hohe Museo-Dichte auf stylischen Websites der Post-Web-2.0-Ära nicht mitbe-
kommen hat, muss im Grunde unter einem Stein gelebt haben. Sie wirkt aber
immer noch frisch, elegant, modern und sieht vor allem in riesigen Schrigra-
den (ab 30 Pixel aufwärts) gut aus.
#webtypobuch – 105

Adelle

Wer hätte gedacht, dass eine serifenbetone Schri (auch Egyptienne genannt)
noch einmal so gut ankommen würde? Wenn man sich die eher biederen
Genre-Standards Rockwell oder Serifa ansieht, bekommt man nicht gerade
Lust, mit so einer Schri ins 21. Jahrhundert zu starten. Doch die Adelle ver-
sucht sich – ähnlich wie die Caecilia – eher an einer Neuinterpretation des
emas „serifenbetont“: Ihre stabilen, aber offenen Formen machen großen
Spaß, und insbesondere die ultradünne Variante zaubert schicke Überschrien
ins Layout. Nicht umsonst hat sich die praegnanz.de GbR im Frühjahr ent-
schieden, die Adelle für Logoschrizug und Headlines einzusetzen. Wir
werden nicht die Einzigen bleiben!

Alternate Gothic No. 3 D

Eigentlich keine echte Einzelschriempfehlung, sondern ein Stilmittel, welches


mir immer wieder auffällt: sehr schmale, aber fette serifenlose Versalien in rie-
sigen Schrigraden. Omals in der Alternate Gothic gesetzt, aber bisweilen
auch in der League Gothic oder der DIN Engschri, was beinahe aufs Gleiche
rauskommt. Höchstwahrscheinlich handelt es sich hierbei um eine gewisse
Trotzreaktion gegen die jahrzehntelange Limitierung auf langweilige websi-
chere Schrien. So eine großzügige grafische Anmutung war damit nämlich
beim besten Willen nicht möglich. Und ganz ehrlich: Mir gefällt die klare visu-
elle Aussage und die Prägnanz der kompakten Buchstabenblöcke recht gut. Es
könnte allerdings sein, dass sich dieses Stilmittel relativ flott verbraucht und
zum Standard wird. Dann sollte man am besten flott damit auören, um nicht
zum Klischee zu mutieren.
#webtypobuch – 106

FF Meta

Die maßgebliche Schri der Neunziger erlebt nach einer kurzen Überdrus-
sphase zur Jahrhundertwende seit geraumer Zeit eine Renaissance im Web.
Nicht nur die Firefox-Macher der Mozilla Foundation vertrauen auf die
bewährte Formgebung der Meta, auch zahlreiche Webfont-betriebene Relaun-
ches der letzten Jahre beweisen, dass sich die gesamte Sippe der von Erik Spie-
kermann gestalteten Schri auf dem Bildschirm außerordentlich gut macht.
Besonders hervorheben möchte ich hierbei die FF Meta Serif, welche erst 2007
erschien, also 22 Jahre nach der ursprünglichen serifenlosen Variante. Sie ist
eine wirklich tolle Alternative zu Georgia, Times und Co. – definitiv auch in
Fließtextgrößen!

Proxima Nova

Ursprünglich bereits 1994 als Proxima Sans erschienen, wurde die Proxima
Nova aus dem Hause Mark Simonson im Jahr 2005 komplett überarbeitet und
neu herausgegeben. Seit der Webfont-Revolution ist sie interessanterweise vor
allem in reinen Versalien ziemlich häufig zu sehen; insbesondere auf amerika-
nischen Websites. Das könnte damit zu tun haben, dass sie gerne als Gotham-
Ersatz verwendet wird, da jene Schri von Hoefler & Frere-Jones noch nicht als
Webfont zur Verfügung steht. Gotham-Versalien wurden hingegen – jeder weiß
es – für den Obama-Wahlkampf 2008 und 2012 eingesetzt. Hier schließt sich
dann der Kreis. Aber auch in gemischter Schreibweise macht die Proxima übri-
gens eine gute Figur, wenn sie auch nicht gerade vor Charakter überschäumt.
#webtypobuch – 107

Azuro

Die Azuro des deutschen Schrientwerfers und Soware-Entwicklers Georg


Seifert ist ein zweischneidiges Schwert. Sie wurde speziell für optimale Leser-
lichkeit auf modernen Bildschirmen entwickelt und kam erst vor gut einem
Jahr (Frühjahr 2011) auf den Markt. Die Leserlichkeit basiert unter anderem
auf der guten Unterscheidbarkeit der einzelnen Buchstabenformen, was die
Schri lebendig, würzig und kernig macht. Nicht alle jedoch mögen dieses
Schribild der Azuro, sie wird bisweilen als zu unruhig bezeichnet, und die
Satzzeichen sowie i- und Umlaut-Punkte als zu groß kritisiert.

Nun, wie man’s nimmt! Niemand hat behauptet, dass eine gut lesbare Schri
gleichzeitig schön zu sein hat; es sind ja o die eher rauen Ecken und Kanten,
welche dem Auge Halt geben. Ich schlage vor, Sie geben der Azuro eine Chance,
sich zu beweisen: Auf www.fontblog.de finden sich viele interessante Facharti-
kel, und nicht ganz zufällig33 sind diese allesamt in der Azuro 15px gesetzt.

33. Die FontShop AG, Betreiberin des Fontblogs, ist gleichzeitig Sponsorin dieses Buches und
Herausgeberin der Azuro. Deswegen fälle ich an dieser Stelle kein finales Urteil über diese
Schri. Entscheiden Sie selbst!
#webtypobuch – 108

Microsofts Cleartype-Schriften

Mit dem Erscheinen von Windows Vista im Jahr 2007 brachte Microso so
etwas wie die nächste neue Generation von Core Fonts auf den Markt: Sechs
brandneue Schrien, zum Teil von namhaen Typografen entworfen, und ein
Frutiger-Klon namens Segoe UI sollten das typografische Handwerkszeug für
Millionen von PC-Nutzern erweitern. Der Clou: Alle Fonts wurden speziell für
die Cleartype-Schriglättung und moderne LCDs optimiert und wirken unter
Windows knackscharf, robust und souverän.

Auch gestalterisch ist für jeden Anwendungsfall etwas geboten: Calibri als die
neue – im Vergleich zu Arial wärmere – Allerweltsschri. Corbel für die etwas
maskulinere Note. Constantia für historisch angehauchte Sujets. Cambria als
moderne und platzsparende Serifenschri. Candara für organisch-naturnahe
Setzkost. Und nicht zuletzt Consolas als exzellente Monospace-Schri für Pro-
grammcode.

Leider haben die Vista-Schrien den Sprung auf das seit damals immer populä-
rer werdende OS X und die prosperierenden Mobilplattformen iOS und
Android nie gescha. Obwohl die Fonts auch mit der Mac-Schriglättung
Quartz recht ordentlich aussehen (wenn auch einen Hauch zu fett), so wurden
sie dort eben ausschließlich mit Microso Office mitgeliefert, welches bei
weitem nicht jeder Mac-User zu Kaufen bereit ist. Somit bleibt die Einbindung
von Calibri und Co. über einen Webfont-Service, was ich dem geneigten Leser
hiermit aber durchaus als empfehlenswerte Möglichkeit ans Herz legen möchte.
#webtypobuch – 109
#webtypobuch – 110

Kapitel 5:
Gelungene
Webtypografie
#webtypobuch – 111

Lesarten in der Webtypografie


Bei der Frage, wie man sinnvollerweise die vielen Beispiele für gelungenes
Webdesign gliedern könnte, erinnere ich mich an das Standardwerk „Lesetypo-
grafie“34 von Hans Peter Willberg und Friedrich Forssmann, welches einen
festen Platz in jeder ernsthaen Design-Literatursammlung haben sollte. Die
Autoren definieren darin eine Reihe unterschiedlicher typografischer Lesarten,
in die man idealerweise jegliches gedruckte Wort einsortieren kann. Die Kate-
gorisierung beschreibt folgende Stoßrichtungen:

■ Lineares Lesen

■ Informierendes Lesen

■ Differenzierende Typografie

■ Konsultierendes Lesen

■ Selektierendes Lesen

■ Typografie nach Sinnschritten

■ Aktivierende Typografie

■ Inszenierende Typografie

Nicht alles davon mag ich für meine eigene Gliederung verwenden, denn der
Anspruch dieses kleinen Werkes ist nicht die Vermessung sämtlicher denkbarer
Webtypografie, sondern eher ein Schärfen der Sinne, damit Leserin und Leser
sich selbstständig eine Meinung bilden und natürlich gestalterisch tätig werden
können.

Ganz allgemein jedoch ist es von essenzieller Bedeutung, sich bereits vor den
ersten Entwürfen klarzumachen, welche Lesarten man mit seiner geplanten
Website bedienen möchte. Was denken Sie, wieviel Zeit und Engagement ein
Nutzer auf Ihrer Website investieren wird? Müssen Sie die Leserin aktiv ins

34. Das Buch beim Verlag: www.typografie.de/::1308.html


#webtypobuch – 112

Angebot hineinziehen und auf andere tolle Bereiche hinweisen? Oder ist es
sinnvoller, ihr einfach das zu geben, was sie sucht, um sie schnell wieder zu ent-
lassen in der Hoffnung, sie kehrt freiwillig – und damit höher motiviert – zu
Ihnen zurück?

Ich bedanke mich an dieser Stelle beim Blogteam von Typekit für die nützliche
Kategorie „Sites we like“, aus der ich einige der hier vorgestellten Websites ent-
nommen habe. Es ist leider nicht leicht, Beispiele für originelle Webtypografie
zu finden und dabei die Präsenzen von Agenturen und Webdesignern auszulas-
sen. Aus diesem Grund stammen die meisten der hier vorgestellten Beispiele
aus dem amerikanischem Raum. Für Hinweise bezüglich fantastisch gestalteter
deutschsprachiger Websites mit prägnanter, mutiger und kravoller Typografie
bin ich stets dankbar!

Lineares Lesen
Beim Linearen Lesen geht es primär um die bestmögliche Lesbarkeit von
langen Texten. Ablenkungen jedweder Natur sind unerwünscht, und man
unterstellt dem Lesenden, dass er dies tatsächlich freiwillig tut. Eine gern
zitierte Legende besagt zwar, dass im Web niemand längere Texte sehen
möchte, und von daher diese Lesart im Browser nichts zu suchen habe. Doch
seit die Bildschirme weniger strahlen und höher aufgelöst sind, sowie mit
handlichen Tablet-Rechnern eine ganz neue, stressfreie Art des Online-Lesens
ermöglicht wird, sind auch lange, non-hierarchisch gegliederte Texte für Web-
typografen interessant geworden. Leider ist es noch nicht leicht, gelungene Bei-
spiele für die Umsetzung von langen Texten im Web zu finden. Wer immer
Bücher zum rein digitalen Lesen anbietet, macht dies in der Regel als PDF oder
EPUB, nicht in einem browseroptimierten HTML-Dokument. Daher stammen
die folgenden drei Beispiele alle aus der Kategorie „von Designern für
Designer“. Schade, denn hier ist definitiv mehr Potenzial, auch für Sujets außer-
halb unserer Branche!
#webtypobuch – 113

Einer der Vorreiter in Sachen Weblesbarkeit ist Oliver Reichenstein und seine
Agentur Information Architects (iA). Er proklamierte bereits im Jahr 2006 den
„100 % Easy-2-Read Standard“35, der einen für damalige Verhältnisse unglaub-
lich hohen Fließtext-Schrigrad von 16px vorsah.

Das Blog von iA sieht aktuell folgendermaßen aus:

Man erkennt sehr stark den Wunsch, wie ein gedruckter Roman auszusehen, so
viele bibliophile Stilmittel sind zu finden. Eine Ausnahme bildet der nicht vor-
handene Blocksatzs, obwohl dieser hier theoretisch gar nicht stören würde,
handelt es sich doch um englische Texte mit ausreichend vielen Wörtern pro
Zeile.

Die Perfektion, mit der iA ihr eigenes Blog gestaltet haben, erkennt man unter
anderem daran, dass sie nicht einmal davor zurückgeschreckt sind, eine eigene
Schri(!) zu entwerfen: eine Barock-Antiqua mit einem angenehmen, nicht zu
sterilen Schribild. Wer Oliver Reichenstein auf Twitter folgt (@iA), wird mit-
bekommen haben, dass für den Website-Relaunch viel mit High-PPI-Bildschir-
men experimentiert wurde, und erst der eigene Font in der Lage war,
zufriedenstellende Resultate zu erzielen. Insbesondere die häufig benutzte Kur-

35. informationarchitects.net/blog/100e2r/
#webtypobuch – 114

sive punktet mit einigen verspielten Details, welche das richtige Maß an Indivi-
dualität erzeugen.

Natürlich wirkt das iA-Blog auf den ersten Blick eher klassisch, bildungsbürger-
lich, konservativ. Die zentriert gesetzten Überschrien und Autorenangaben
geben dem Ganzen zusätzlich einen gewissen höfisch-royalen Anstrich. Aber
im Kontext der maximalen Reduktion und ein bisschen auch im Hinblick auf
die ironische Meta-Ebene einer progressiv denkenden Agentur kann man das
sehr gut als provokantes Statement stehen lassen.

Dass handwerkliche Parameter wie Zeilenlänge (75 Anschläge), Zeilenabstand


(1.524em) und Farbkontrast (#111111 auf #fdfdfd) ideal gewählt sind, versteht
sich von selber.

Mit einem anderen Ansatz, aber ebenfalls gut gelöst ist die Leserlichkeit bei
Design made in Germany (DmiG). Das Portal besteht nicht ausschließlich aus
Prosa, sondern zeigt auch viel Fotografie und Grafikdesign. Wenn jedoch ein
längerer Text abgebildet wird, passiert dies wie in folgendem Screenshot:

Der Farbkontrast ist vergleichsweise gering, nämlich #333333 auf #e6e6e6.


Interessanterweise kommt der gesamte Text mit einem leichten Präge-Effekt
daher, indem ein weißer text-­‐shadow einen Pixel nach rechts unten versetzt
wird. Erwähnenswert ist auch die Schrimischung: Während alle Überschrien
#webtypobuch – 115

und Teaser in der als Webfont eingebundenen FF DIN Round gesetzt sind, tritt
der eigentliche Fließtext als klassische 14-Pixel-Arial auf: Vertrauen in das
bewährte Hinting einer gut abgehangenen Systemschri. Da die Zeilen etwas
länger sind als im iA-Blog (ca. 95 Anschläge), sollte auch der Zeilenabstand ein
wenig größer sein. Mit 1.6em ist das erfüllt. Nach meinem Dafürhalten düre
der Abstand zwischen den einzelnen Absätzen gerne etwas geringer ausfallen.
Grundsätzlich aber attestiere ich DmiG eine sehr gelungene Gestaltung in
Bezug auf das Lineare Lesen.

Tatsächlich ein echtes Buch zum Online-Lesen habe ich dann aber letztlich
doch noch gefunden. Natürlich kommt es mit einer gehörigen Portion
Selbstreferenzialität daher, denn es ist ein Buch über „e Shape of Design“.

Ähnlich wie bei iA steht hier alles im Zeichen des eigentlichen Inhaltes. Nichts
soll ablenken. Dies gelingt durch die großzügigen Abstände zur stilisierten
Papierseite, die von einem hellgrauen Hintergrund abgesetzt ist. Die Kapitelna-
vigation beschränkt sich auf kleine Kreise, so dass die einzig verwendete
Schri, die FF Quadraat, tatsächlich auf der gesamten Seite nur in einer einzi-
gen Größe verwendet wird, nämlich 24 Pixel. Beachten Sie insbesondere den
Einsatz von echten Kapitälchen in der Überschri, eine Rarität in der Webtypo-
grafie! Dies sind nicht einfach leicht verkleinerte Versalien aus der regulären
Schri, sondern ein eigener Schrischnitt mit speziellen Formen, die zwar klei-
#webtypobuch – 116

ner, aber nicht dünner sind als die normalen Großbuchstaben. Auch diese
Headline ist in 24 Pixel gesetzt. Und natürlich wird – wie wir das weiter oben
gelernt haben – bei den Kapitälchen ein wenig zusätzliche Laufweite angewen-
det (letter-­‐spacing:2px), so dass auch dem pingeligen Typografen das Herz
aufgehen muss.

Die Schrifarbe ist übrigens weder komplettes Schwarz noch neutrales Dunkel-
grau, sondern geht mit dem Hexawert #404030 ein kleines bisschen ins Grün-
bräunliche. Mag sein, dass das aber auch nur ein Versehen ist.

Informierende Typografie
Die mit Abstand meiste Typografie im Netz fällt unter diese Kategorie. Wir
treffen auf Websites, die uns als erstes eine Übersicht präsentieren, die mit Tea-
sern gespickt ist, also kleinen Anreißern, die uns auf einzelne Artikel locken
sollen, oder in eine emenrubrik, die dann wiederum eine Übersichtsseite der
enthaltenen Artikel bietet. Zusätzlich zu dieser hierarchieähnlichen Struktur
gesellen sich jedoch stets jede Menge Spezial-Teaser mit Querverweisen, die
entweder intern zu Sonderaktionen oder auf Partner-Websites verweisen.

In jedem Falle sind es eine ganze Reihe von aufmerksamkeitsheischenden Ele-


menten, bei denen das Auge des Betrachters gut geführt werden will. Ziel ist es,
die volle Vielfalt, das pralle Leben zu zeigen, ohne aber die Übersicht aufzuge-
ben und den Nutzer anständig zu leiten. Darüber hinaus gilt es, über ein unver-
wechselbares Äußeres eine starke Markenbotscha zu delivern.36

36. Seht her, ich habe Beratersprech verwendet! Mehr hier: beratersprech.de
#webtypobuch – 117

Eine gelungene Startseite, die Vielfalt und Aufgeräumtheit sehr gut in Einklang
bringt, ist das Portal des Center for Investigate Reporting (CIR). Der geschickte
Einsatz von asymmetrisch angeordneten Textelementen und Farbflächen, das
hervorragend gestaltete Karussell, welches Text und Bild auf clevere Weise und
mit genügend Helligkeitskontrast miteinander kombiniert: sehr gut gemacht!
Die Seite besteht größtenteils aus der PT Sans, die Eyecatcher-Worte im Karus-
sell vertrauen jedoch auf die Adelle.
#webtypobuch – 118

Stärker auf die „Heilige Dreispaltigkeit“ ausgelegt und weniger flächig als viel-
mehr kastig kommt TODAY.com daher. Auch wenn die Schri in den Teaser-
texten insgesamt zu klein gesetzt ist – mir gefallen die Headlines in der Museo
Sans sehr gut – sie sind ausreichend groß, um das Auge zu führen, aber in
einem mageren Schnitt gesetzt, so dass trotz der boulevardesken emen eine
gewisse Glaubwürdigkeit und Nüchternheit erhalten bleibt. Die vielen Boxen
mit den abgerundeten Ecken muss man freilich nicht mögen, sie sorgen jedoch
für eine Wiedererkennbarkeit im tristen Einheitsbrei der Tageszeitungen und
Webmagazine. Insgesamt wird ausreichend großzügig mit Weißraum umgegan-
gen, obwohl man sich leicht vorstellen kann, dass hier redaktionsintern ein
Machtkampf zwischen Marketeers und Designern geführt wird, der jederzeit
umkippen kann und zu einem chaotischen Layout-Schlachtfeld führt. Noch ist
das glücklicherweise nicht passiert.
#webtypobuch – 119

Noch am ehesten im klassischen Online-Zeitungslayout anzusiedeln, aber mit


erkennbarem Willen zum typografischen Feinschliff präsentiert sich die Start-
seite von „der Freitag“. Das Logo der Zeitung ist leider nicht als Webfont umge-
setzt (Warum eigentlich nicht? Eine verpasste Chance!), doch dafür sieht man
in den Überschrien und Teasertexten die wunderhübsche eAntiqua. Die
Strichstärke in den Headlines könnte hier allerdings ein wenig fetter sein, um
dem Auge eine bessere Orientierung zu verschaffen. Für sehr kleine Texte wie
Querverweise und Mini-Teaser kommt eine 11px-Lucida zum Einsatz und
kann beweisen, wie überraschend gut sie sich in diesem eigentlich zu kleinen
Schrigrad erkennen und lesen lässt. Es gelingt dem Freitag besser als vielen
anderen deutschen Webmagazinen, eine Benutzerfreundlichkeit und Glaub-
würdigkeit an den Tag zu legen, indem sie großen Wert auf die angenehme
Gewichtung von Layout-Elementen legt, die perfekt zusammenspielen und ein
homogenes Gesamtbild ergeben. Einzig die Wiedererkennbarkeit leidet ein
wenig. Eventuell hätte man eine Signalfarbe einsetzen oder statt der eAnti-
qua eine noch individuellere Schri wählen können.
#webtypobuch – 120

Doch nicht nur Übersichtsseiten wollen gekonnt geplant und umgesetzt


werden. Auch die Einzelansicht ist eine Herausforderung, vor allem bei den
komplexen Anforderungen, die ein populäres Technikportal zu bewältigen hat.
Schauen wir uns an, wie das beim international führenden Gadget-Blog e
Verge gelöst ist:

Sicherlich nicht jedermanns Geschmack, aber aus objektiver Sicht ist das Klas-
senziel erreicht: Man erkennt a) dass es sich um einen Einzelartikel handelt. Die
Headline des Artikels ist eindeutig das größte typografische Objekt im Layout,
während sich das Portallogo und alle navigatorischen Elemente zurückhalten.
Die Marke wird b) aber dennoch deutlich. Durch die markante Schriwahl
(Adelle) baut sich e Verge ein prägnantes Corporate Design. Ich behaupte
sogar, dass die Headline mehr zur Wiedererkennung beiträgt als das Logo oder
die diversen Layout-Gimicks. Neben dieser klaren Dominanz der Headline
wird aber auch c) die Reichhaltigkeit des Magazins kommuniziert. Die vielen
redaktionellen Elemente sind typografisch sehr bewusst aufeinander abge-
stimmt.

Es herrscht Vielfalt, aber kein Chaos. Freilich keine sterile Klarheit wie in der
Tradition der Schweizer Typografie, aber man merkt einen hohes Maß an Sorg-
falt und Erfahrung, was die Wahl von Schrigraden, Farben und Auszeichnun-
gen angeht. Der virtuose Umgang mit schmalen Versalien in der FF DIN
#webtypobuch – 121

Condensed, die Adelle in Schrigraden von 11px bis 50px und die exakt ausba-
lancierten Abstände um die Elemente müssen gewürdigt werden. Einzig der
geringe Kontrast bei den helleren Grautönen könnte man als Minuspunkt
werten. Man darf außerdem nicht den Fehler machen und die Startseite von
e Verge betreten. Hier ist akute Reizüberflutung geboten, was so gar nicht
zum obigen Loblied passen mag.

Einen zupackenden und gleichzeitig präzisen Umgang mit Schri beweist das
Magazin 11 Freunde in seiner Online-Ausgabe. Insbesondere die Schrimi-
schung ist erwähnenswert: In den Headlines und Teasern kommt die testoste-
rongeschwängerte „TRMelfFreunde“ zum Einsatz – offenbar eine selbstge-
hostete Eigenentwicklung oder individuelle Anpassung. Im Lauext hingegen
vertraut man mit der Andara auf eine angenehm würzige Serifenschri, die bei
Google Web Fonts gehostet wird und gewisse Ähnlichkeiten mit der Chaparral
von Adobe besitzt – sicher nur Zufall.

Die Schrimischung geht auf, und man kann vor allem an den Einzelartikeln
schön erkennen, wie die verschiedenen redaktionellen Ebenen sehr versiert
angeordnet werden. Abstände und Schrigrade sind perfekt aufeinander abge-
stimmt und sehen aus, als säßen sie schon immer harmonisch an den ihnen
zugedachten Stellen. Einen kleinen Fauxpas begehen die Macher der
11 Freunde allerdings doch. Die Andara besitzt lediglich einen einzigen Schnitt,
#webtypobuch – 122

nämlich die aufrechte Regular-Variante. Trotzdem wird für einige Subheadlines


im CSS ein bold definiert, was manche Browser dazu verleitet, die Schri
künstlich fetter zu machen, obwohl dafür keine Formen in der Schri enthalten
sind. Das sieht, vorsichtig formuliert, nicht optimal aus. Aber das ist eben der
Nachteil der freien Schrien: Sie kommen omals in zu wenig Ausbaustufen
und eignen sich nicht immer für typografisch anspruchsvolle Aufgaben.

Aktivierende Typografie
Ich zitiere aus der Lesetypografie:

Bei der aktivierenden Typografie soll die Aufmerksamkeit des Lesers geweckt
werden. Sie sollen dazu gebracht werden, den Text zu lesen, auch wenn sie es gar
nicht wollen.

Bei den vielfältigen werblichen Angeboten im Netz fällt es nicht schwer, sich
die Notwendigkeit einer solchen Typografie vorzustellen. Und so sind es vor
allem Onlineshops oder Produktwebsites, welche mit allen Mitteln – auch typo-
grafischen – die Besucher zum Lesen, Betrachten und natürlich zum Kauf ver-
leiten sollen. Zugegebenerweise besitzt die Fotografie das insgesamt größere
Potenzial zur Verführung und Aktivierung, doch auch mit richtiger Schriwahl
und geschicktem Einsatz selbiger kann die Conversion Rate positiv beeinflusst
werden.
#webtypobuch – 123

Das Weingut Lagar de Costa hält nicht viel von Kitsch und geschichtlichem
Mief, wie er in der Weinbranche so o anzutreffen ist. Statt dessen konzentriert
man sich auf nur wenige typografische Elemente, die dafür umso gekonnter in
Szene gesetzt werden: die FF Meta Serif als saubere und hervorragend ausgewo-
gene Schri, sehr viel Weißraum und Mut zur asymmetrischen Platzierung der
verschiedenen Seitenelemente. Ansonsten ausschließlich graue Farbflächen und
sich abwechselnde, authentische Fotos im Karussell. Sieht wie eine einfache
Fingerübung aus, ist es aber nicht.

Das alles mag auf Sie nicht sonderlich aktivierend wirken. Doch wer nicht mit
lauten Hier-jetzt-kaufen!-Buttons agieren möchte, muss eben alle Elemente
seines Designs entsprechend zurückhaltend umsetzen, um mit nur wenigen,
höflich formulierten Call-to-Actions den gewünschten Effekt zu erzielen.
#webtypobuch – 124

Einen Originalitätspreis gewinnt MailChimp sicher nicht. Der Trick, eine fette
Helvetica mit einer sehr geringen Laufweite zu versehen, ist Jahrzehnte alt.
Doch man muss fairerweise attestieren, dass solchermaßen gestaltete Wörter
immer noch unverschämt gut aussehen! Die Aufgabe der riesigen Überschri
ist klar: in möglichst wenigen Buchstaben erläutern, was MailChimp ist. Denn
je weniger Zeichen man dafür benötigt, desto größer kann man diese setzen,
und desto besser sieht die eng spationierte Helvetica aus. Treibt man sich im
Quelltext umher, erkennt man, dass die einzelnen Lettern sogar mit zusätzli-
chen individuellen Abständen versehen sind: Ein pragmatisches

<span  class="char2"  style="margin-­‐left:0.011em">a</span>

lässt beispielsweise das kleine „a“ in „Easy“ ein wenig weiter nach rechts rut-
schen. Faszinierend, denn manuelle Spationierung habe ich im Web bisher
auch noch nicht gesehen.

Abgesehen von diesem Detail: Mailchimp beweist, dass es auch ohne Webfonts
und CSS3-Effekte möglich ist, großzügig, hemdsärmelig und prägnant mit
Schri umzugehen. Zielgenau eingesetzt und auf den Punkt getextet, erfüllt der
„Text neben dem Affen“ einen nicht zu unterschätzenden Zweck: Den User zum
Weiterlesen oder Registrieren zu bewegen. Gut gelöst!
#webtypobuch – 125

Es ist für Designer immer eine spannende Übung, auch solche Dinge rein typo-
grafisch zu lösen, die man normalerweise eher über Fotografie oder Illustration
transportiert. Die Website eines Hot-Dog-Ladens beispielsweise. Warum nicht
die Urbanität und Andersartigkeit des Restaurants mit einer ungewöhnlichen
und neugierig machenden Website unterstreichen? Wie ein Hot-Dog ungefähr
aussieht, weiß man schließlich.

Interessant wird das Design unter anderem durch den riesigen Schrizug in der
prägnanten Gala von Canada Type, einer Mixed-Case-Schri, bei der Minus-
keln und Majuskeln wild durcheinandergemischt werden, was man seit den
Achtzigerjahren im Pop- und Display-Bereich gerne mal macht. Auch die zu-
packende Farbigkeit und natürlich die Zutaten-Diagramme als Gimmick fallen
auf. Der One-Pager ist liebevoll gemacht und kommt ganz ohne Kitsch aus.
Kann (und sollte) man machen!
#webtypobuch – 126

Es ist eigentlich zu naheliegend, Apples Website für seine gestalterischen Quali-


täten zu loben. Aber man muss einfach anerkennen, wieviel individuelle
Layoutideen auf jeder einzelnen Seite umgesetzt werden. Die typografischen
Elemente befinden sich stets im visuellen Dialog mit den dargestellten Produk-
ten, und jeder Unterbereich ist anders und ganz bewusst konstruiert. Bisweilen
wird zwar ein wenig zuviel Mittelachse eingesetzt, doch insgesamt ist hand-
werklich wenig zu meckern. So fokussiert und kravoll scha es kein anderer
Konzern, seine Produkte in Szene zu setzen – man schaue sich vergleichbare
Produktseiten bei Dell, HP oder Samsung an.

Apple vertraut in Navigation und Fließtext nach wie vor auf die Lucida, und
zwar in Schrigraden zwischen 10px und 18px. Wenn es größer wird, schwenkt
man auf die Hausschri Myriad um (meist im in-Schnitt), wobei diese ver-
wunderlicherweise nicht als Webfont, sondern als gerasterte PNG-Dateien
daherkommen. Wie lange Apple sich diesen Traffic- und Request-Luxus noch
leisten will, bleibt abzuwarten. Klar ist, dass mit der gestalterischen Pflege der
Apple-Website eine große Menge an kompetenten Personen beschäigt ist, da
hier kaum etwas automatisiert sein düre. Im Jahr 2012 ein fast schon kurioser
Spleen.
#webtypobuch – 127

Ein gutes Beispiel dafür, dass man bei der Schriwahl manchmal einfach nur
die richtige Atmosphäre treffen muss, ist das Restaurant Barley’s in South Caro-
lina. Logo und Corporate Design sind unzweifelha aus der Welt der Biereti-
ketten entlehnt. Die Wahl einer kräigen, eng gesetzten Serifenbetonten fügt
dem Ganzen noch einen gepflegten Western-Look hinzu. Dieser macht auch
komplett ohne Interieur-Fotos deutlich, wie sich dieser Pub anfühlt, wenn man
ihn betritt. Das mag im Vergleich zu den meist minimalistischen Layouts, die
ich bisher vorgestellt habe, furchtbar kitschig wirken, doch manchmal ist genau
das die gewünschte Wirkung. Nicht ohne Ironie wird hier ein gewaltiges Stück
Bierbrautradition interpretiert, und die Sache geht meines Erachtens auf. Mit
einer feinen Garamond oder einer modernistischen Museo hätte man hier
kaum eine vergleichbare Wirkung erzielen können.
#webtypobuch – 128

Hart an der Grenze zur Exaltiertheit, aber in all seiner Experimentierfreude


extrem faszinierend gemacht ist der Online-Shop von DEDON. Ein Screenshot
alleine reicht nicht aus, um den Ideenreichtum zu zeigen, den alleine die Start-
seite bietet. Typografisch versucht man, an die Siebzigerjahre anzuknüpfen, als
großflächige und eng gesetzte Schrizüge in der Modeschri Avant Garde
absolut en vogue waren. Worauf bei DEDON allerdings leider verzichtet wird,
sind die vielfältigen Ligaturen37, welche die Avant Garde in seinen gut ausge-
bauten Varianten zu bieten hätte. Erst jene kunstvollen, fast skulpturalen Zei-
chenkonstrukte machten nämlich den wahren Reiz dieser Displayschri aus.
Schade. Dafür bedient man sich eines etwas moderneren Stilmittels: der will-
kürliche Zeilenumbruch mitten im Wort – ohne Trennstrich. Nicht unstylisch,
wenn auch etwas zu gewollt eingesetzt für meinen Geschmack. Doch ich
möchte eigentlich nicht meckern. Grundsätzlich scha es der Online-Katalog
mit größtenteils typografischen Mitteln, mächtig aufzufallen und Furore zu
machen; es düre kaum einen Besucher geben, denn diese Website kalt lässt.
Spätestens bei Benutzung des Suchformulars hat man eine Meinung. Und das
muss man als Webdesigner erst einmal schaffen!

37. Verschmelzungen von nebeneinander liegenden Buchstaben zu einem neuen Zeichen. O


bei „fi“ zu beobachten, wo der Tropfen des kleinen f gleichzeitig als i-Punkt fungiert.
#webtypobuch – 129

Inszenierende Typografie
Mit ein wenig Sorge betrachtete ich vor einigen Jahren die damaligen CSS3-
und Webfont-Demoseiten, welche wie Pilze aus dem Boden sprossen. Von
einem Befreiungsschlag für die Webtypografie wurde gesprochen. Die unbe-
grenzten Möglichkeiten bei der Schriwahl, sowie die vielen gestalterischen
Stilmittel wurden gepriesen. Und um das alles zu zeigen, wurden Demoseiten
gebastelt, die mit der Realität nichts zu tun hatten, denn kein Auraggeber
würde jemals eine derartige Website oder Webapplikation beauragen oder be-
zahlen.

Manchmal neige ich dazu, solch selbstreferenzielle Gestaltung despektierlich als


„Zirkusnummern“ abzutun. Ich sollte aber nicht so streng sein. Denn auch
wenn man anhand der inszinierenden Webtypografie nicht den tatsächlichen
Lesekomfort einer Lauextschri oder die perfekt ausgewogenen Abstände für
das nächste große „Süddeutsche“-Redesign testen kann: Inspirierend und origi-
nell sind die folgenden Beispiele auf jeden Fall. Ich lasse sie zur Ausnahme
ohne Wertung stehen und beschränke mich auf die Nennung der jeweils ver-
wendeten Schriarten.
#webtypobuch – 130

www.twopaperdolls.com/hiring
Vinyl / Poplar Std / Aviano Slab / Cowboyslang Expanded

lostworldsfairs.com/atlantis
Hellenic Wide / Proxima Nova / Proxima Nova Extra Condensed
#webtypobuch – 131

lostworldsfairs.com/moon
Klavika Web / Klavika Web Condensed / Bryant Web / Coquette

www.seedconference.com
Times New Roman
#webtypobuch – 132

www.kidd81.com
#webtypobuch – 133
#webtypobuch – 134

Kapitel 6:
Zugabe
#webtypobuch – 135

Exkurs: Iconfonts
Das Spannende an neuen HTML- und CSS-Features war in der Vergangenheit
nicht immer nur deren naheliegende Primäranwendung, sondern auch die
mannigfaltigen Möglichkeiten, sie für andere Zwecke zu missbrauchen. Daten-
tabellen oder CSS-Floats für das Layout von komplexen Webdokumenten zu
verwenden, ist einerseits grauenha, auf der anderen Seite jedoch definitiv eine
trickreiche Erweiterung der jeweils aktuellen technischen Möglichkeiten.

Ähnlich verhält es sich zurzeit wieder mit dem Einsatz von Icons. Rein gestalte-
risch sind kleine Piktogramme seit Anbeginn des Webs fester Bestandteils der
üblichen Webdesign-Praxis. Kaum eine größere Website kommt ganz ohne
Icons aus, um Inhalte und Navigation schneller erfassbar zu machen, und bei
Applikationen oder Content-Management-Systemen spielen sie eine noch viel
größere Rolle. Bisher waren zwei Methoden üblich, Icons im Design zu platzie-
ren: als <img>-Element im HTML-Quelltext oder als background-­‐image im
CSS. Letzteres erfuhr zuletzt 2004 durch die clevere Sprites-Technik einen
Schub an Effizienz und Darstellungsgeschwindigkeit.38

Doch in Zeiten von unterschiedlichsten Bildschirmauflösungen und stufenlo-


sem Browserzoom ist der Pixel, insbesondere auf mobilen Touchgeräten, in
Verruf geraten. Mit der Ausnahme von fotografischen Motiven strebt man seit
einigen Monaten verstärkt nach sauberen, vektorbasierten Lösungen für alle
Elemente im Webdesign – selbstverständlich auch für Icon-Grafiken. Da ist es
dann fast schon wieder logisch, sich der jüngst erblühten Webfonts-Technolo-
gie zu bedienen und dabei spezielle Fonts zu benutzen, in denen die gewünsch-
ten Icons als Buchstaben enthalten sind. Und genau das wird seit etwa 2011
auch mit recht ansehnlichem Erfolg gemacht. Dabei gibt es ständig neue Ideen
und Infrastrukturen, die das ema weiter köcheln lassen.

Das Grundprinzip ist einfach. Sie benötigen eine Icon-Schri, in der alle Pikto-
gramme enthalten sind, die Sie für Ihr geplantes Design benötigen. Entypo und
Font Awesome sind dafür zwei recht gut ausgebaute, kostenlose Beispiele. Die

38. www.alistapart.com/articles/sprites
#webtypobuch – 136

gewählte Schri wird per @font-­‐face im Dokument verlinkt und kann dann
im CSS verwendet werden. Der Trick dabei: Der HTML-Quelltext bleibt
semantisch unangetastet, denn die Icons werden dort über reine Klassen-
Zuweisungen gesetzt, beispielsweise so:

<div  class="icon  icon-­‐cal">Termine</div>

Die verwendete Klasse hat keinerlei Nebeneffekte auf Screenreader oder andere
Hilfsmittel, ist also auch aus Sicht der Zugänglichkeit unbedenklich, wenn man
ein paar Dinge beachtet.39 Per CSS wird nun wiederum die Eigenscha :before
verwendet, um einen einzelnen „Buchstaben“ in das <div> einzuschleusen, der
natürlich im entsprechenden Iconfont gesetzt ist. Etwas vereinfacht sieht das
ungefähr so aus:

.icon:before  {  font-­‐family:  MeinIconFont;  }


.icon-­‐cal:before  {  content:  '\1d30d';  }

Der Inhalt der content-Eigenscha ist ein hexadezimaler Unicode-Wert für


das hier gewünschte Kalender-Icon. Die exakte Ausführung in seinen Einzel-
heiten überlasse ich entsprechenden Fachartikeln, die in den letzten Monaten
zum ema erschienen sind. Erwähnenswert ist hierbei sicherlich Jon Hicks’
Beitrag im 24ways-Adventskalender 2011.40

Die Vorteile der Technik liegen auf der Hand: Man erhält sämtliche benötigte
Icons in einer einzelnen Datei, erzeugt dadurch nur einen einzigen Server-
Request, was den Seitenauau beim ersten Laden beschleunigt. Darüber
hinaus sind die so eingebundenen Icons beliebig skalierbar und können per
CSS ohne matschige Pixel genauso eingefärbt und mit Schlagschatten oder
Transformationen versehen werden, wie es bei regulärem Text möglich und
üblich ist.

Doch es gibt auch Nachteile! Zum einen lassen sich naturgemäß nur mono-
chrome Icons realisieren, denn digitale Schrien, egal welchen Formats, besit-
zen keinerlei Farbinformationen. Zum anderen gibt es auf älteren Systemen

39. yatil.net/a-better-way-to-use-icon-fonts
40. 24ways.org/2011/displaying-icons-with-fonts-and-data-attributes
#webtypobuch – 137

und Browsern Probleme: Internet Explorer 6 und 7 kennen die CSS-Eigenscha


:before noch nicht, und Windows XP hat ohne aktivierte Schriglättung
durchaus Probleme mit der Darstellungsqualität, da Iconfonts in aller Regel
nicht gehintet sind. Siehe auch Kapitel 2.

Ein dritter Nachteil darf nicht verschwiegen werden: Es ist nicht ganz unkom-
pliziert, wenn man es wirklich robust machen möchte! Denn woher bekomme
ich den perfekten Iconfont, der alle Zeichen enthält, die ich mir vorstelle? Wie
wandele ich diesen in verschiedene Formate um? Und muss ich erst ein dickes
Buch über CSS3 durcharbeiten, um mir eine funktionierende, barrierefreie und
abwärtskompatible Code-Vorlage zurechtzulegen?

Glücklicherweise sind Sie nicht der einzige Mensch mit diesen Problemen, und
daher es gibt zwei hervorragende Online-Services, die in Sachen Iconfonts
kaum Wünsche offen lassen: Fontello und IcoMoon. Die beide Dienste leisten in
weiten Teilen das Gleiche und haben auch kräig voneinander abgekupfert.
Sei’s drum: Wir können dank ihnen mehrere Fliegen mit einer Klappe schla-
gen. Die Dienste stellen zunächst einige populäre Open-Source-Iconfonts mit
allen ihren einzelnen Zeichen in einer umfangreichen Tabelle dar – insgesamt
mehrere hundert Motive! Daraus können Sie sich nun Ihre persönliche Kollek-
tion zusammenstellen und in eine Art Warenkorb legen. Beim Bestätigen des
Vorgangs wird darauin eine ZIP-Datei geschnürt, die alles enthält, was Sie zur
Einbindung der Schri benötigen – nicht weniger, aber auch nicht mehr. Denn
Fontello und IcoMoon liefern einen komplett individuellen Font in mehreren
Formaten aus, der ausschließlich die ausgewählten Einzelzeichen enthält, ganz
ohne Ballast. Dazu gesellt sich eine entsprechende CSS-Datei mit dem Basis-
Styling und allen benötigten Klassen-Zuweisungen, so dass der geneigte Web-
designer nur noch an den gewünschten Stellen im HTML die entsprechenden
#webtypobuch – 138

Klassen setzt; schon werden wunderbare, frei skalierbare Icons sichtbar, die
überraschend wenig Ressourcen auf Server und Client verbrauchen.

Übrigens: Bei IcoMoon können Sie sogar eigene Vektorformen per SVG oder
als Fontdatei hochladen, um sie – durchaus auch in Kombination mit dem vor-
handenen Repertoire – als individuellen Iconfont einzusetzen. Eine großartige
Sache!

Werkzeuge für Webtypografen

Typecast
Eine wichtige Anforderung in der Webtypografie ist das ständige Testen, Simu-
lieren und Feinschleifen von Headlines, Subheadlines, Teasern und Fließtexten,
sowie insbesondere das Zusammenspiel dieser redaktionellen Ebenen zuein-
ander. Dafür griff man bisher entweder zur Allzweckwaffe Photoshop oder
fummelte solange manuell mit diversen CSS-Eigenschaen herum, bis alles
perfekt war: Schrimischung, Schrigrade, individuelle Abstände und natür-
lich Farben.
#webtypobuch – 139

Typecast will dies alles komfortabler machen. Es handelt sich um eine Web-
Applikation im Browser, in der man sich die erwähnten Layout-Elemente
zusammenklicken und individuell stylen kann. Dabei helfen einem praktische
Eingabefelder und Schieberegler für diverse CSS-Eigenschaen. Aber es
werden vor allem auch über 5.000 Schrifamilien von Typekit, fonts.com und
FontDeck zum Ausprobieren und Vergleichen zur Verfügung gestellt. Am Ende
des Finetunings kann man sich fertiges CSS mit dazugehörigen Online-Style-
guides generieren lassen; denn Typecast tritt unter anderem an, um die Schnitt-
stelle zwischen Designer und Frontend-Entwickler zu verbessern. Direkt im
Browser stylen, pures CSS übergeben, stressfrei in die Live-Seite einbauen – das
ist die Philosophie.

Kurz vor Redaktionsschluss dieses Buches ging Typecast endlich öffentlich an


den Start und wurde quasi am selben Tag von Monotype/fonts.com aufgekau.
typecast.com

Typetester

Typetester ist so etwas wie der Vorläufer (und sicher auch Inspirationsquelle)
von Typecast, stammt aber noch aus der Pre-Webfont-Ära, nämlich dem Jahr
2005. Man kann jedoch sehr einfach und ohne Anmeldung drei unabhängige
Spalten mit Blindtext bespielen, dort allerhand typografische Parameter konfi-
#webtypobuch – 140

gurieren und die Wirkung live im Vergleich begutachten. Seit einigen Monaten
ist es möglich, neben den lokal installierten Schrien auch auf einen kleinen
Fundus von Freefont-Klassiker zurückzugreifen.

Es mag ein wenig reduziert und im Vergleich zu Typecast niedlich wirken, doch
Typetester ist ein wertvolles Hilfsmittel, um unkompliziert ein wenig mit typo-
grafischen Parametern zu spielen oder mal schnell die Tauglichkeit einer
bestimmten Schri in einer bestimmten Größe zu überprüfen. typetester.org

FontFonter
Eigentlich nur ein Werbegag, aber dann doch irgendwie ganz nützlich: der
FontFonter von FontShop. Dieses Tool lässt den experimentierfreudigen Web-
designer bestehende externe Websites mit alternativen Schrien (aus dem FF-
Repertoire) versehen – selbstverständlich auf non-destruktive Weise und nur
zum Testen. Technisch funktioniert das über eine serverseitige Spiegelung der
fremden Website, und dem Austausch der dort eingesetzten Schrien gegen die
ausgewählten Alternativen. Der FontFonter ist dabei alles andere als ausgerei:
Die Abstände gehen bisweilen kaputt, und JavaScript ist auf der zu testenden
Seite komplett lahmgelegt, aber insgesamt hat man durchaus seinen Spaß.
fontfonter.com

FontShop-Plugin
Die zweite FontShop-Entwicklung stellt alles andere als nur nette Zerstreuung
dar, sondern kann den Workflow von (Web-)Designern durchaus signifikant
verbessern. Statt wie Typecast den Gestaltungsprozess komplett auf den
Browser zu übertragen, installiert man sich das Plugin in eines der drei maß-
geblichen Creative-Suite-Produkte von Adobe (Photoshop, Illustrator oder
InDesign) und kann sich damit temporär das gesamte FontShop-Angebot in
sein Layout holen.

Das Plugin manifestiert sich in einer zusätzlichen Arbeitspalette und ist in der
Lage, in beliebigen Textkästen die lokale Schri gegen eine von vielen tausend
Alternativen auszutauschen, welche direkt von den FontShop-Servern ausge-
liefert werden. Freilich lässt sich damit kein komplettes, druckfähiges Layout
#webtypobuch – 141

gestalten, denn die Möglichkeiten, mit der externen Schri zu arbeiten sind
begrenzt. Doch für den Webdesign-Traditionalisten, der seine Entwürfe immer
noch gerne im Photoshop statt im Browser macht, ist es eine sehr sinnvolle
Ergänzung in der Layoutphase und in der Abstimmung mit dem Kunden.
www.fontshop.com/plugin

FontSquirrel @font-face Generator


Hand aufs Herz: Auch wenn es bei den meisten kommerziellen Schrien nicht
wirklich erlaubt ist, so ergibt sich dennoch ab und zu die pragmatische Not-
wendigkeit, eine Schri ganz schnell und stressfrei in einen Webfont umzuwan-
deln, um ihn lokal testweise einzusetzen. Für diese Notfälle, bei denen eine
umfassende Rechteklärung einfach zu lange dauern würde, gibt es den
@font-face Generator von FontSquirrel. Einfach einen beliebigen Raw Font
raufladen, einige Einstellungen vornehmen, und das fertige webfontfähige Kit
herunterladen, inkl. vorbereitetem CSS-Code.
www.fontsquirrel.com/fontface/generator

Bitte beachten Sie, dass diese selbstgebauten Pakete nichts in Produktivumge-


bungen auf öffentlichen Servern zu suchen haben – es sei denn, die Lizenz der
Schri erlaubt dies ausdrücklich!
#webtypobuch – 142

Eine Art Glossar


Ich selber habe Glossars in Büchern nie gelesen, weil ich der Überzeugung bin,
dass es Aufgabe des Autors ist, unbekannte Fachausdrücke im Kontext der
sonstigen Ausführungen implizit zu erläutern. Und für den besonders wissbe-
gierigen Leser sind die Definitionen in Wikipedia und Co. ohnehin ausführli-
cher und neutraler. Dieses Glossar ist anders, denn es beschränkt sich auf
Fachausdrücke und vermeintliche Wahrheiten, die selbst von Profis ständig
falsch oder irreführend verwendet werden. Es war immer schon meine erklärte
Mission, diese Unklarheiten und semantischen Fehler für meine Leser auszu-
räumen. Deshalb vergeuden wir keinen wertvollen Platz und starten sofort mit
dem ersten Begriff:

Auflösung (Resolution)
Wann haben Sie das letzte Mal einen Bildschirm mit einer Auflösung von
1.280 × 800 gesehen? Oder gar einen mit „Full-HD-Resolution“? Ich noch nie,
obwohl die Welt voll von diesen Geräten zu sein scheint! Die Auflösung ist mit
großer Sicherheit eines der am häufigsten falsch verwendeten Wörter in der
gesamten Computertechnik. Es wird so o falsch verwendet, dass sich seit eini-
ger Zeit sogar ein Ersatzwort etabliert, welches die ursprüngliche Bedeutung
von Auflösung – zumindest im digitalen Bereich – besser und klarer verdeut-
licht: die Pixeldichte.

Dabei ist es so schwer nicht: Die Auflösung wird in der Drucktechnik in DPI
(Dots Per Inch) angegeben und heißt dort omals auch Rasterweite. Sie bezeich-
net den Abstand zwischen den einzelnen Rasterpunkten beim Drucken von
Farbzwischenwerten. Wir kennen ja alle die regelmäßigen Farbmuster, welche
man sieht, wenn man mit dem Auge ganz nahe an ein gedrucktes Citylight-
Plakat herangeht. Auf dem Bildschirm hingegen wird die Auflösung meist in
PPI (Pixel Per Inch) angegeben; wenn jemand also von einem „130dpi-Bild-
schirm“ spricht, macht sie oder er einen Flüchtigkeitsfehler.

Die Bildschirmauflösung gibt an, wieviel Pixel in ein Zoll/Inch (= 2,54 cm)
hineinpassen, und zwar zunächst nur in einer Dimension, also horizontal oder
#webtypobuch – 143

vertikal. Da 99 Prozent der heute benutzten Bildschirme aber sowieso quadrati-


sche Pixel besitzen, ist die horizontale und vertikale Auflösung fast immer iden-
tisch. Wir sehen also: Die neumodische Pixeldichte tri es ganz gut und ist
durchaus zu befürworten, um Klarheit zu schaffen.

Doch es ist ja nicht so, dass „Auflösung“ im Gegenzug aussterben würde. Sie
wird nur meist für etwas Anderes und Falsches verwendet, nämlich die Anzahl
der Pixel eines Bildschirms in Breite und Höhe. Doch das ist falsch. Interessan-
terweise können nämlich verschiedene Bildschirme mit jeweils 1.024 × 768
Pixeln durchaus unterschiedliche Auflösungen besitzen! Es hängt davon ab,
welche physische Breite und Höhe das jeweilige Gerät besitzt. Beim iPad der
ersten Generation war der Screen 16,5 × 12,3 cm groß, stellte exakt 1.024 × 768
Pixel dar und hatte demnach eine Auflösung von 132 ppi. Der Bildschirm des
ersten iMac von 1997 hingegen war 30,5 × 22,9 cm groß und leistete bei eben-
falls 1.024 × 768 eine Auflösung von nur 85 ppi.

Eine einfache Rechnung: größerer Screen bei gleicher Pixelanzahl = niedrigere


Auflösung. Eine großartige Möglichkeit, mit diesen Zahl zu rechnen und
zu spielen, ist übrigens die Website mit der formschönen Adresse
members.ping.de/~sven/dpi.html

Als es noch Computermonitore mit Röhrentechnik gab, war es sogar noch ein
Stück weit komplizierter, und hier liegt wahrscheinlich auch die Quelle des
großen Missverständnisses. Diese Röhrenbildschirme hatten keine feste Auflö-
sung wie heutige LCDs; man konnte statt dessen aus verschiedenen Optionen
wählen, beispielsweise beim oben genannten iMac zwischen 67 ppi und 85 ppi.
Nur dass freilich kein Betriebssystem die sperrige ppi-Zahl tatsächlich
erwähnte, sondern selbstverständlich immer nur die zugehörige Pixelanzahl,
also in diesem Falle 800 × 600 oder 1.024 × 768. Der Nutzer konnte also die
Auflösung wählen, aber es standen nicht tatsächliche Auflösungswerte, sondern
vielmehr Pixelanzahlen als Option dabei. Kein Wunder, dass dies zu einer
Bedeutungsverschiebung geführt hat!

Und wenn wir einen Schritt weiter gehen, wird es noch deutlicher: Denken wir
uns als externen Monitor einen Projektor (neudeutsch: Beamer). Bei diesem
wird die Auflösung ja schon dadurch erhöht, dass man ihn näher an die Lein-
#webtypobuch – 144

wand schiebt! Das einzige, was wir per Soware präzise einstellen können –
sofern wir die tatsächliche Projektionsfläche des Bildes nicht genau wissen – ist
also die Pixelanzahl.

Dass wir für den Begriff Pixelanzahl hingegen ein ästhetischer klingendes Wort
brauchen, liegt auf der Hand. Ist aber auch ein anderes ema.

Schriftgröße
Aufmerksamen Lesern dieses Buches (und meines Weblogs praegnanz.de) wird
nicht entgangen sein, dass ich das Wort Schrigröße zu vermeiden versuche,
und statt dessen lieber von Schrigrad spreche. Wenn man es genau nimmt, ist
das nämlich nicht das gleiche: Zu Zeiten des Bleisatzes war es üblich, für ver-
schiedene Darstellungsgrößen einer Schri unterschiedliche Schrientwürfe
heranzuziehen. Die 8-Punkt-Garamond besaß also speziell für diese Größe
angepasste Formen und war nicht einfach eine herunterskalierte 12-Punkt-
Garamond. Man sprach von sogenannten Entwurfsgrößen. Als dann der Foto-
satz und später DTP auam, scherte man sich größtenteils nicht mehr um
solche Details, und die Schrigröße wurde zum einfachen Skalierungsfaktor
einer universellen Vektorform. Es gibt zwar einige rühmliche Ausnahmen, also
Schrien mit speziellen Formen für bestimmte Größen, doch die heige Mehr-
arbeit machen sich nur sehr wenige Schrientwerfer.

Erst in jüngster Zeit formiert sich eine Gegenbewegung, die sogar speziell auf
das Webdesign abzielt. Unter dem Stichwort Responsive Typografie kann es eine
mögliche Taktik sein, verschiedene Entwurfsgrößen eines Webfonts für unter-
schiedliche Schrigrade oder Auflösungen zu verwenden. Das ist die gleiche
uralte Idee aus dem Bleisatz, für das neue Medium aufgegriffen. Dennoch soll-
ten wir mit dem Begriff Schrigröße ein wenig aufpassen – er wird heutzutage
von kaum jemanden so verstanden, wie er ursprünglich gemeint war.
#webtypobuch – 145

Schrift
Ganz allgemein gesprochen ist Schri die visuell41 kodierte Darstellung von
Sprache. Als Schrien werden gleichzeitig aber auch Textdokumente bezeich-
net, beispielsweise die „gesammelten Schrien“ eines Autors. Im Design-Kon-
text wird das Wort jedoch vornehmlich als Synonym für Schriart verwendet –
ich selber tue das am laufenden Meter. Eigentlich eine etwas unscharfe semanti-
sche Praxis, aber so hat es sich eingebürgert.

Schriftart
Hier geht es um eine Ansammlung von einzelnen Glyphen (Buchstaben,
Zahlen und Sonderzeichen), die alle einer gewissen gestalterischen Systematik
oder Stilistik folgen. Es ist hierbei weder das exakte Repertoire der Glyphen
gemeint, noch die technische Umsetzung oder Darreichungsform, sondern
primär die rein visuelle Gestaltung der konkreten Formen.

Schriftschnitt, Schriftfamilie, Schriftsippe


Mit Schnitt bezeichnen wir den Teil einer Schriart, bei dem die Glyphen eine
einheitliche Fette, Dickte (schmal oder weit) und einen einheitlichen Stil
(kursiv, Kapitälchen usw.) besitzen. Alle Schrischnitte zusammen ergeben eine
Schrifamilie. Diese kann in extremen Fällen über hundert Einzelschnitte in
sich vereinen. Schrisippen hingegen werden gebildet, wenn mehrere Schri-
familien eine ähnliche Formgebung besitzen, sich aber von der Schri-Klassifi-
zierung unterscheiden. Meist geht es um die Serifen- und die serifenlose Vari-
ante eines Basis-Entwurfes. Bisweilen kommen noch angedeutete Serifen,
betonte Serifen oder eine Monospace-Variante hinzu. Eine der ersten umfang-
reichen Schrisippen ist die esis von Luc(as) de Groot, welche inzwischen
rund 500 Einzelschnitte umfasst.

41. Die Blindenschri Braille ist in erster Linie taktil und weniger visuell wahrnehmbar, gilt
aber natürlich auch als Schrisystem.
#webtypobuch – 146

Font
Dieses Wort hat – zumindest von der Aussprache – nichts mit Aktien-Fonds zu
tun, und ebenfalls nicht mit dem französischen Fond als Hintergrund oder in
der Kulinarik. Es wird tatsächlich sehr deutsch ausgesprochen, mit „hartem t“
am Ende. Font gilt aber als englisches Wort mit französischen Wurzeln (fonte =
der Guss). Gemeint ist die konkrete digitale Computerdatei, welche die Formen
einer Schriart beschreibt – meist in Vektoren, manchmal in Pixeln. Die unter-
schiedlichen Font-Formate wie OpenType, TrueType und PostScript sind dabei
ein ganz anderes ema.

Zeichensatz
Zeichensatz ist kein Synonym für Font, auch wenn sich dies durch eine falsche
Übersetzung in manchen Betriebssystemen anböte. Vielmehr handelt es sich
um die korrekte Übersetzung des englischen character set (kurz: charset).
Gemeint ist eine konkrete Zusammenstellung von unterschiedlichen einzelnen
Zeichen zu einem Verbund bzw. einer Sammlung. Die genaue visuelle Gestal-
tung der Zeichen ist dabei unerheblich. Wichtig ist nur das Mapping oder die
Kodierungstabelle, die darüber Auskun gibt, an welcher Stelle welches Zei-
chen zu finden ist. ISO-8859-1 (Western) oder UTF-8 (Unicode) sind dabei
gängige Zeichensatz-Kodierungen (character encodings).
#webtypobuch – 147

Danksagung
An erster Stelle in der Dankesliste stehen natürlich die 342 Supporter des
Crowdfunding-Projektes bei Startnext. Sie haben dieses Buch ganz konkret vor-
finanziert, so dass ich mich nicht mit lästigen Verlagen herumschlagen musste,
um zum Ziel zu kommen. Absolut großartig, Ihr Vertrauen bedeutet mir sehr
viel.

Doch woraus rekrutierten sich die vielen Unterstützer? Höchstwahrscheinlich


zu einem gigantischen Prozentsatz aus den treuen Lesern meines Weblogs auf
praegnanz.de – all die Leute, die seit acht Jahren meine Artikel verfolgt, kom-
mentiert und weiterverbreitet haben. Ohne dieses Weblog hätte ich nie den
Schritt in die Selbstständigkeit gewagt.

Nicht zu vergessen ist außerdem Prof. Ulysses Voelker von der Fachhochschule
Mainz, der vor 12 Jahren meine Begeisterung für die Typografie entfachte. Das
hat gesessen!

Ganz besonders wäre auch noch das Bücherregal von Julia zu nennen. Im ent-
scheidenen Schlüsselmoment haben mich die tausend bunten Buchrücken
letztlich dazu inspiriert, dieses Werk zu verfassen, obwohl ich mich jahrelang
immer wieder geziert hatte, ein Buch zu verfassen. Der Bann ist durchbrochen
worden, weil ich mich in diesem Regal sehen wollte, neben all den anderen
großartigen Designern.

Ob dieser Vergleich legitim oder absurd ist, dürfen Sie nun für sich entschei-
den. Falls Ihnen das #webtypobuch gefallen hat, verbreiten Sie die frohe Kunde
im ganzen Land – idealerweise mit einem Link auf die offizielle Domain
webtypobuch.de, wo es das gesamte Werk in verschiedenen Darreichungsfor-
men zum Kaufen, Bestellen oder einfach zum Lesen gibt.

/Gerrit van Aaken am 10. November 2012

Das könnte Ihnen auch gefallen