Jason Santa Maria ist Grafikdesigner und Typograf. Er ist einer der Gründer von A Book Apart, Gründer des Online-Lexikons Typedia sowie Creative Director von A List Apart und Typekit. Mit seiner Designagentur Mighty hat er zahlreiche Websites gestaltet. Dabei kommt es ihm vor allem auf die Ausgewogenheit von Schönheit und Usability an, wobei die Typografie eine wichtige Rolle spielt.
Zu diesem Buch – sowie zu vielen weiteren dpunkt.büchern – können Sie auch das entsprechende E-Book im PDF-Format herunterladen. Werden Sie dazu einfach Mitglied bei dpunkt.plus+: www.dpunkt.de/plus |
Lektorat: Barbara Lauer
Übersetzung: Torsten Winkler
Copy-Editing: Alexander Reischert, Redaktion ALUAN
Herstellung: Nadine Thiele
Umschlaggestaltung: Helmut Kraus, www.exclam.de
Druck und Bindung: PHOENIX PRINT
Bibliografische Information der Deutschen Nationalbibliothek
Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen
Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über
http://dnb.d-nb.de abrufbar.
ISBN:
Print 978-3-86490-276-5
PDF 978-3-86491-811-7
ePub 978-3-86491-812-4
mobi 978-3-86491-813-1
1. Auflage 2016
Copyright © 2016 dpunkt.verlag GmbH
Wieblinger Weg 17
69123 Heidelberg
© 2014 by Jason Santa Maria
On Web Typography
A BOOK APART
ISBN 978-1937557072
Die vorliegende Publikation ist urheberrechtlich geschützt. Alle Rechte vorbehalten.
Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne die schriftliche Zustimmung des Verlags urheberrechtswidrig und daher strafbar.
Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder die Verwendung in elektronischen Systemen.
Es wird darauf hingewiesen, dass die im Buch verwendeten Soft- und Hardware-Bezeichnungen sowie Markennamen und Produktbezeichnungen der jeweiligen Firmen im Allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutz unterliegen.
Alle Angaben und Programme in diesem Buch wurden mit größter Sorgfalt kontrolliert. Weder Autor noch Verlag können jedoch für Schäden haftbar gemacht werden, die im Zusammenhang mit der Verwendung dieses Buches stehen.
5 4 3 2 1 0
NOCH BEVOR SIE ein einziges Wort auf einer Webseite lesen, beurteilen Sie die Typografie. Mehr als jedes andere Designelement vermittelt Schrift augenblicklich eine Botschaft über Seiteninhalt und -zweck. Wurde diese digitale Umgebung zum Lesen, Einkaufen oder Spielen gestaltet? Ist sie für längere oder flüchtige Besuche gedacht? Besteht ihre Hauptaufgabe darin, Sie durch einen Prozess zu führen (Service abonnieren oder Fragebogen ausfüllen) oder Sie in den Inhalt eintauchen zu lassen (Artikel lesen, Video ansehen oder Stock-Foto auswählen)? Typografie – ihre Größe, ihr Stil und System – vermittelt den Lesern, wofür dieser Inhalt überhaupt da ist.
Die Qualität und der Charakter der Typografie einer Webseite sagen auch etwas über die Macher der Seite aus. Gute Schrift lässt Sie gut aussehen, schlechte Schrift schlecht. Gute Schrift weckt Zuversicht und Vertrauen, schlechte Schrift Ablehnung und Abscheu. Jeder von uns ist schon mal auf einer Webseite gelandet, die ganz offensichtlich nur eine Müllhalde von gestohlenen Inhalten und furchtbarer Werbung ist. Bevor wir die Lockangebote für Pickelcreme oder die neueste Heimarbeitstätigkeiten überhaupt lesen, klicken wir schon auf den Zurück-Button und suchen nach einer angenehmeren Seite.
Jason Santa Marias leicht zugänglicher Leitfaden zur Webtypografie beschreibt den Denkprozess hinter der Arbeit mit Schrift, von der Schriftwahl über den Aufbau von Hierarchien bis hin zum Einsatz von Rastern. Statt seinen Lesern eine Liste von Regeln und Verboten vorzusetzen, nimmt er sie auf eine kreative Reise mit. Er lädt uns ein, über das eigene derzeitige Leseerlebnis nachzudenken – also während wir dieses Buch lesen –, indem er klare und anschauliche Beispiele liefert. Wir Leser dürfen uns eine eigene Meinung zu unterschiedlichen Stilen, Kombinationen und Anwendungen von Schrift in realistischen Textbeispielen bilden.
Webdesign sollte immer die Bedürfnisse der Nutzer berücksichtigen. Dieses Buch berücksichtigt Ihre Bedürfnisse als Leser dieser Seiten. Ob Sie Entwickler oder Designer, Studierender oder Profi, Webveteran oder heimlicher Bibliophiler sind – in diesem klugen und sympathischen Buch finden Sie Inspiration und Anleitung von einem der anerkanntesten typografischen Köpfe im Web.
Ellen Lupton
Einleitung
Was bringt Ihnen dieses Buch?
KAPITEL 1
Wie wir lesen
KAPITEL 2
Wie Schrift funktioniert
KAPITEL 3
Schriften bewerten
KAPITEL 4
Schriften auswählen und kombinieren
KAPITEL 5
Typografische Systeme
KAPITEL 6
Komposition
Schlussbemerkung
Hilfsmittel
Danksagung
Linkliste
Index
IM DOKUMENTARFILM Powers of Ten (dt. Hoch Zehn aus dem Jahre 1977, dpunkt.de/webtypo/1) untersuchten die Designer Charles und Ray Eames, was die Struktur unserer Welt ausmacht – von den kleinsten Teilchen bis hin zu den allergrößten Materieansammlungen. Der Film beginnt bei einem Pärchen auf einer 1 m2 großen Picknickdecke (Abb. 1). Von da an zoomt er alle 10 Sekunden um eine Zehnerpotenz heraus, bis zu 1024 m – 100 Millionen Lichtjahre von der Erde entfernt. Dann geht es zurück zum Picknick und wir dringen alle 10 Sekunden um eine Zehnerpotenz tiefer in die Materie ein, bis zu 10-16 m – der Ebene der Quarks. Der Film zeigt, wie große Dinge aus kleinen aufgebaut und wie die Beziehungen der kleinen wesentlich für den Aufbau größerer sind – auch wenn wir nicht alle zur gleichen Zeit wahrnehmen können.
Als ich den Film zum ersten Mal sah, hatte ich eine Offenbarung. Darin werden Dinge in Worte und Bilder gefasst, die ich selbst nie ausdrücken konnte. Die Art, wie alles – implizit oder explizit – miteinander verbunden ist, entspricht meiner Herangehensweise an Typografie.
Oft zoome ich bei der Arbeit zwischen dem Gesamtüberblick und den Einzelheiten hin und her, um Botschaft und Anmutung des Designs in Einklang zu bringen. Schrift ist die kleinste Einheit im Design – das Gerüst für alles, was wir mit unseren Kästen, Rastern, CSS-Eigenschaften und anderen Elementen für Webseiten kommunizieren wollen.
Egal ob Sie vom Kleinen zum Großen oder vom Großen zum Kleinen gehen, die Elemente sind miteinander verwoben. Die Breite einer Spalte beeinflusst die Zeilenlänge eines Absatzes. Der Kontrast einer Schrift beeinflusst, wie klein Sie die Schrift setzen können, um sie auch noch auf dem Smartphone lesen zu können. Die Werkzeuge, die wir einsetzen, und die Entscheidungen, die wir treffen, beeinflussen das Design auf allen Ebenen.
Diese wechselseitige Beziehung hält ein Design zusammen – das Design als Äquivalent der Schwerkraft. Zugegeben, das trifft es vielleicht nicht ganz, aber Typografie ist die Kunst, Sprache durch Schrift eine visuelle Form zu geben. Typografie ist die Stimme des Designs.
Abb. 1.1 Der kurze Dokumentarfilm „Powers of Ten“ von Charles und Ray Eames, 1977
Diese Idee prägt meine Art zu arbeiten und lässt mich entspannt und pragmatisch an Typografie herangehen. Ich meine nicht, dass ich zufällig Buchstaben auf die Seite werfe, doch ich glaube, dass ein Gefühl für Typografie einer enzyklopädischen Kenntnis seiner Geschichte überlegen ist.
Einverstanden? Gut!
Machen Sie sich bereit, denn ich will Ihnen zeigen, wie Sie hinter die hübschen Buchstaben schauen können. Wie Sie eine Schrift rundherum erfassen und erkennen, wie sie spricht.
Ich will Ihnen zeigen, wie Sie die Fülle erhältlicher Schriften kennenlernen, zweckorientiert beurteilen und wie Ihre Entscheidungen die Art beeinflusst, wie wir lesen und das Design interpretieren.
Ich will Ihnen zeigen, wie Sie Ihre typografische Gestaltung sofort verbessern können. Auch wenn Typografie eine jahrhundertealte visuelle Sprache ist, müssen wir neu sehen lernen, wo sie funktioniert und wo wir etwas verbessern müssen, falls sie beim interaktiven Screendesign versagt, wo also klassische Designmethoden und wo neue Wege angebracht sind.
Ich will Ihnen zeigen, dass – auch wenn dieses Zeug nicht so einfach in Ihren Kopf zu bekommen ist –, sich die Mühe durchaus lohnt. Typografie zu beherrschen, macht Sie zu einem besseren Denker, Kommunikator und Designer. Indem Sie in die Welt der feinen Textdetails eintauchen, werden Sie sich dieser Details und ihrer Bedeutung für die Kommunikation nicht nur selbst bewusst, sondern versetzen sich auch in Ihre Leser.
Typografie ist ein Handwerk, bei dem sich stetige Übung auszahlt. Dieses Buch wird Ihnen helfen zu verstehen, wie die Sprache der Typografie im Netz angewendet werden kann und wie Sie Schriften wählen, die Ihr Design unterstützen.
Und auch wenn es in diesem Buch um Webtypografie geht, so gibt es viele Überschneidungen mit allgemeinen typografischen Herangehensweisen, die für jedes Medium funktionieren. Wir können bewährte Praktiken aus jener Vergangenheit herleiten, als uns Schrift noch nicht von gläsernen Oberflächen entgegenleuchtete, und notwendige Abwandlungen für den Bildschirm finden.
Geben Sie nicht direkt auf und nehmen einfach Helvetica (oder, schlimmer noch, Arial). Sie können das besser und ich werde Ihnen zeigen, wie.
Was folgt, ist meine Sicht auf Typografie. Sie ist nicht jedermanns Ansicht und einige mögen meiner Herangehensweise widersprechen, aber sie repräsentiert so ziemlich alles, was ich über Design mit Schrift gelernt habe. Einige Punkte mögen selbstverständlich und deshalb keiner expliziten Erwähnung wert erscheinen. Einige Konzepte können für sich allein geringfügig sein, summieren sich jedoch. Typografie ist die Anwendung kleiner Verbesserungen, die im Zusammenklang ein großes Ganzes ergeben, das dann mehr ist als seine Teile.
Nehmen Sie sich diese Dinge zu Herzen und Sie werden besser mit Schrift umgehen.
WAS MACHEN SIE GERADE? Ich möchte, dass Sie einmal genau darüber nachdenken. Während Ihre Augen über diese Zeilen fliegen und Informationen an Ihr Gehirn weiterleiten, nehmen Sie an einem Gespräch mit mir teil. Ein Gespräch, das durch die Schrift, die Sie lesen, vermittelt wird. Doch Sie filtern es auch durch Ihre Erfahrungen und frühere Gespräche und bringen die Worte in einen Zusammenhang. Und ob Sie dieses Buch gedruckt, auf einem Mobilgerät oder am Computer lesen, Ihre Umgebung beeinflusst Ihr Leseerlebnis. Ein anderer Leser wird trotz gleichem Leseprozess zu einer anderen Interpretation des Gelesenen kommen.
Das ist das Faszinierendste an Typografie: Sie löst eine Kettenreaktion von Zeit und Ort mit dem Leser als Katalysator aus. Die Intention eines Textes zeigt sich in seiner Präsentation, doch seine Bedeutung erhält er erst durch Sie beim Lesen.
Schrift und Typografie würden ohne unser Bedürfnis, Informationen auszudrücken und festzuhalten, nicht existieren. Natürlich haben wir dafür auch andere Möglichkeiten wie Sprechen oder Bilder, aber Schrift ist effizient, flexibel, transportabel und übersetzbar. Dadurch ist Typografie nicht nur eine Kunst der Kommunikation, sondern auch der Nuancen und zugleich ein Handwerk, denn ihre Wirkung kann – wie bei jeder Kommunikation – irgendwo zwischen Erfolg und Misserfolg liegen.
Lesen ist wunderbar komplex, doch wenn wir es erst einmal beherrschen, scheinbar simpel. Wir denken dann kaum noch darüber nach. Aber weil Lesen so elementar für alles ist, was mit Typografie zusammenhängt, ist es am besten, damit anzufangen. Wir haben alle schon einmal etwas für jemanden geschrieben – aber haben Sie dabei jemals an die Leseerfahrung dieser Person gedacht?
So wie Sie mein Publikum für dieses Buch sind, möchte ich, dass Sie sich Ihr Publikum ansehen: Ihre Leser. Eine Aufgabe von Design ist, die Leser anzulocken und zu verzücken. Wir müssen sie einladen und überzeugen, uns „zuzuhören“. Aber was beeinflusst das Lesen?
Nur weil etwas leserlich ist, heißt es noch nicht, dass es auch lesbar ist. Leserlich bedeutet, dass Text gelesen werden kann, doch genauso kann man sagen, dass Baumrinde essbar ist. Wir wollen mehr. Bei der Lesbarkeit verbindet sich die emotionale Wirkung der Textgestaltung mit der vermutlichen Anstrengung, den Text zu lesen. Sie kennen das Kürzel TL;DR – „too long, didn’t read“ (dt. „zu lang, nicht gelesen“)? Doch nicht nur Länge erschwert das Lesen, auch schlechte Typografie. Frei nach Stephen Coles stellt sich beim Kriterium Lesbarkeit nämlich nicht nur die Frage „Kannst du es lesen?“, sondern auch „Willst du es lesen?“ (dpunkt.de/webtypo/2).
Jede Entscheidung, die Sie treffen, kann den Leseprozess behindern und dazu führen, dass sich Ihre Leser ausklinken und doch lieber auf Facebook vorbeischauen. Lassen Sie nicht zu, dass die Gestaltung Ihre Leser abschreckt oder bei dem behindert, was sie tun wollen – lesen.
Wie können wir unsere Leser aber bei der Stange halten und ihnen helfen, unseren Text zu verstehen? Schauen wir uns dazu kurz an, wie Lesen funktioniert und welchen Einfluss die Gestaltung darauf hat.
Als ich anfing, Webseiten zu gestalten, nahm ich an, dass jeder meine Arbeiten so lesen würde wie ich. Ich steckte viel Mühe in das richtige Layout und die Textgestaltung und betrachtete mein Werk als das Ergebnis meiner typografischen Entscheidungen: die liebevoll gesetzten Überschriften, der großzügige Weißraum, der typografische Rhythmus (Abb. 1.1). Ich nahm an, jeder würde das so sehen.
Der Gedanke ist nachvollziehbar, doch Lesen ist ein viel nuancierteres und individuelleres Erlebnis. Es wird von unserer Umgebung beeinflusst (bin ich in einem lauten Café oder anderweitig abgelenkt?), unserer Konzentration (bin ich mit etwas anderem beschäftigt?), unseren Bedürfnissen (überfliege ich den Text nur und suche etwas Bestimmtes?) usw. Aber Lesen ist nicht nur durch die aktuelle Situation beeinflusst, sondern auch dadurch, wie Augen und Gehirn Informationen verarbeiten. Was Sie sehen und was Sie erleben, wenn Sie diese Worte lesen, ist jeweils unterschiedlich.
Während unsere Augen über den Text fliegen, verschlingt das Gehirn die Textur der Schrift – die Summe der positiven und negativen Formen innerhalb und um die Buchstaben und Wörter. Doch mit diesen Formen und Details halten wir uns nicht bewusst auf, stattdessen leistet das Gehirn ganze Arbeit, analysiert den Text und erzeugt mentale Bilder dessen, was wir gerade lesen. Unsere Augen sehen die Schrift und unser Gehirn sieht Don Quijote mit Windmühlen kämpfen.
Oder zumindest hoffen wir das. Es ist der Idealfall, der aber von unseren gestalterischen Entscheidungen abhängt. Waren Sie beim Lesen schon so vertieft, dass Sie die Zeit vergessen haben? Ich auch. Das kommt von einem guten Text, und gute Typografie kann dies unterstützen. Ohne zu wissenschaftlich zu werden, schauen wir uns einmal den physischen Prozess des Lesens an.
Abb. 1.1 Ein bescheidener kleiner Text. Doch was passiert, wenn ihn jemand liest?
Abb. 1.2 Sakkaden sind die Sprünge, die sich in Sekundenbruchteilen vollziehen, wenn unsere Augen über den Text fliegen.
Abb. 1.3 Fixationen sind die kurzen Pausen zwischen Sakkaden.
Lesen ist kein linearer Vorgang. Stattdessen vollführen unsere Augen eine Reihe von blitzschnellen sprunghaften Bewegungen (Sakkaden) über den Text (Abb. 1.2). Manche dieser Sprünge sind groß, andere klein. Sakkaden helfen unseren Augen, viele Informationen in kurzer Zeit zu erfassen. Die Dauer einer Sakkade hängt von unserer Lesekompetenz und davon ab, wie vertraut wir mit dem Inhalt sind. Wenn ich Wissenschaftler wäre, könnte ich wissenschaftliches Zeug schneller lesen als Nichtwissenschaftler, weil ich mit all den Fachbegriffen vertrauter wäre. Allerdings bin ich kein Wissenschaftler.
Abb. 1.4 Auch wenn die untere Hälfte der Buchstaben fehlt, ist der Text immer noch einigermaßen lesbar, da sich die entscheidende visuelle Information in der oberen Hälfte befindet.
Zwischen zwei Sakkaden liegt eine Fixation, wenn unsere Augen für den Bruchteil einer Sekunde auf einem Punkt verharren (Abb. 1.3). Während dieser Pause sehen wir einige Buchstaben scharf und den umliegenden Rest verschwommen. Unser Gehirn fügt die Fixationen zusammen und entschlüsselt blitzschnell die Informationen. Das alles passiert reflexartig.
Die Form der Buchstaben und jene Formen, die sie gemeinsam als Wörter und Sätze ergeben, haben große Auswirkungen auf unsere Fähigkeit, den Text zu entziffern. Wenn wir von einer Textzeile die obere Hälfte der Buchstaben abdecken, wird es sehr schwer, sie zu lesen. Decken wir die untere Hälfte ab, können wir dagegen den Text fast problemlos lesen (Abb. 1.4).
Das liegt daran, dass Buchstaben mehr Unterscheidungsmerkmale in ihrer oberen Hälfte haben. Alle Buchstabenformen eines Wortes zusammen ergeben die Wortform, die wir beim Lesen erkennen.
Abb. 1.5 Mit der eigenen Handschrift sind Sie vertraut. Die Schrift eines anderen zu lesen (wie meine), braucht dagegen meist etwas Übung.
Sobald wir anfangen, Buchstaben und geläufige Wörter unbewusst zu erkennen, lesen wir schneller. Und wir werden dabei immer besser, wenn wir unter ähnlichen Bedingungen lesen. Die Schriftdesignerin Zuzana Licko fasste es einmal wie folgt zusammen: „Leser lesen am besten, was sie am häufigsten lesen.“
Dies ist keine eiserne Regel, doch je ungewohnter uns Buchstabenformen erscheinen, umso langsamer entziffern wir sie. Würden wir mit einem Buch in einer abgefahrenen Science-Fiction-Schrift ins Mittelalter reisen, könnten die Leute von damals damit wenig anfangen. Doch heute sind wir gewohnt, so etwas zu lesen, während wir auf Hoverboards herumsurfen.
Aus dem gleichen Grund haben wir manchmal Schwierigkeiten, die Handschrift einer anderen Person zu entziffern: Die Formen und Eigenarten dieser Schrift sind für uns ungewohnt. Bei der eigenen lesen wir dafür recht schnell (Abb. 1.5).
Es gibt viele Studien zum Leseprozess, doch nur wenig Konsens. Die Lesegenauigkeit hängt von verschiedenen Faktoren ab, angefangen beim Ziel, das der Leser hat. Einige Studien zeigen, dass wir Wortbilder lesen – stellen Sie sich eine Kreidelinie um das ganze Wort herum vor –, während andere nahelegen, dass wir Buchstabe für Buchstabe lesen. Einigkeit besteht darin, dass die visuelle Anmutung und die Genauigkeit des Textsatzes (wie gut sich die Buchstabenformen unterscheiden lassen) das Lesen erleichtern in Verbindung damit, wie geübt ein Leser ist.
Abb. 1.6 Fließtext in Versalien kann schwerer lesbar sein, wenn wir daran nicht gewöhnt sind.
Nehmen wir einen Absatz in lauter Großbuchstaben (Abb. 1.6). Man könnte sich womöglich daran gewöhnen, aber die meisten von uns haben keine Routine darin, längere Texte in Versalien zu lesen. Im Vergleich zu normalem Text in gemischter Schreibweise ist Text ausschließlich in Versalien recht unzugänglich. Großbuchstaben sind blockförmig und unterscheiden sich in den Umrissen nur wenig. Die resultierenden Wortbilder sind im Wesentlichen Rechtecke (Abb. 1.7).
Die Erkenntnis, dass sich unsere Wahl einer Schrift und der Satz so sehr auf die Leser auswirken, hat mir die Augen geöffnet. Kleine Dinge wie Schriftgröße und Laufweite können in der Summe den Lesern große Vorteile bringen. Wenn ihnen diese Dinge nicht bewusst auffallen, haben wir gute Arbeit geleistet.
Abb. 1.7 Unsere Fähigkeit, Wörter zu erkennen, hängt von den Formen ab, die sie bilden. Versaltext ergibt blockartige Formen mit wenigen Unterscheidungsmerkmalen, während es Text in gemischter Schreibweise leichter macht, Wörter zu identifizieren.
Dann haben wir ihnen den Weg frei und die Informationen zugänglicher gemacht.
Typografie auf dem Bildschirm unterscheidet sich vom Druck in ein paar wichtigen Punkten. Es gibt hier zwei Leseumgebungen: den physischen Raum (und seine Beleuchtung) und das Gerät. Ein Leser liest an einem sonnigen Tag im Park auf seinem Handy, ein anderer versucht in einem dunklen Raum Untertitel auf seinem Fernseher zu entziffern. Als Designer haben wir darauf keinen Einfluss, was frustrierend sein kann. Ich würde gerne bei jedem Leser am Bildschirm Helligkeit und Kontrast richtig einstellen, doch das ist nicht machbar.