Webtypobuch
Webtypobuch
Webtypobuch
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
webtypobuch.de
#webtypobuch
Edition 2012
Edition 2012
1. PDF-Fassung, Dezember 2012
fontshop.com
www.schreibergrimm.de typotalks.com/day
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
Schriwahl in Zeiten hoher Pixeldichte
Vom Vektor zum Pixel: Rasterizer
Schridarstellung in Extremsituationen
Kapitel 1:
Einführung
#webtypobuch – 8
Typografie ist die Kunst bzw. Lehre der grafischen Gestaltung, die in irgendeiner
Form mit Schrizeichen zusammenhängt.
Da wäre zum einen der Schrientwurf, also das Erschaffen einer Schriart mit
ihren einzelnen Buchstabenformen. Dies wird bisweilen auch als Königsdiszi-
plin des Grafikdesigns angesehen; jeder erfolgreiche Schrientwerfer 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 Schrien geht, die
später als gut lesbare Brotschrien1 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. Brotschrien sind solche Schrien, 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 omals
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.
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.
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 wissenschaliche 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
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
Schrifarbe 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
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
dure 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.
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
Minischrien 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
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
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
Auauzeit, 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
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 Schrien 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
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 Schrien auf Betriebssystem-Ebene gewohnt
waren, wirkten gerade die Pixelschrien 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 Pixelschrien 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.
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, Schrien 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 Soware- 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.
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
Auraggeber 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 omals 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
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 Schrien – seltsam blut-
leer und spannungsarm. Gerade die vereinfachten Formen, welche die websi-
cheren Schrien 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 auauen, 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 Schrien in starker Vergröße-
rung auch wirklich gut aussehen!
Aus Gründen existieren heute die allermeisten Schriarten 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.
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 Sowaremodul 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
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 Schribilds 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 Schrigrad
optimiert oder verwendet diverse Tricks. Dazu gleich mehr.
der Schri einen höheren Schrigrad 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 Soware-Hersteller suchten um die Jahrhundertwende fieberha nach
Methoden, um die Schridarstellung 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 Schriglättung zunutze machen. Aus
der Distanz erkennt man die Einfärbung kaum, und die Schri wirkt insgesamt
schärfer und besser lesbar.
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 egal welche Version von ClearType gerade aktiv ist: Die Windows-Ent-
wickler haben sich dem Paradigma der möglichst scharfen Schridarstellung
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
Hinting lässt sich auf Seiten des Schrientwerfers 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 Schrien sind wahrscheinlich die Core Fonts von
Microso (siehe Kapitel zur Schriwahl). Noch bis heute lassen es sich einige
verrückte Schrientwerfer 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 Schrien heute auch durchaus automatisch hinten.
Die dazu benötigte Soware ttfautohint8 wird nach einer erfolgreichen Crowd-
funding-Aktion im letzten Jahr stetig weiterentwickelt. Andererseits steigt der
durchschnittliche Schrigrad 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 Schrigrade 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 Schrien 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.
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 Schribild
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 Systemschrien 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 Schrigraden meist außerordentlich dünn und filigran. Zudem stim-
men die Proportionen der Buchstaben o nicht so recht, und das gesamte
Schribild 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 Schrischnitte 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 Schrien mit entsprechend fein abgestuen Fetten, doch von denen
gibt es glücklicherweise immer mehr.
#webtypobuch – 35
Schriftdarstellung in Extremsituationen
Dass Schriglättung nicht gleich Schriglä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 Schrisatz, 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 Schriglättung
negativ beeinflussen oder eine optimale Schridarstellung auf andere Weise
korrumpieren. Hier einige Beispiele dafür, wo man grundsätzlich vorsichtig
sein sollte:
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 Schridarstellung der angeschrägten Textzeilen, welche in
Abhängigkeit von Betriebssystem und Browser zwischen akzeptabel und grau-
sam schwankt.
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
Katastrophal hingegen ist die Schridarstellung 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, worauin wieder zu einer merklich fetteren Darstellungs-
methode gegriffen wird als während 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 Schridarstellung 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 Schridarstellungsmodus zu triggern, der visuell magerere
Schrien erzeugt.
Kapitel 3:
Typografisches
Handwerkszeug
#webtypobuch – 40
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
Schriart, 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.
■ 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:
< (lower than = kleiner als)
■ Unicode: Hier darf man die Raute # nicht vergessen, welche vor dem
eigentlichen Zahlencode gesetzt wird. Das „ß“ wird hier so erzeugt: <
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.seltml.org/html/referenz/zeichen.htm
#webtypobuch – 42
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
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
„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
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.
■ bei Silbentrennungen.
■ als bis-Strich ohne Leerzeichen: 7–8 Uhr abends, 2–3 Runden über den
Sportplatz, Ludwig van Beethoven (1770–1827).
Das Minuszeichen −
sieht in den meisten Schrien genauso aus wie der Gedankenstrich, besitzt aber
eine andere Semantik und wird auch als eigenes Unicode-Zeichen geführt
(siehe Tabelle weiter unten).
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.
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 ­
(so hyphen) zu verwenden. Ansonsten ist dieses reine Steuerzeichen im Quell-
text nämlich unsichtbar. Ein kleines Beispiel sei erlaubt:
Donau­dampf­schiffahrts­gesell­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.
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
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 Schrien 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 Schrien sogar Serifen, ganz im Gegen-
satz zum rein geometrisch geformten Mal-Zeichen.
#webtypobuch – 49
■ Schriarten mit Serifen sind für lange Texte besser geeignet als Grotesk-
Schrien. 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.
Wie man es dreht und wendet: Um sorgfältige Praxistests oder einen reichen
Erfahrungsschatz kommt man bei der Wahl der Schriart 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 Überschrien (ab 30px aufwärts) omals 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
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?
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,
Überschrienabstand, Buchstabenabstand, Wortabstand …
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
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.
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 Schriart spielt eine Rolle.
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
Wie identifiziert man eine geringe x-Höhe? Nun, man sieht sich eine Schri
einfach an und betrachtet die Unterschiede zu anderen Schrien. Ein kleiner
Anhaltspunkt: Grundsätzlich sind es meist die etwas historisch angehauchten
Serifenschrien wie Garamond oder Palatino, welche geringe x-Höhen be-
sitzen. Schrien 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.
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 gestiet 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
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 Layoutsoware. 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
Schrigrad 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.
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.
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-zukunigen-moglichkeiten
#webtypobuch – 62
Nur ganz kurz abhandeln möchte ich zentrierten Text. Mit der Ausnahme von
Überschrien 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.
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
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 Sowareent-
wickler für E-Book-Reader, bekommen bisweilen keinen ordentlichen Block-
satz auf die Reihe:
#webtypobuch – 64
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-
schrien 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
16. Im Schrientwurf 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
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 Schriwahl 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 Schrien,
welche zwischen 1993 und 2009 de facto die einzigen waren, die man ruhigen
Gewissens bei der Gestaltung von Websites einplanen konnte: die Websicheren
Schrien (Web Safe Fonts).
■ 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.
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 Schrien 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 Schrientwerfer
Matthew Carter, einige Schrien 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.
18. de.wikipedia.org/wiki/Core_fonts_for_the_Web
#webtypobuch – 70
Den meisten dieser Schrien gemein ist jedoch ihre wirklich aufwendige tech-
nische Optimierung für niedrige Schrigrade. 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 Schrien ü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 modulhaer Gestaltungsansatz mit konsequentem
Recycling von Buchstabenbestandteilen, um die Komplexität zu verringern
und so die Robustheit zu erhöhen.
Ich muss Sie enttäuschen: Das ist keine brandneue Idee. Susanna Licko hat
bereits 1995 mit Base 9 und Base 12 zwei genau solche Schrien herausgebracht,
die auf Basis eines 9er- bzw. 12er-Rasters enstanden sind.
Die Base-Schrien 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 Schrien. Vor-
hang auf!
#webtypobuch – 72
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 omals 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.
19. Die Garamond-Schrien stammen aus dem 16. Jahrhundert und wurden für den
modernen Bleisatz, den Fotosatz und den Digitalsatz am laufenden Meter von
verschiedenen Schrihäusern neu interpretiert.
#webtypobuch – 73
Die Arial existiert – wie jede der Core Fonts – in vier Schristilen: normal, fett,
kursiv und kursiv-fett. Eine Besonderheit ist jedoch der separate Schrischnitt
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 Überschrien!
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 Schrien mit eher glatter und stromlinienförmiger Anmu-
tung, so dass die Times wohl langsam zu den historischen Schrien 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 wissenschalichen 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. Serifenschrien im
Grobpixelraster sind nun einmal grundsätzlich eine problematische Angelegen-
heit, da konnte die gut auereitete 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
Aber mal ganz langsam! Lange Jahre galt die Verdana als die leserlichste Bild-
schirmschri für kleine Schrigrade 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 omals einen Pixel größer ausfiel als
die der Arial und der meisten anderen Schrien:
Von daher: Ja, sie war bei gleichem Schrigrad besser lesbar. Aber nein: Das
war keine Zauberei.
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 Schrien 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.
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 Schrigra-
den sind die Möglichkeiten für individuellere Serifenschrien explodiert! Es ist
zu erwarten, dass wir in Zukun immer weniger Georgia sehen werden –
zumindest in den Überschrien. 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
Soware-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 Schrien
(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
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 auretenden Schrien, 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.
22. www.blambot.com/font_webletterer.shtml
#webtypobuch – 80
Courier (New)
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-Schrien) für die geschäliche Brieorres-
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 Schrigraden betrüge die
23. An dieser Stelle verneige ich mich vor dem prägenden Schrientwerfer 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üre!
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 Schrien jedoch nur noch selten benötigt, zumin-
dest für das Gros der Anwendungsfälle.
rer findet heute irgendwo zwischen Consolas, Menlo, Droid, Source Code Pro,
Monaco und weitaus exotischeren Schrien statt.
Und auch für den Webbereich rate ich eher dazu, eine lange font-‐family-Liste
von alternativen Monospace-Schrien 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 Schrien harmonieren. Vielleicht braucht sie
einfach noch zehn oder fünfzehn Jahre, bis sie als ironische Kultschri wieder
auf den Screens unserer zukünigen Webzugangsgeräte auaucht.
Anders als die meisten anderen Bildschirmschrien ist die Lucida Sans Teil
einer riesigen Schrisippe, innerhalb derer sich alle möglichen Stilistiken tum-
meln, so dass man vom Namen Lucida alleine überhaupt nicht darauf schließen
kann, welcher Schrityp 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 Schrien 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 Schriglä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 Schrien 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
Schrigrade), 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
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 Schrien!
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 Schrien 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 Schridarstellung 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: Schrien 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 Soware 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.
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-
Schrien, die in diesem Zusammenhang auch als Raw Fonts bezeichnet
wurden, um sie von den durch den Fleischwolf gedrehten Embedded-Open-
Type-Schrien abzugrenzen.
Doch was passierte nun? Einmal abgesehen davon, dass innerhalb weniger
Jahre die webtypografische Welt weitestgehend umgekrempelt wurde?
Erstaunlich flott jedoch, nämlich innerhalb von gut zwei Jahren, einigten sich
Schrischmieden, Schriverkäufer und Browserhersteller soweit, dass im jetzi-
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.
■ 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-Soware relativ leicht EOT-Schrien 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.
Generell jedoch arbeiten alle großen und kleinen Schrihäuser derzeit mit
Hochdruck daran, interessante legale Angebote zu etablieren, um einen Groß-
teil ihres Schrikatalogs 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.
Eines lässt sich vorweg korrigieren: Entgegen anders lautender Gerüchte kau
man in aller Regel keine Schrien; 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 Schrien, oder handelt es sich um
kostenlose Exemplare?
■ Bezahle ich für eine einzelne Schri(familie) oder kann ich eine ganze
Sammlung oder einen Katalog von Schrien 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 Schrianbieters gehostet?
Insbesondere die Frage nach den exakten Lizenzbedingungen und Preisen stellt
seit einigen Jahren etablierte Schrianbieter 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 Schrischnitts 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-Schrifamilie dutzende aufwendige Kunden-
kataloge gesetzt und musste dafür den gleichen dreistelligen Geldbetrag zahlen
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 Schrien war und ist zwar ein gewisses Problem,
aber anders als die Musik- oder Filmindustrie geht man in der Schriindustrie
klüger mit seinen potenziellen Kunden um und macht – insgesamt – sehr
attraktive Angebote zu bezahlbaren Preisen.
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 Schrientwerfers 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 Schrien
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 Schrien 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 Schriauslieferung oder schlicht eine Verlangsamung des
#webtypobuch – 92
Seitenauaus sind nicht zu erwarten. Und wenn, dann ist sowieso die gesamte
Website betroffen.
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üre die jahrzehntelange
Etablierung des Vorgangs „Schrilizenzkauf “ eine Rolle spielen, vor allem in
größeren Design- und Werbeagenturen und deren Auraggebern. Es gibt hier
omals keinen betriebswirtschalichen Prozess für das Abschließen eines
„Schriabonnements“. Und auch unabhängig von den zu zahlenden Summen:
Eine dauerhae 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 Schrienvielfalt zur Verfügung. Statt also immer
wieder die gleichen Schrien 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.
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 Schrien zu werden.
MyFonts
Ganze 15.000 webfontfähige Familien bietet der populäre Anbieter MyFonts
(der mit dem genialen Logoschrizug) 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 Schrien 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 auereitet.
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 Schriindustrie agierte, gab es bei keinem der
teilnehmenden Firmen irgendwelche Berührungsängste oder Vorbehalte.
Typekit kooperierte daher schon früh mit allen möglichen Schrihä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 Schrien 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 Schriwahl. Viele Sachverhalte sind darin noch
wesentlich ausführlicher dargestellt als es im Rahmen dieses Buches möglich
ist.
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 Schrien 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 Schrifamilien 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 auritt, und
ich als externer Berater im Prozess der Preisgestaltung ein wenig involviert war.
#webtypobuch – 96
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 Schrien, 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
Schrien 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 Schrirecher-
che glücklicherweise die „hand tuned“ Schrien 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.
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.
WebInk
Ungewohnt locker und startuppig kommt ein alter Bekannter des Schribusi-
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 Schrien 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 Schrihändler Fontspring wurde 2010 gestartet und
behandelt Print- und Webfonts erfrischenderweise als gleichberechtigte Pro-
duktvarianten. Alle gelisteten Schrien 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 Schrihäusern. Hervorstechend wieder einmal:
exljbris und Mark Simonson, die aber bekanntlich auf allen erdenklichen
Hochzeiten tanzen.
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
Typotheque
Natürlich bieten auch manche selbstständige Schrientwerfer 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 Schrientwerfer, gestaltete unter anderem
die Fedra- und Greta-Großfamilien. Als Webfonts im Jahr 2009 greiar
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 Schrifamilie, 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
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 Schrifamilien 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 Schrien 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 Schrientwerfer, 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 Schrien 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 Schrien akuter Plagiatsverdacht, weswegen ein
nicht unerheblicher Teil der Schriindustrie 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 Schrien 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.
FontSquirrel
Eine letzte potenzielle Zielgruppe fehlt noch, und das sind diejenigen Web-
designer, die ihre Schrien 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 Schrifamilien
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.
Dutzende von Büchern und hunderte von Fachartikeln beschäigen sich mit
der Frage nach einer sinnvollen, passenden, provokativen oder aufregenden
Schriwahl für das nächste Kundenprojekt. Und die ganz Mutigen belassen es
nicht bei einer einzelnen Schri, sondern wagen sich an eine Schrimischung
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:
■ 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?
Ich will nicht behaupten, dass man mit der Wahl einer Schriart 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 Schriwahl kann ihre
Berechtigung haben; nur so entstehen typografische Trends. Man denke bei-
spielsweise an fette gebrochene Schrien, 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.
Abgesehen davon möchte ich im Folgenden eine kleine Liste von Schriarten
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 Schrientwerfer der letzten zehn
Jahre, der sich und sein kleines Unternehmen exljbris mit extrem geschickter
Platzierung von kostenlosen Schrischnitten 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 Schrigra-
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 Überschrien
ins Layout. Nicht umsonst hat sich die praegnanz.de GbR im Frühjahr ent-
schieden, die Adelle für Logoschrizug und Headlines einzusetzen. Wir
werden nicht die Einzigen bleiben!
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
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 Schrien, zum Teil von namhaen 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-Schriglä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-Schrien 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-Schriglä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
■ Lineares Lesen
■ Informierendes Lesen
■ Differenzierende Typografie
■ Konsultierendes Lesen
■ Selektierendes Lesen
■ 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
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 kravoller 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-Schrigrad von 16px vorsah.
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 Schribild. 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 Überschrien 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.
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:
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üre
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 Schrischnitt 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 Schrifarbe 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.
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
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 Schriwahl
(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 Schrigraden, Farben und Auszeichnun-
gen angeht. Der virtuose Umgang mit schmalen Versalien in der FF DIN
#webtypobuch – 121
Condensed, die Adelle in Schrigraden 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 Schrimi-
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 Lauext 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 Schrimischung 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 Schrigrade 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
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 Schriwahl
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
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 Schrizug 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
Apple vertraut in Navigation und Fließtext nach wie vor auf die Lucida, und
zwar in Schrigraden 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üre. Im Jahr 2012 ein fast schon kurioser
Spleen.
#webtypobuch – 127
Ein gutes Beispiel dafür, dass man bei der Schriwahl 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
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 Schriwahl, 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 Auraggeber
würde jemals eine derartige Website oder Webapplikation beauragen oder be-
zahlen.
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
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:
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:
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 Seitenauau 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 Schrien, 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
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 darauin 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!
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-Eigenschaen herum, bis alles
perfekt war: Schrimischung, Schrigrade, 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-Eigenschaen. Aber es
werden vor allem auch über 5.000 Schrifamilien 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.
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 Schrien 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 Schrien (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 Schrien 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
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 omals 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
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.
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 Soware 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 Schrigröße zu vermeiden versuche,
und statt dessen lieber von Schrigrad 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 Schrientwü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 auam, scherte man sich größtenteils nicht mehr um
solche Details, und die Schrigröße wurde zum einfachen Skalierungsfaktor
einer universellen Vektorform. Es gibt zwar einige rühmliche Ausnahmen, also
Schrien mit speziellen Formen für bestimmte Größen, doch die heige Mehr-
arbeit machen sich nur sehr wenige Schrientwerfer.
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 Schrigrade 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 Schrigröß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 Schrien werden gleichzeitig aber auch Textdokumente bezeich-
net, beispielsweise die „gesammelten Schrien“ eines Autors. Im Design-Kon-
text wird das Wort jedoch vornehmlich als Synonym für Schriart 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.
41. Die Blindenschri Braille ist in erster Linie taktil und weniger visuell wahrnehmbar, gilt
aber natürlich auch als Schrisystem.
#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 Schriart 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.
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.