Typographie

Wenn wir in diesem Buch von Nutzungsschnittstellen sprechen, meinen wir „grafische Nutzungsschnittstellen“. Dieser Begriff wurde eingeführt, um sich von auf Textzeichen basierenden Nutzungsschnittstellen abzusetzen. Doch auch die grafischen Nutzungsschnittstellen enthalten zu einem großen Teil Text. Fast schon als ironisch zu bezeichnen ist die Tatsache, dass der Textgestaltung bei grafischen Nutzungsschnittstellen viel mehr Bedeutung zukommt als in textbasierten Systemen. Bei einer textuellen Schnittstelle ist das Aussehen des Textes eine Frage der Hardware oder bestenfalls des Betriebssystems. Der Gestaltungsspielraum ist auf die Auswahl von Textfarben oder den Einsatz eines dynamischen Features wie dem Blinken von Text beschränkt. Eine grafische Nutzungsschnittstelle bietet dagegen sehr viel mehr Gestaltungsoptionen, denn sie ermöglicht es, das Aussehen des Textes am Bildschirm zu bestimmen und schafft damit die Voraussetzung, mit diesem Aussehen auch die Funktion eines Textes im Objektarrangement am Bildschirm besser auszudrücken. Diese zusätzlichen Freiheiten bergen zugleich neue Gefahren, denn jetzt können Texte auch schwer lesbar gestaltet werden oder als Quelle für ungewollte visuelle Störungen dienen. Damit das nicht passiert, ist grundlegendes Wissen über die Gestaltung von Schrift am Bildschirm erforderlich.

Spätestens seit Johannes Gutenberg im 15. Jahrhundert den Buchdruck mit beweglichen Lettern in Europa bekannt gemacht hat, beschäftigen sich in der westlichen Welt Buchdrucker und Schriftgelehrte damit, wie gedruckte Schrift gestaltet werden soll. Das Wissen über das Schreiben mit Buchstaben, der Typographie (von griechisch τύπος (typos) = Buchstabe und γράφειν (graphein) = Schreiben), ist also über Jahrhunderte gewachsen, hat sich weiterentwickelt, wurde aktualisiert und tradiert. Im Laufe der Zeit – vom Buchdruck mit Bleilettern bis zum modernen Desktop-Publishing – haben sich sehr viele Praktiken und Konventionen herausgebildet. All diese Details zu behandeln würde für unsere Zwecke zu weit gehen, denn ein großer Teil des typographischen Wissens für den Druck eines gut lesbaren und ästhetisch anspruchsvollen Buches ist für unsere Gestaltungsaufgaben gänzlich ungeeignet.

Doch was unterscheidet Buchdruck-Typographie von Nutzungsschnittstellen-Typographie? Das Offensichtlichste ist der Unterschied im Medium: Beim Buchdruck geht es um die Gestaltung von Text, der in der Regel mit einer dunklen Tinte auf hellem Papier gedruckt wird. Die Drucktechnik erlaubt schon seit Jahrhunderten eine saubere Darstellung sehr fein strukturierter Zeichen. Am Bildschirm handelt es sich dagegen um eine Fläche aus leuchtenden Pixeln. Bis vor wenigen Jahren war die Menge dieser Pixel pro Flächeneinheit, die Pixeldichte oder Auflösung, eher gering. Text am Bildschirm war also im Vergleich zu gedrucktem Text sehr grob. Ein weiterer wichtiger Unterschied betrifft die Textlänge. Im Buchdruck liegt das Hauptaugenmerk auf der lesefreundlichen Gestaltung von langen Fließtexten. In der Nutzungsschnittstelle hingegen haben wir es oft mit kurzen Texten, manchmal mit nur einzelnen Worten oder Zeichen zu tun.

Ein letzter und sehr wichtiger Unterschied zwischen dem Design von Text für eine Nutzungsschnittstelle und der Textgestaltung im klassischen Druck hängt mit unserer Grundforderung nach Robustheit zusammen. Wenn ein Buchtext gesetzt wird – wobei es egal ist, ob es klassisch mit Bleilettern oder modern mit einer DTP-Software passiert –, liegt der komplette Text vor. Der Setzer hat die Gelegenheit, die Gestaltung jedes einzelnen Wortes, jedes einzelnen Satzes und des Textes im Ganzen zu optimieren. Bei Nutzungsschnittstellen hingegen hängt der dargestellte Text zu einem nicht geringen Teil von früheren Eingaben oder vom Zustand des Programms ab. Zum Zeitpunkt der Gestaltung ist es deshalb nicht möglich, für sämtliche Konstellationen vorherzubestimmen, welche Worte an welcher Position und in welchem Zusammenhang am Bildschirm erscheinen werden.

Diese Unterschiede sind, wie wir gleich zeigen werden, sehr bedeutsam. Sie führen dazu, dass am Bildschirm andere Entscheidungen bezüglich der Schriftwahl und der Formatierung gewählt werden müssen als auf gedrucktem Papier.

Lesen als Hypothesenbildung

Bevor wir mit konkreten Hinweisen beginnen können, wollen wir uns nochmal kurz unseren Grundlagen zuwenden und einige Konkretisierungen vornehmen. Der nachfolgende Text erschien in dieser Form in der Frankfurter Allgemeinen Zeitung ³:

FKARFNRUT, 23. Sptbemeer. Ncah enier nueen Sutide, die uetnr aerdnem von der Cmabirdge Uinertvisy dührruchgeft wrdoen sien slol, ist es eagl, in wlehcer Rehenifloge Bcuhstbaen in eneim Wrot sethen, Huaptschae, der esrte und ltzete Bcuhstbae snid an der rhcitgien Setlle. Die rsetclhien Bshcuteban kenönn ttoal druchenianedr sien, und man knan es tortzedm onhe Poreblme lseen, wiel das mneschilhce Gherin nhcit jdeen Bcuhstbaen enizlen leist, snodren das Wrot als gnazes. Mti dme Pähonemn bchesfätgein shci mherere Hhcochsluen, acuh die aerichmkianse Uivnäseritt in Ptstbigurh. Esrtmlas üebr das Tmeha gchseibren hat aebr breteis 1976 - und nun in der rgchitien Bruecihhsetnafoelngbe - Graham Rawlinson in sieenr Dsiestraiton mit dem Tetil “The Significance of Letter Position in Word Recognition” an der egnlsicehn Uitneivrsy of Ntitongahm.

Dass das Lesen derart verdrehter Texte kaum Probleme bereitet, ist verblüffend, weshalb sich auch Wissenschaftler mit diesem Phänomen beschäftigt haben. Dreißig Jahre nach der im Text erwähnten Arbeit von Rawlinson⁴ hat der amerikanische Psychologe Keith Rayner⁵ 2006 herausgefunden, dass Wörter mit verdrehten Buchstaben zwar langsamer gelesen, aber meist gut verstanden werden. Wie gut das im Einzelfall funktioniert, hängt vom Vertauschungsgrad, von der Bekanntheit der Worte und von der Stabilität des ersten und des letzten Buchstabens ab.

Offensichtlich gelingt es uns, ein Wort zu lesen, das an dieser Stelle nicht steht. Für diesen Sachverhalt liefert der von uns im Grundlagenkapitel vorgestellte Hypothesengenerator nach Gregory zusammen mit den ebenfalls dort beschriebenen Merkmalen der menschlichen Wahrnehmung eine plausible Grundlage: Die Bandbreite an Informationen, die über die Sensoren, in diesem Fall das Auge, in den Wahrnehmungsapparat gelangen können, ist sehr begrenzt. Um effektiv wahrnehmen zu können, muss eine Selektion erfolgen, indem unser Wahrnehmungssystem auf der Grundlage des Gesehenen und früherer Erfahrungen Hypothesen darüber aufstellt, welche Reize für das Erkennen maßgeblich sind. Bestätigen sich die jeweils aufgestellten Hypothesen, verdeutlicht dies, dass die ausgeblendeten Informationen nicht erforderlich sind. Wir gewinnen Schnelligkeit durch Informationsverlust.

Beim Lesen verhält es sich ebenso: Ein erfahrener Lesender nimmt nur einzelne Punkte eines Textes wahr und bildet unter Zuhilfenahme früherer Erfahrungen Hypothesen darüber, was dort stehen könnte. Nur wenn sich keine Hypothese bilden lässt oder wenn die Hypothese sich im Leseverlauf als falsch erweisen sollte, ist es nötig, sich die ausgelassenen Textbestandteile genauer anzusehen. Wenn wir das obige Textbeispiel halbwegs flüssig lesen können, sind die Hypothesen unseres Wahrnehmungssystems korrekt, obwohl die gelesenen Worte faktisch falsch (geschrieben) sind.

Diese Abbildung zeigt die Augenbewegung eines Kindes einer vierten Klasse beim Lesen eines anspruchsvollen Textes⁶. Man erkennt gut, dass der Text nicht Buchstabe für Buchstabe, sondern in viel gröberen Zügen erschlossen wird. Die roten Punkte stellen die Fixationen dar. Fixationen nehmen 90 % der Lesezeit ein. Während einer Fixation verweilt der Blick des Lesers auf einer Stelle und das grobe Wortbild wird wahrgenommen. Dieses grobe Bild bildet zusammen mit dem bisher Gelesenen und dem Wissen des Lesers die Grundlage für eine Hypothese über das, was dort geschrieben ist. Die Linien von Fixation zu Fixation sind Sakkadenbewegungen, also schnelle, ruckartige Bewegungen des Auges zum nächsten Fixationspunkt. Zwar erfolgen diese Bewegungen ohne bewusste Steuerung, doch sind sie nicht willkürlich, sondern folgen ebenfalls einer Erfahrung, einer Hypothese des Wahrnehmungssystems, nämlich dass sich der Text bis zum Zeilenende fortsetzt und am Anfang der nächsten Zeile weitergeht.

Es kommt vor, dass bei einer Fixation keine Hypothese gebildet werden kann, das Wortbild also im Kontext nicht erkannt werden kann. Auch kann sich eine Hypothese beim weiteren Lesen als falsch erweisen. Wenn dies passiert, entsteht ein zusätzlicher Aufwand, weil ein Wort in kleineren Schritten erschlossen werden muss oder weil ein Rücksprung zu einer bereits gelesenen Stelle erforderlich ist. Es kommt zu Regressionen, also Sakkadenbewegungen entgegen der Leserichtung. Dies ist etwa in der dritten Zeile der Abbildung zu sehen. Das für das Kind ungewohnte Wort „Korkgewebe“ ist von ihm recht mühselig in insgesamt acht Fixationen in zwei Lesedurchgängen erschlossen worden.

Um einen gut lesbaren Text am Bildschirm zu erzeugen, gilt es eine Vielzahl von Aspekten der Schriftgestaltung zu beachten. Es reicht nicht aus, lediglich gut lesbare Einzelbuchstaben zu gestalten. Zu bedenken und zu beachten ist vielmehr auch die Eignung einer Schriftart, ein prägnantes Wortbild zu bilden, um gute Hypothesen über das gelesene Wort aufstellen zu können. Ebenso wichtig ist die Gestaltung eines Schriftzugs auf eine Art und Weise, die das Auge beim Folgen einer Zeile und beim Finden des Zeilenanfangs unterstützen kann.

Schriftfamilien und Schrifttypen

Schriftgestaltung für Nutzungsschnittstellen erfordert neben der Formatierung (fett, kursiv etc.) vor allem die Auswahl einer Schriftart (auch im Deutschen oft Font genannt). Das Gestalten einer eigenen Schriftart erfordert dagegen umfangreiches Wissen, ausreichend praktische Erfahrung und gestalterische Kompetenzen, weshalb wir davon abraten, ohne diese Voraussetzungen ein solches Unterfangen zu beginnen. Wir konzentrieren uns deshalb auf bereits bekannte Schriftarten.

Heutige Textverarbeitungsprogramme offerieren eine sehr große Anzahl verschiedener Schriften. Es gibt jedoch Möglichkeiten, durch die Einordnung in „Schriftartenfamilien“ Ordnung zu schaffen. Allerdings gibt es für diese Einsortierungen verschiedene Vorschläge, hinter denen unterschiedliche Interessen stecken. Die DIN 16518, das „Klassifizierungssystem für Schriftarten“ unterscheidet insgesamt elf Familien. Wir machen es für unsere Zwecke einfacher und betrachten in erster Linie nur zwei Familien, fügen eine Sonderklasse hinzu und lassen viele andere Schriftarten außen vor, weil sie für den Texteinsatz in der Nutzungsschnittstelle nicht brauchbar sind.

Zu den für uns nicht betrachteten Schriften gehören Symbolschriftarten wie Wingdings. Sie dienen nur der Darstellung von Symbolen und enthalten nicht die üblichen Buchstaben. Das Gleiche gilt für die im Webdesign verbreiteten Icon-Fonts⁷. Auch Nachbildungen menschlicher Schreibschriften sind für uns nicht brauchbar. Sie eignen sich eventuell als Überschrift für einen Text oder zum Verfassen einer Speisekarte, können in der Nutzungsschnittstelle aber nicht sinnvoll eingesetzt werden. Ebenso sind Frakturschriften, also alte deutsche Schriften, ausgeschlossen. Selbst im Druck sind sie heutzutage selten geworden. Man findet sie gelegentlich noch in Zeitungstiteln oder auf dem Schild vor dem Restaurant „Zum röhrenden Hirschen“, um einen historischen Eindruck zu erwecken. Schließlich gehören auch Zier- und Spaßschriften, die zum Beispiel die Beschriftung eines Western-Saloons oder Darstellungen aus Science-Fiction-Serien nachahmen, in die Kategorie der für Nutzungsschnittstellen ungeeigneten Schriften.

Befreit von all diesen Schriftarten, die ihre Berechtigung nur außerhalb der Nutzungsschnittstelle haben, bleiben vor allem zwei große Schriftfamilien übrig. Sie unterscheiden sich vor allem durch das Vorhandensein oder Fehlen von Serifen und durch unterschiedliche Strichstärken.

Oben zu sehen ist die Schriftart „Liberation Serif“. Es handelt sich um eine sogenannte „Serifenschrift“⁸. Wie der Name sagt, verfügt diese Schrift über sogenannte „Serifen“. Am Großbuchstaben T kann man sie gut erkennen.

Im Prinzip besteht ein großes T nur aus zwei einfachen Strichen. Verwendet man eine Serifenschrift, hängen jedoch an den Enden des Querbalkens kleine Haken und der Buchstabe als Ganzes hat, ähnlich einer Stehlampe, unten einen Fuß, auf dem er ruht. Eine zweite charakteristische Eigenschaft typischer Serifenschriften sind augenfällige Variationen in der Strichstärke. Man erkennt dies im obigen Beispiel am deutlichsten am Buchstaben x. Der Abstrich, also der Strich von links oben nach rechts unten, ist dicker als der Aufstrich von links unten nach rechts oben. Die Gestaltung mit unterschiedlichen Strichstärken lehnt sich an handgeschriebene Lettern an, bei denen eine breite Feder benutzt wird. Deshalb ist dieses Feature auch in kalligrafischen Schriften besonders prägnant.

Den Gegenpol zu den Serifenschriften bilden die serifenlosen Schriften⁹, oft „Sans-Serif-Schriften“ genannt. Zu sehen ist die Schriftart „Liberation Sans“. Betrachten wir wieder das T und das x: Beide Buchstaben bestechen durch ihre Einfachheit. Es gibt keine Serifen oder anderweitige Verzierungen an den Buchstaben. Auch unterschiedliche Strichstärken fallen nicht ins Auge. Tatsächlich gibt es sie an einigen Stellen aber doch, wenn auch in weitaus geringerem Maße. Beim Buchstaben a beispielsweise ist zu sehen, dass der „Bauch“ des Buchstabens sich zum Querstrich hin wieder verjüngt.

Der Typograph Hans-Peter Willberg¹⁰ stellt eine recht einfache Matrix für Schriften auf, in der er neben den Serifenschriften und den serifenlosen Schriften aber noch einige Zwischenklassen wie Antiqua-Varianten mit verschiedenen Strichstärken, aber ohne Serifen und Egyptienne-Schriften mit Serifen, aber gleichen Strichstärken beschreibt. Wir beschränken uns der Einfachheit halber auf die beiden großen Schriftfamilien, denn es sind die beiden wichtigsten Schriftfamilien, die bei der Darstellung von Texten in Nutzungsschnittstellen in Frage kommen. Für spezielle Einsatzzwecke müssen wir aber noch eine Sonderklasse von Schriften einführen, die nicht ins obige Schema passt und die eine spezielle Eigenschaft aufweist.

Hier zu sehen ist die Schriftart „Liberation Mono“, eine sogenannte „Monospace-Schrift“, auf Deutsch auch „dicktengleiche Schrift“ genannt. Monospace-Schriften sind Schriftarten, bei denen jeder Buchstabe über genau die gleiche Breite verfügt. In üblichen Druckschriften ist dies nicht der Fall. Ein kleines i ist viel schmaler als ein großes M. Schreibmaschinen und frühe Textterminals verwendeten Schriftarten mit gleichbleibender Zeichenbreite. Diese Schriftarten sind heute noch in der Programmierung weit verbreitet, weil sie es erlauben, Buchstaben in ein Raster zu schreiben. Dies ermöglicht eine einfache visuelle Strukturierung von Quellcode oder das einfache Erzeugen von Bildschirmmasken durch die Verwendung von Buchstaben und Sonderzeichen. Die Gestalter von Monospace-Schriften mussten das Problem lösen, verschiedene Buchstaben so in das gleiche Raster zu schreiben, dass sie die Breite ausfüllen, ohne dass es irgendwie verzerrt aussieht und ohne dass Lücken in einem Wort entstehen. Bei der „Liberation Mono“ wird die gleiche Zeichenbreite dadurch erzeugt, dass sehr breite Buchstaben wie das W und das M leicht zusammengestaucht werden. Bei sehr schmalen Buchstaben wie dem i bedient man sich im Gegenzug üppiger, ausladender Serifen, obwohl die Schrift im Großen und Ganzen serifenlos ist.

Monospace-Schriften haben ihre Berechtigung in einigen Nischen der Nutzungsschnittstellen. Als generelle, allgemeine Schrift sollte man sie nicht verwenden. Ob man hingegen eine Schrift mit oder ohne Serifen auswählt, ist in erster Linie eine Geschmacksfrage. Serifenlose Schriften werden oft als moderner, Serifenschriften hingegen als schicker angesehen. Gerade am Bildschirm gibt es jedoch noch mehr zu beachten als nur Geschmacksunterschiede. Wir werden sehen, dass es Anforderungen gibt, die eine bestimmte Schriftwahl nahelegen. Wie so oft bei unseren Gestaltungsfragen stehen die Forderungen an die Schriftgestaltung in Konflikt zueinander. Es wird also darum gehen, unter Berücksichtigung der Rahmenbedingungen die konfligierenden Forderungen auszutarieren.

Schriften am Bildschirm

Viele der Anforderungen an die Schriftauswahl hängen mit besonderen Gegebenheiten der Darstellung von Schrift am Bildschirm zusammen, denn in diesem Fall gibt es andere Herausforderungen als in traditionellen Druckverfahren. Beim Drucken werden fein gearbeitete Bleilettern auf Papier gedrückt. Es entsteht ein sehr sauberes, klares Schriftbild. Auf Computerbildschirmen konnte man ein solches Druckbild bis vor wenigen Jahren noch nicht erzeugen. Die Auflösung der Bildschirme war zu gering, mitunter traten Unschärfen auf und sie neigten zu starken Überstrahlungen, was bedeutet, dass helle Bereiche des Bildes in dunkle Bereiche hineinstrahlten. Moderne LCD- oder OLED-Bildschirme bringen viele dieser Probleme nicht mehr mit sich. In den letzten Jahren kommen zwar vermehrt Bildschirme mit sehr hohen Auflösungen zum Einsatz, doch ist es verfrüht, wenn überhaupt je gerechtfertigt, die Anforderungen an die Schriftdarstellung auf niedrig auflösenden Bildschirmen gänzlich aus dem Blick zu verlieren, denn noch findet man solche Bildschirme häufig im Einsatz an günstigen Computern. Zudem wird es auch künftig noch Geräte geben, bei denen die Darstellung nicht im Vordergrund steht, etwa bei Steuergeräten in Industrieanlagen, die deshalb mit einfachen Anzeigeelementen ausgestattet sind. Gerade auch bei solchen Geräten sollten die ergonomischen Forderungen erfüllt sein.

Bitmap-Fonts

Bei einem klassischen Terminal oder auch einem alten MS-DOS-System hat man keinen Einfluss auf die Schriftdarstellung. Es gibt genau eine Schriftart, die in die Grafikkarte des Computers „eingebaut“ worden ist. Eine MDA-Grafikkarte von IBM aus dem Jahr 1981 verfügt im ROM über eine Bitmap von 9 x 14 Pixeln für jedes einzelne darstellbare Zeichen. Ähnlich sieht es bei den damaligen EGA- und VGA-Grafikkarten aus. Sie enthalten einen festen Schriftsatz von 8 x 16 Punkten, der im ROM der Karte gespeichert ist. Es ist jedoch bereits möglich gewesen, diese Schrift-Bitmaps per Software zu überschreiben und somit das Aussehen der Buchstaben zu verändern. Bis zum heutigen Tage besteht jedoch die Einschränkung, dass im Textmodus nur Monospace-Schriften möglich sind.

Dies ändert sich erst mit dem Aufkommen grafischer Nutzungsschnittstellen. An einem Apple Macintosh etwa sind Schriften mit variablen Buchstabenbreiten eingesetzt worden. Das Schriftbild erscheint dadurch moderner und schicker. Was sich allerdings bei den frühen grafischen Nutzungsoberflächen noch nicht geändert hat, ist die Speicherung der Schrift als Bitmap. Jeder Buchstabe ist Pixel für Pixel als Bild gespeichert. Schriftarten dieser Art werden „Raster-Fonts“ genannt. Sie haben im Kontext der damaligen Systeme wichtige Vorteile gegenüber den heute üblichen Outline-Fonts gehabt:

• Gerade bei der damals verbreiteten Ein-Bit-Darstellung, also nur weiß und schwarz, erfordert das Darstellen eines Buchstabens am Bildschirm bei Raster-Fonts nur das Kopieren der Buchstaben-Bitmap in den Grafikspeicher. Eine solche Operation ist sehr schnell und mit wenig Ressourceneinsatz verbunden.
• Die Schriftarten sind an die monochrome Ein-Bit-Darstellung und die niedrige Auflösung gut angepasst gewesen. Dies sichert trotz der technischen Einschränkungen ein klares, am Bildschirm gut lesbares Schriftbild.

Diesen Vorteilen stehen folgende Nachteile gegenüber:

• Da die Buchstaben als Pixelmatrix vorliegen, kann Text nur schwer in der Größe angepasst werden, ohne dass er bei Verkleinerung unleserlich oder bei Vergrößerung grobpixelig wird. Um die gleiche Schriftart in guter Qualität in mehreren Größen benutzen zu können, sind dafür verschiedene Schriftsätze erforderlich.
• Die Bildschirmschriftarten eignen sich mit ihrer niedrigen Auflösung nicht zum Drucken auf hochauflösenden Druckern. Will man den Bildschirmtext drucken, muss man also entweder mit einem schlechten Druckbild leben oder zu jeder Bildschirmschriftart eine alternative Druckschriftart in der Hinterhand haben.

Aktuelle Betriebssysteme mit grafischen Nutzungsschnittstellen verwenden keine Raster-Fonts, sondern Outline-Fonts. „Outline“ bedeutet, dass der Linienzug eines Buchstabens als Vektorzug der äußeren Buchstabenbegrenzung gespeichert ist. Das Aussehen eines Buchstabens auf diese Art zu speichern wiegt alle Nachteile von Rasterschriftarten auf.

• Die Schriften sind auf dem Bildschirm und im Druck verwendbar.
• Die Schriften sind beliebig skalierbar und können damit insbesondere auch sehr groß dargestellt werden.
• Die Schriften können algorithmisch manipuliert werden und so zum Beispiel automatisch fett, kursiv oder verbogen dargestellt werden. Die Ergebnisse solcher Manipulationen sind allerdings oft nicht erfreulich. Gute Schriftarten liefern deshalb Buchstaben für verschiedene Schriftstärken und einen separaten, kursiven Schriftsatz gleich mit.

Leider kehren sich auch die Vorteile der Rasterschriften ins Gegenteil um, wenn Outline-Fonts verwendet werden:

• Um zu berechnen, welche Pixel auf dem Bildschirm zur Darstellung der Schrift eingefärbt werden müssen, muss eine einigermaßen komplexe Berechnung durchgeführt werden. Auf sehr einfachen oder sehr alten Geräten steht diese Rechenleistung eventuell nicht zur Verfügung.
• Die Darstellung von Outline-Schriften ist gerade bei kleiner Größe der Darstellung und niedriger Auflösung des Bildschirms oft sehr schlecht lesbar, da die Schriftart nicht an die Bildschirmeigenschaften angepasst ist.

Anforderungen an die Schriftauswahl

Wir haben nun hinreichend vorüberlegt und vorsortiert, um, zusammen mit den Erkenntnissen des vorherigen Kapitels und vor allem des Kapitels Architektur der Wahrnehmung, uns nun den konkreten Forderungen an die Gestaltung von Schrift am Bildschirm zu widmen.

Die Grundvoraussetzung für das Erkennen von Objekten am Bildschirm ist ein hinreichender Kontrast zum Hintergrund. Wir haben dieses Thema bereits im vorherigen Kapitel im Zusammenhang mit der Erkennbarkeit behandelt. Bei der Schriftgestaltung kommt dem Kontrast jedoch nochmals eine besondere Aufmerksamkeit zu, da es sich bei Buchstaben zum einen um relativ kleine, grazile Objekte handelt und es zum anderen nicht nur darum geht, dass man Text überhaupt als Text erkennen kann, sondern dass man ihn auch lesen können muss.

Einfluss auf die Lesbarkeit von Text und damit auch auf die Erkennbarkeit und den wahrgenommenen Kontrast hat die Frage, ob Schrift in der sogenannten Positivdarstellung – Schwarz auf Weiß – oder in Negativdarstellung – Weiß auf Schwarz – dargestellt werden sollte. Gerade letztere Gestaltungsoption ist momentan mit dem Aufkommen der sogenannten „Dark Modes“ wieder in Mode gekommen.

Positiv- und Negativdarstellung

Die Praxis der Gestaltung hatte die Frage der sogenannten „Darstellungspolarität“ lange Zeit für uns beantwortet. Mit dem Übergang von Kommandozeilen-Interfaces zu grafischen Nutzungsschnittstellen und der Desktop-Metapher vollzog sich auch ein Übergang von der Negativdarstellung mit heller Schrift auf dunklem Grund zur Positivdarstellung mit dunkler Schrift auf hellem, oft weißem Grund.

Die aktuelle Mode geht wieder in die andere Richtung. Zunächst waren es Programme zur Bild- und Videobearbeitung, die eine Negativdarstellung verwendeten. Dies lässt sich auch gut begründen, denn eine dunkle Nutzungsschnittstelle drängt sich gegenüber dem zu bearbeitenden Inhalt weniger in den Vordergrund und sorgt dafür, dass die Bild- und Videoinhalte intensiv in den Vordergrund treten. Auch in der Programmierung ist die Negativdarstellung wieder eingezogen. Viele Editoren und Programmierumgebungen verwenden seit einigen Jahren eine Negativdarstellung, erlauben aber meist auch das Umschalten auf eine Positivdarstellung. Welche Wahl die richtige ist, ist in diesem Feld umstritten und offenbar eine Frage der persönlichen Präferenz. Die besseren farblichen Gestaltungsmöglichkeiten bei einer Negativdarstellung – mehr dazu weiter unten – lassen diese Wahl sinnvoll erscheinen.

Unabhängig von diesen beiden speziellen Aufgabenfeldern wird die Negativdarstellung in den letzten Jahren verstärkt beworben. Betriebssysteme beispielsweise lassen sich inzwischen in einen Dark-Mode umschalten. Eine Motivation für diesen Trend könnte auch der geringere Energieverbrauch bei mobilen Geräten sein, die zudem bei der Nutzung in dunklen Umgebungen eine weniger störende Lichtquelle verkörpern.

Auch für die Positivdarstellung lassen sich einige Nachteile finden:

• Bei der Positivdarstellung leuchtet ein großer Teil des Bildschirms. Die Umgebung des Bildschirms ist meist weniger hell beleuchtet, sodass es zu vielen Helligkeitsanpassungen des Auges kommt. Diese ständig geforderte Anpassungsleistung ist auf Dauer belastend und ermüdend.
• Die grafischen Elemente einer Nutzungsschnittstelle treten bei einer Positivdarstellung stärker in den Vordergrund als bei einer dunklen Darstellung und können dadurch von den zu bearbeitenden Inhalten ablenken. Gerade bei Anwendungen, in denen das Aussehen der zu bearbeitenden Objekte im Vordergrund steht, etwa der der Bildbearbeitung, ist das von Nachteil und sollte entsprechend vermieden werden.
• Die Darstellung von farblichem Text ist bei der Positivdarstellung stärker eingeschränkt als bei der Negativdarstellung. Im Unterkapitel Auszeichnung mit Farbe werden Sie sehen, dass es bei positiver Darstellung sehr schwer ist, Text so einzufärben, dass die Farbe einerseits gut erkennbar und andererseits unterscheidbar ist und der Text gleichzeitig lesbar bleibt.
• Es gibt bestimmte Augenerkrankungen, etwa die Eintrübung des Kammerwassers im Auge, bei denen weißer Text auf schwarzem Grund besser wahrgenommen werden kann als schwarzer Text auf weißem Grund¹¹.

Dem stehen aber auch große Nachteile der Negativdarstellung gegenüber:

• Untersuchungen¹² zeigen, dass für eine gleich gute Lesbarkeit bei Negativdarstellung ein höherer Kontrast nötig ist bzw. dass bei gleichem Kontrast die Lesbarkeit niedriger ist.
• Ein zu hoher Kontrast führt bei Negativdarstellung aber zu Problemen, da sich die Pupille aufgrund der allgemein geringen Helligkeit weiter öffnen muss. Wenn nun helle, weiße Buchstaben verwendet werden, leuchten diese so stark, dass ein Effekt entsteht, als würde man direkt in eine Lampe blicken. Wendet man den Blick ab, erscheinen einige Zeit lang Nachbilder.
• Etwa 50 % der Bevölkerung leiden unter einer mehr oder weniger starken Hornhautverkrümmung des Auges (Astigmatismus). Diese Verformung der Vorderseite des Auges sorgt dafür, dass Lichtstrahlen nicht gleichmäßig auf der Retina fokussiert werden. Ist die Pupille geschlossen, fällt das Licht nur durch einen kleinen Teil der Hornhaut, der recht gleichmäßig ist. Es entsteht ein scharfes Bild auf der Retina. Ist sie jedoch in einer dunklen Umgebung geöffnet, geraten Lichtstrahlen über verschiedene Bereiche der Hornhaut ins Auge, wo sie folglich an verschiedenen Stellen fokussieren. Helle Schrift auf dunklem Untergrund wird also bei vielen Personen unscharf wahrgenommen¹³.
• Wenn die Umgebung des Bildschirms hell ist und das Auge häufig zwischen dem Bildschirm und der Umgebung hin- und herwechselt, muss es sich ständig den Helligkeitswechseln anpassen. Diese dauerhaft erforderliche Adaption ist eine Belastung für die Augen.

Ziehen wir aus der Abwägung dieser Nachteile die Konsequenzen: In der Regel werden Computersysteme in Büros, zu Hause und auf der Straße eher in hellen Umgebungen verwendet. Nimmt man die Nachteile der Negativdarstellung bei Hornhautverkrümmung hinzu, dürfte in den meisten Fällen die Positivdarstellung nach wie vor die bessere Darstellungsform sein. Negativdarstellung hat allerdings in den genannten Anwendungsfällen und bei der Verwendung in dunklen Umgebungen ihre Vorteile. Unabhängig davon sollte es möglich sein, bei einer standardmäßig voreingestellten Negativdarstellung in die Positivdarstellung umzuschalten.

Helligkeitskontrast

Egal, ob bei Positiv- oder bei Negativdarstellung: Der höchste Kontrast wird bei der Verwendung von Schwarz und Weiß erzielt. Auch wenn man nicht in die Extreme gehen muss, ist ein hoher Helligkeitskontrast zwischen Schrift und Hintergrund erforderlich. Eine Kombination von Dunkelblau und einer nur schwach gesättigten, hellen Hintergrundfarbe funktioniert zum Beispiel auch gut. Um die unangenehmen Nachbilder zu vermeiden, ist bei Negativdarstellung unbedingt darauf zu achten, dass die Darstellung entweder hardware- oder softwareseitig abgedunkelt werden kann. Bei der Positivdarstellung gibt es dieses Problem in der Regel nicht, denn das Auge sorgt selbst aufgrund der großen Helligkeit für die nötige Abdunkelung durch das Schließen der Pupille und die Hemmung der Zapfen.

In Gestaltungshinweisen für die Farbgestaltung im Druckbereich wird empfohlen, möglichst keinen rein weißen Hintergrund zu verwenden. Neben ästhetischen Gründen hat dies auch einen ergonomischen Grund. Wenn man bei Sonnenlicht einen weißen Zettel anschaut, wirkt das helle Weiß sehr grell und kann regelrecht blenden. Ein Ausdruck auf grauem Papier oder auch auf Recycling-Papier wirkt da viel angenehmer. Trotzdem ist die Empfehlung nicht auf den Bildschirm zu übertragen, denn am Bildschirm sieht die Sache anders aus. Er ist die Lichtquelle, nicht die Reflexion einer anderen Lichtquelle wie beim Blatt Papier. Ob ein Bildschirm blendet, liegt also nicht an der Umgebungshelligkeit, sondern an seinen Helligkeitseinstellungen. Umgekehrt leidet der Bildschirmkontrast bei hoher Umgebungshelligkeit. Das ist auch der Grund, warum bei hellem Sonnenschein das Display eines Smartphone kaum noch abzulesen ist, während es bei gleichen Einstellungen in einem dunkleren Raum problemlos erkennbar ist.

Anders ausgedrückt: Bei Druckwerken entscheidet die Wahl von Vordergrund- und Hintergrundfarbe über den wahrgenommenen Kontrast. Ändert sich die Umgebungsbeleuchtung, ändern sich zwar die absoluten Helligkeiten, aber der Kontrast zwischen Buchstabe und Papier bleibt immer gleich. Beim Bildschirm und viel mehr noch bei einer Projektion hängt er zu einem großen Teil von den Umgebungsbedingungen ab. Unsere Empfehlung lautet daher, den maximalen Kontrast anzubieten, um auch bei widrigen und ständig wechselnden Umständen eine möglichst ergonomische Gestaltung anzubieten.

Schriftgrößen

Gerade im Webdesign lässt sich beobachten, dass auch Schriftgrößen nicht durchgängig nach ergonomischen Kriterien festgelegt werden. Mal werden winzige Schriften verwendet, ein andermal besteht eine Tendenz zu sehr großen Textzügen. Die Gestaltung lesbarer Schriftgrößen ist indes keine Frage der Ästhetik oder des persönlichen Geschmacks, sondern sollte sich vor allem an den Gegebenheiten des menschlichen Auges orientieren. Zu kleine Schriften sind schlecht zu lesen, doch auch eine zu große Schrift beeinträchtigt die Lesbarkeit, denn dann ist es nicht mehr möglich, ein komplettes Wortbild zu erfassen. Schlimmstenfalls muss ein einzelner Buchstabe mit mehreren Fixationen erfasst werden.

Schriften bei gleicher Schriftgrößenangabe erscheinen nicht notwendigerweise gleich groß. In obiger Darstellung sind alle Buchstaben in der gleichen nominellen Schriftgröße, aber in verschiedenen Schriftarten gesetzt. Gerade am Beispiel des kleinen a sieht man gut, dass sich die tatsächlichen Schriftgrößen stark unterscheiden. Gegen ein a in „Arial“ wirkt der gleiche Buchstabe in „Baskerville“ regelrecht winzig. Wie kann das sein? Was beschreibt die angegebene Schriftgröße überhaupt?

Schriftgrößenangaben kommen aus dem Druckbereich. Sie beschreiben leider nicht die Höhe des sichtbaren Buchstabens, der Schriftbildhöhe, sondern die Höhe des Bleikegels, auf dem der Buchstabe aufgebracht ist. Wie Sie in der Abbildung sehen, enthält diese Kegelgröße auch das sogenannte „Fleisch“ oberhalb und unterhalb des sichtbaren Buchstabens. Verschiedene Schriften unterscheiden sich in den Proportionen. Bei der oben abgebildeten „Baskerville“ etwa liegt die Mittellänge, also die obere Begrenzung der kleinen Buchstaben viel tiefer, als dies etwa bei „Arial“ der Fall ist. Daher wirkt gerade das kleine a so winzig, während das T nicht viel kleiner ist als bei anderen Schriftarten. Wir müssen diese Ungleichheiten bei der Gestaltung mitbedenken. Als Daumenregel können wir uns merken, dass serifenlose Schriften in aller Regel größer erscheinen als Serifenschriften.

Bezüglich der Frage, ob eine Schriftgröße angemessen ist, kommt es nicht auf die absolute Größe der Buchstaben auf Papier oder auf dem Bildschirm an. Buchstaben auf einem Autobahnschild haben eine andere Größe als auf einem Plakat für eine Litfaßsäule oder auf einem Flugblatt. Die Größe dieser Buchstaben ist auf die Entfernung abgestimmt, aus der die Schilder betrachtet werden¹⁴.

Diese Darstellung aus den Design-Guidelines für Windows verdeutlicht, dass verschiedene absolute Darstellungsgrößen für entsprechend unterschiedliche Abstände gleich groß erscheinen. Viele technische Geräte werden typischerweise von verschiedenen Abständen aus betrachtet. Ein Mobiltelefon wird näher am Auge positioniert als ein Computermonitor. Der Abstand zu einem Fernseher ist wiederum größer und eine Leinwandprojekion wird angemessen aus noch größeren Abständen betrachtet. Während sich die absoluten Größen stark unterscheiden, ist der Winkel zwischen den Oberkanten und Unterkanten der Buchstaben zum Auge, der sogenannte Sehwinkel, stets konstant. Durch die Angabe dieses Winkels kann man also Hinweise zu optimalen Schriftgrößen unabhängig vom Abstand und der tatsächlichen Ausgabegröße angeben.

Solche Hinweise zur Schriftgröße finden sich zum Beispiel in der Norm ISO 9241. Die Schriftgröße sollte demnach mindestens einem Sehwinkel von 0,3 Grad, besser aber 0,5 Grad entsprechen. Mehr als 5 Grad sollten die Buchstaben nicht hoch sein. Zur Veranschaulichung helfen folgende Richtwerte: 0,5 Grad entspricht etwa der Größe des Mondes am Himmel. Die Breite des Daumens bei ausgestrecktem Arm entspricht etwa 2 Grad. So praktisch die Angabe von Schriftgrößen in Gradangaben auch sein mögen, für Sie ist sie in der Praxis wenig hilfreich, denn man kann bei handelsüblichen Computersystemen Schriftgrößen nicht in Grad angeben. In der Praxis sind verschiedene, eigentlich absolute Maße verbreitet, die aber heute nicht mehr absolut interpretiert werden. Die Schriftgrößen in Textverarbeitungssystemen wie Word sind sogenannte DTP-Punkte (DTP für Desktop Publishing). Ein solcher Punkt, der üblicherweise mit „pt“ abgekürzt wird, misst genau 1/72 Zoll, was 0,3528 Millimetern entspricht. Ein solcher Punkt hat eine feste Größe und ist damit grundsätzlich anders als ein Pixel, denn die Größe eines Pixels ist abhängig von der absoluten Auflösung eines Bildschirms. Bei einem niedrigauflösenden Bildschirm ist ein Pixel sehr groß, bei einem hochauflösenden Bildschirm hingegen klein.

Die vorstehende Abbildung zeigt, wie der links abgebildete Kreis an einem Bildschirm „aufgelöst“ wird. Im ersten Fall (mittleres Bild) ist die Auflösung sehr gering, der Kreis wird mit nur 4 x 4 Pixeln dargestellt. Die Auflösung ist derart gering, dass man die runde Charakteristik des Kreises nicht erkennen kann. Rechts sehen Sie den gleichen Kreis in einer viermal so hohen Auflösung von 8 x 8 Pixeln. Diese Auflösung ist schon viel besser geeignet, um den Kreis darzustellen. Ein Verringern oder Erhöhen der Auflösung ändert nichts an der dargestellten Größe der Elemente. Es befinden sich aber auf der gleichen Fläche mehr Pixel, sodass das Dargestellte feiner und genauer abgebildet werden kann. Die Auflösung wird in Pixel pro Zoll (abgekürzt PPI, manchmal auch DPI) angegeben.

Um Größen unabhängig von der Auflösung angeben zu können, haben sich neue Einheiten etabliert. Leider sind diese in verschiedenen Gestaltungsbereichen und unter verschiedenen Betriebssystemherstellern noch nicht einheitlich. Betrachten wir diese Einheiten am Beispiel einer typischen Schriftgrößenangabe:

Die Angabe 12 pt ist eine für traditionelle Druckerzeugnisse passende Schriftgröße. Gibt man 12 pt im CSS für eine Web-Anwendung an, rechnet der Browser pt in px im Verhältnis 3:4 um.

12 pt = 16 px

Die Einheit px steht für Pixel. Sie entspricht aber nur dann einem Pixel, wenn der Bildschirm eine Auflösung von 96 ppi hat, also ein für heutige Verhältnisse niedrig auflösender Monitor ist. Verwendet man einen höher auflösenden Bildschirm, werden diese px so in tatsächliche Pixel umgerechnet, dass letztlich ein gleich großer Buchstabe dargestellt wird. px ist dadurch zu einer auflösungsabhängigen Größe geworden. Es wird daher von einem „CSS-Pixel“ gesprochen. Microsoft verwendet die gleiche Umrechnung, nennt die Größeneinheit aber Device-Independent Pixel (DIP)¹⁵. Android verwendet eine ähnliche, relative Pixelgrößenangabe Density-Independent Pixels¹⁶. Im Gegensatz zu CSS besteht in diesem Fall die Gleichheit von logischen und physikalischen Pixeln bei 160 ppi.

1 dp = 1 Pixel bei 160 ppi

Zusammengefasst: 12 pt = 26,67 dp = 16 px = 16 DIP = 4,233 mm

Was bedeutet das für uns? Es ist in Sachen Einheiten alles verworren und kompliziert geworden, doch Scaler sorgen dafür, dass unser Gestaltungsalltag erleichtert wird. Größenangaben in pt, px, DIP und dp sind auflösungsabhängige Einheiten, die sich zwar teilweise auf Pixel beziehen, aber damit nur auf ihre Größe auf einem Referenzmonitor Bezug nehmen.

Auflösungskonforme Schriftwahl

Wenn es also darum geht, wie groß etwas dargestellt wird, brauchen wir die Auflösung eines Bildschirms in der Regel nicht mehr betrachten. Sie hat dagegen großen Einfluss darauf, welche Schriftart gut dargestellt und damit gut gelesen werden kann. Problematisch bei niedrigen Auflösungen sind vor allem Strukturen, die nicht rein senkrecht oder waagerecht verlaufen. Es entsteht dann ein sichtbarer Treppeneffekt, wie er bei der obigen Abbildung des Kreises bereits zu beobachten war. Speziell in der Auflösung 8 x 8 sieht man starke Stufen. Buchstaben mit feinen Strukturen, die kleiner sind als das Pixelraster, sind deshalb bei der Textdarstellung problematisch. Sie sind nicht ordentlich darstellbar und machen die Schrift unleserlich.

Oben ist eine vergrößerte Darstellung der Schriftarten „Times New Roman“ und „Arial“ unter Windows 95 in verschiedenen Schriftgrößen zu sehen. Das Schriftbild ist aufgrund der niedrigen Auflösung sehr unruhig. Vor allem bei „Times New Roman“ in den kleinen Schriftgrößen 5, 6 und 7 erscheint schnell ein regelrechter Pixel-Brei, der nicht mehr lesbar ist, aber auch die Schriftgrößen 8 und 9 haben kein sauberes Schriftbild. Die Darstellung der Schriftart „Arial“ (rechts) ist hingegen viel klarer, auch bei relativ kleinen Schriftgrößen. Auf der Abbildung unten rechts zu sehen ist, dass das Problem der schlecht lesbaren Schrift bei niedriger Auflösung sich nochmals verstärkt, wenn eine kursive Darstellung gewählt wird.

Die problematischen Schriftdarstellungen oben sind unter Windows 95 erzeugt worden. Windows 95 ist seinerzeit meist mit Grafikkarten verwendet worden, die nur 256 oder gar nur 16 Farben gleichzeitig darstellen können. Mit der allgemeinen Verfügbarkeit von Grafikkarten mit „True-Color“-Darstellung ist es möglich, der Treppenbildung in der Schriftdarstellung durch Glättung, dem sogenannten „Anti-Aliasing“, zu begegnen. Einfache Anti-Aliasing-Lösungen vermeiden zwar Treppeneffekte, sorgen aber für ein unscharfes Schriftbild.

Oben sehen Sie ein fortgeschrittenes Anti-Aliasing unter Windows XP, bei dem durch eine Vielzahl von Tricks wie „Font-Hinting“ und „Subpixel-Rendering“, deren Erläuterung an dieser Stelle zu weit führen würde, die Schrift geglättet wird, ohne dass sie zu unscharf gerät. Schriftglättungsfunktionen sind abhängig vom Betriebssystem und lassen sich somit bestenfalls systemweit konfigurieren. Auf vielen modernen Systemen mit hoher Pixeldichte, also mit hoher Auflösung, tritt das Problem der Darstellung kursiver Schriften und kleiner Strukturen von Serifenschriften ohnehin nicht mehr auf.

Wir fassen zusammen:

• Bei geringer Auflösung und ohne Anti-Aliasing (etwa bei Monochrom-Darstellung auf einfachen Steuergeräten): serifenlose Schrift verwenden, kursive Darstellungen vermeiden.
• Bei geringer Auflösung mit Anti-Aliasing-Techniken: serifenlose Schrift bevorzugen, weil sie weniger zu einer matschigen, unscharfen Darstellung neigt. Kursivdarstellungen können in Maßen eingesetzt werden, möglichst aber nicht bei kleinen Schriftgrößen.
• Hohe Auflösung: Bezüglich der Auflösungs- und Schärfeaspekte gibt es keine Einschränkungen mehr. Gerade wenn Fließtexte gestaltet werden müssen, kann deshalb ohne Probleme auch eine Serifenschrift verwendet werden.

Prägnante Worthüllen erzeugen

Zu Beginn des Kapitels haben wir darauf hingewiesen, dass Lesen ein schnelles Erkennen von Wortbildern beinhaltet. Dabei geht es nicht um die einzelnen Buchstaben, sondern um die äußere Form, den Umriss des Worts, den wir „Worthülle“ nennen. Die Prägnanz einer solchen Worthülle speist sich vor allem aus dem oberen Teil des Geschriebenen.

Die Abbildung zeigt jeweils zweimal dasselbe Wort, einmal in gemischter Schreibweise (1. Zeile) und einmal ausschließlich in Großbuchstaben (2. Zeile). Links wird in beiden Fällen die obere Hälfte der Buchstaben verdeckt, sodass nur der untere Teil sichtbar ist. Sowohl das gemischt geschriebene als auch das groß geschriebene Wort sind schwer zu lesen. Auf der rechten Seite ist wieder das gleiche Wort abgebildet, nur ist dieses Mal die untere Hälfte abgedeckt. Es fällt auf, dass im Fall der gemischten Schreibweise das Wort „Wortbild“ relativ leicht zu lesen ist. Bei der ausschließlichen Nutzung von Großbuchstaben, in der Typographie „Versalien“ genannt, ist dies nicht so einfach möglich, obwohl flächenmäßig deutlich mehr von den Buchstaben zu sehen ist. Eine Darstellung in Versalien erfordert im Durchschnitt 35 % mehr Fläche, verringert aber die Lesbarkeit um 12 %. Es empfiehlt sich daher, auf reine Großschreibung zu verzichten und stattdessen eine gemischte Groß- und Kleinschreibung zu verwenden. Auch auf Kapitälchen, also die Verwendung von größeren Versalien für die großen Buchstaben und kleineren Versalien für die kleinen Buchstaben sollte man aus demselben Grund verzichten.

Leichtere Lesbarkeit bedeutet in erster Linie, dass der Prozess des Hypothesenbildens schneller erfolgen kann, doch beinhaltet jede Einschränkung der sichtbaren Anteile, dass die Gefahr falscher Hypothesen steigt. In unserem Beispiel könnte das erkannte Wortbild auch für das Wort „Wertbild“ stehen. Nur wenn die verwendete Schrift über hinreichend Oberlängen verfügt, bei denen die Höhen von Buchstaben wie einem kleinen o und einem kleinen f oder einem großen M genügend voneinander abweichen, kann sich der Vorteil einer gemischten Groß- und Kleinschreibung voll entfalten. Dies ist bei den üblichen am Bildschirm verwendeten Schriftarten gegeben.

Wenn nötig, Schriften mit eindeutigen Zeichen wählen

In den meisten Schriftarten gibt es Buchstaben oder Sonderzeichen, die sich ähneln oder gänzlich gleichen. Beim Lesen stört das in der Regel nicht, da das einzelne Zeichen ohnehin nicht im Vordergrund steht oder sich das Zeichen im Kontext erklärt. Es gibt jedoch Situationen, bei denen die genauere Unterscheidbarkeit einzelner Zeichen und Buchstaben wichtig ist, etwa wenn Sie eine Seriennummer oder eine kryptische Artikelnummer eintippen müssen. Auch in der Programmierung ist es wichtig, denn in diesem Bereich werden vielfach Zeichenkombinationen eingegeben, bei denen eine korrekte Schreibweise unverzichtbar ist. Eine mangelhafte Unterscheidbarkeit zwischen einem O und einer 0 oder auch zwischen einer l und einem I verursacht ein erhebliches Maß an erzwungener Sequenzialität, um Mehrdeutigkeiten aufzulösen und mögliche Fehler zu reduzieren.

Hier sind verbreitete Schriftarten abgebildet, die in dieser Hinsicht problematisch sind. Zu sehen ist jeweils die Abfolge „Großes Ih“, „Kleines Ell“, „Eins“, „Großes Oh“ und „Null“. In „Arial“ ist ein kleines „Ell“ von einem großen „Ih“ nicht zu unterscheiden. Die auch in Programmier-Editoren verbreitete Schrift „Courier New“ hat eine sehr ähnliche Darstellung des kleinen „Ell“ und der Zahl Eins, die vor allem bei kleiner Darstellung am Bildschirm kaum zu unterscheiden sind.

Bei diesen Schriften hingegen sind die Buchstaben und Zahlen gut zu unterscheiden. In Situationen, in denen Eindeutigkeit wichtig ist, sind sie daher vorzuziehen. Doch auch wenn ein O und eine 0 verschieden gestaltet sind, kann es in der Nutzung zu Problemen kommen, wenn die Zeichen nicht gleichzeitig zu sehen sind. Je feiner die Unterschiede, desto größer ist die Verwechslungsgefahr. Je mehr die Identität eines Zeichens nicht über den unmittelbaren Lesekontext bestimmbar ist, desto prägnanter sollten sich die verwendeten Zeichen unterscheiden, wenn eine sichere Erkennung entscheidend ist. Dazu ist die Konvention entwickelt worden, eine 0 mit einem zusätzlichen Schrägstrich zu versehen.

Ausrichtungen an Zeilen und Spalten

Nicht nur die Schriftwahl hat Einfluss auf die Lesbarkeit eines Textes. Ähnlich groß ist der Einfluss der Textausrichtung. Wichtig ist vor allem die linksbündige Ausrichtung. Sie hilft beim Lesen den Anfang der nächsten Zeile routiniert aufzufinden. Vor allem bei längeren Texten kann auch der rechte Rand ausgerichtet werden. Dann ist der Text im Blocksatz gesetzt.

Um diesen Blocksatz zu erzeugen, werden die Abstände zwischen den Worten und in geringerem Maße auch die Abstände zwischen den Buchstaben innerhalb der Worte vergrößert. Das funktioniert gut, wenn die einzelnen Zeilen nahezu die maximale Zeichenzahl enthalten. Bei kleinen Zeilenlängen und in Texten mit vielen langen Worten oder wenn eine Silbentrennung nicht möglich ist, kann es zu unterbesetzten Zeilen kommen. Die Folge ist eine Textdarstellung mit Löchern. Ein löchriger Text ist schlechter lesbar, denn Zwischenräume bzw. Abstände sind, wie wir im Abschnitt Anordnung noch zeigen, das wichtigste Mittel, Nicht-Zusammenhängendes voneinander abzusetzen. Die gespreizten Texte bringen durch die unnatürlichen und willkürlichen Abstände den Wahrnehmungsapparat gewissermaßen ins Stolpern und lenken dadurch von der eigentlichen Aufgabe ab.

Gestalten Sie also robust! Da bei der Wahl der Gestaltungsmittel für Text der eigentliche Textinhalt noch nicht durchgängig bekannt ist und auch nicht immer festgelegt werden kann, wie lang eine Zeile letztlich wird, empfiehlt es sich, auf Blocksatz zu verzichten und stattdessen linksbündigen Flattersatz zu verwenden.

Achtung: Auch wenn User Interface Builder, Stylesheet-Vorgaben oder auch Textverarbeitungs- und Präsentationsprogramme es ermöglichen, laufenden Text zentriert in eine Zeile zu setzen, gibt es dafür letztlich nur einen Einsatzzweck: die Darstellung eines Gedichts. Das ist aber eine kulturelle Konvention und nicht ergonomisch begründet. Eine aus ästhetischen Gründen gewählte Symmetrie läuft der Lese-Ergonomie entgegen. Die Folgezeile beginnt jeweils an einer anderer Stelle und es fehlt eine Fluchtlinie zur Orientierung.

Wenig bis keinen Einfluss hat man in der Regel auf die vertikale Ausrichtung des Textes. Es versteht sich von selbst, dass nicht einzelne Buchstaben oder Worte aus der Zeile tanzen sollten. Solche Elemente würden den Lesefluss unterbrechen. Das automatische Ausrichten der Buchstaben auf einer Grundlinie erzeugt für das Auge eine Fluchtlinie, der es beim Lesen folgen kann. Diese Unterstützung der Zeilenführung kann durch die Schriftwahl unterstützt werden.

Bei der Verwendung von Serifenschriften erzeugen die Serifen eine gut sichtbare Grundlinie (rechts). Serifenlose Schriften erzeugen diese sichtbare Grundlinie nicht oder nur in geringerem Maße (links). Bei kurzen Texten, die nur aus wenigen Worten bestehen (zum Beispiel Feld- oder Buttonbeschriftungen), spielt diese Unterstützung nur eine sehr kleine Rolle. Wenn längere Texte zum Lesen angeboten werden, kann der Einsatz einer Schriftart mit Serifen das Lesen vereinfachen, wenn die oben erläuterten Bedingungen gegeben sind.

Zeilenhöhen und Abstände

Gerade bei der Wahl der Zeilenabstände werden beim Webdesign oft Fehler gemacht. Der Zeilenabstand ist der Abstand zwischen der Grundlinie einer Zeile und der Grundlinie der Zeile darüber oder darunter. Der entstehende Platz zwischen den Zeilen wird „Durchschuss“ genannt. Zeilenabstände werden üblicherweise als Faktor der Schrifthöhe angegeben. Zu geringer Zeilenabstand macht den Text schwerer lesbar, da beim Suchen der nächsten Zeile schnell eine falsche ausgewählt wird. Ein zu großer Abstand dagegen sorgt dafür, dass die Zeilen als unzusammenhängend empfunden werden und dadurch nicht mehr der Eindruck eines Fließtextes entsteht. Der Standardfaktor für den Zeilenabstand ist 1,2. Wenn die Zeilen länger werden, kann man den Zeilenabstand bis auf etwa 1,5 erhöhen, um das Finden der nächsten Zeile zu erleichtern. Dieser Wert von 1,5 hat übrigens nichts mit dem „anderthalbfachen Zeilenabstand“ zu tun, der gelegentlich bei Gutachten, Qualifizierungsarbeiten oder Manuskripten verlangt wird und der vor allem dem leichteren Anbringen von Anmerkungen und Korrekturen dient. In diesem Fall ist nicht ein Zeilenabstand von 1,5, sondern das 1,5-fache des normalen Abstands gemeint, also etwa ein Zeilenabstand von 1,2*1,5=1,8.

Ligaturen vermeiden

In der Typographie gibt es zur Erhöhung der Lesbarkeit eine Vielzahl kleiner Kniffe, die jedoch ausgeprägte Kompetenzen im Schriftsetzen erfordern. Wie schon mehrfach erwähnt, spielt auch hier wieder eine Rolle, dass der anzuzeigende Text nutzungsabhängig ist und sich deshalb eine robuste Gestaltung empfiehlt, bei der potenziell weniger Komplikationen auftreten können. Zu den Besonderheiten, die in der Praxis der Textgestaltung jedoch zu bedenken sind, gehören die sogenannten „Unterschneidungen“ und, eng mit ihnen verbunden, die „Ligaturen“.

Ungleiche Abstände zwischen Buchstaben sorgen für eine Unterbrechung im Lesefluss. Die Buchstaben sollten also gleich weit voneinander entfernt sein. Betrachten Sie einmal die Buchstabenfolge AVE auf der linken Seite. Der Abstand zwischen A und V ist technisch genau so groß wie der zwischen V und E. Optisch scheint es aber einen übergroßen Abstand zu geben. Dieser Eindruck kommt daher, dass zwei Buchstaben ungeschickt aufeinandertreffen. Das A läuft unten nach rechts aus, das V oben nach links. In der Folge sind die beiden parallelen Linienzüge des A und des V sehr weit voneinander entfernt. Dieses Problem lässt sich durch Unterschneidung lösen, die bei der rechts stehenden Buchstabenfolge angewandt worden ist. Die linke Begrenzung des V befindet sich links von der rechten Begrenzung des A. In der Konsequenz rücken die Parallelen näher zueinander, der optische Buchstabenabstand ist ausgeglichen. Damit eine solche Unterschneidung funktioniert, müssen sowohl Betriebssystem bzw. Browser als auch die Schriftart selbst dies unterstützen. Das ist heute meist der Fall und in der Regel unproblematisch.

Auch in diesem Beispiel gibt es eine Unterschneidung. Das f reicht oben in den Bereich des r hinein. Dadurch wird verhindert, dass zwischen dem f und dem r eine optische Lücke erscheint.

Die Kombination fr ist unproblematisch, doch folgt auf das f ein Buchstabe wie i oder l, kommt es zu Überlappungen. Um das zu vermeiden, werden im Druck sogenannte Ligaturen (deutsch: Verbindungen) eingesetzt. Die Kombination aus f und l oder f und i wird jeweils zu einer Ligatur, also zu einem gemeinsamen Zeichen verschmolzen. Wie die nachfolgende Abbildung zeigt, gibt es jetzt keine unschönen Überlappungen mehr:

Am Bildschirm erweisen sich Ligaturen leider als Problem. Man kann den Computer die Ligaturen zwar automatisch einsetzen lassen, doch leider sind die Regeln für den Einsatz von Ligaturen, gerade im Deutschen, nicht einfach. Sie werden, mit wenigen Ausnahmen, nur dann gesetzt, wenn beide Buchstaben Teil der gleichen Silbe sind. Alle uns bekannten Textverarbeitungssysteme, Browser und Betriebssysteme, machen dies momentan falsch.

Hier sehen Sie das Problem: Beim Wort „Dachfirst“ ist die Ligatur richtig, bei „Kaufinteresse“ jedoch nicht, da das f und das i nicht zur gleichen Silbe gehören, denn es heißt ja nicht „Kau-Finteresse“. Ein guter Setzer würde statt der Ligatur die einzelnen Buchstaben setzen, aber auf die Unterschneidung verzichten, also dafür sorgen, dass sich f und i nicht berühren.

Um typographisch richtig zu schreiben, ist in diesem Fall also nicht nur Wissen über die Buchstaben und Zeichen, sondern auch über die Sprache erforderlich. Angesichts unvorhersehbarer Nutzungskonstellationen sind fehlerhafte Ligaturen kaum zu vermeiden und sollten daher im Sinne einer robusten Gestaltung nicht eingesetzt werden. Es gibt jedoch eine Ausnahme: Wenn man eine Schrift verwendet, in der keine Ligaturen benötigt werden.

In der gezeigten Schriftart „Liberation Serif“ sind keine Ligaturen nötig, da das f nur einen kleinen Bogen hat und nicht in den Bereich des folgenden Buchstabens hineinreicht. Auch die Kombination fi ist in dieser Schriftart unproblematisch, da der Bogen des f nicht in einem Tropfen, sondern in einer Serife endet. Diese Schrift eignet sich deshalb auch für den Einsatz am Bildschirm, beispielsweise wenn ein längerer Text in einer Serifenschrift angezeigt werden soll. Allgemein gute Kandidaten zur Vermeidung der genannten Probleme sind aber die serifenlosen Schriften, denn die meisten von ihnen verfügen nicht über Ligaturen. Aufgrund der fehlenden Serifen und Tropfen sind sie nicht notwendig.

Interessanterweise sind auch serifenlose Schriften entworfen worden, die Ligaturen enthalten. Das gilt zum Beispiel für die oben abgebildete Schriftart „Calibri“ von Microsoft. Zu sehen sind die Ligaturen bei fi, tt und fl. In der unteren Zeile sind diese Ligaturen ausgeschaltet, ohne dass es zu Beeinträchtigungen der Lesbarkeit kommt.

Zusammengefasst: Gestalten Sie robust! Um Irritationen durch überlappende Buchstaben oder durch falsche Ligaturen zu vermeiden, wählen Sie eine Schriftart, die aufgrund ihrer Gestaltung keine Ligaturen braucht. Mit serifenlosen Schriften sind Sie auf der sicheren Seite. Falls eine Schrift eingesetzt werden soll, die über Ligaturen verfügt, schalten Sie diese aus, falls eine solche Einstellung möglich ist.

Schriftwahl – Quintessenz

Ältere Ratgeber zur Schriftwahl am Bildschirm raten in der Regel zu serifenlosen Schriften, um den Treppeneffekt zu vermeiden und so die Lesbarkeit zu erhöhen. Dieser Effekt spielt aufgrund höherer Auflösungen und Farbtiefen heute an Computerbildschirmen keine so große Rolle mehr. Trotzdem empfehlen wir in den allermeisten Fällen aufgrund der nachfolgend aufgeführten Gründe die Verwendung serifenloser Schriften:

• Auf niedrigauflösenden Bildschirmen ist auch mit Techniken wie Anti-Aliasing die Darstellung von serifenlosen Schriften nach wie vor klarer als die von Serifenschriften.
• Serifenlose Schriften verursachen aufgrund des mit ihnen einhergehenden Verzichts auf dünne Linienführungen weniger Probleme mit Überstrahlungen. Dieser Effekt, bei dem helle Bereiche des Bildes in dunkle Bereiche hineinstrahlen, verliert zwar auch zunehmend an Bedeutung, tritt aber noch in vielen Fällen auf.
• Die Vorteile von Serifenschriften entfalten erst bei längeren Texten ihre Wirkung, die in der Nutzungsschnittstelle kaum auftreten.
• Bei serifenlosen Schriften sind weniger typographische Besonderheiten zu bedenken.

Nur in dem Fall, dass längere Texte dargestellt werden sollen und eine ausreichend hohe Auflösung sichergestellt werden kann, ist es auch am Bildschirm sinnvoll, eine Serifenschrift zu verwenden. In diesem Fall sollte allerdings ein Satzsystem im Hintergrund dafür sorgen, dass Ligaturen gegebenenfalls richtig angewandt werden.

Text auszeichnen

Im vorherigen Kapitel haben Sie erfahren, wie aus einer Vielzahl von Objekten einzelne herausgestellt werden können. Die dort vorgestellten Techniken dienten dazu, auf den Status von Objekten aufmerksam zu machen oder diese als markiert oder inaktiv darzustellen. Auch Text kann ausgezeichnet werden. Es gibt dazu eine Reihe von Techniken, von denen aber eine Vielzahl aus einer anderen Zeit stammt und mit anderen Technologien umgesetzt worden ist. Sie sollten am besten nicht oder nur sehr sparsam eingesetzt werden.

• Text fett setzen: Diese Art der Auszeichnung eines Textes ist sehr effektiv und kann bei sparsamem und bedachtem Einsatz die Orientierung am Bildschirm sehr erleichtern. Um die allgemeine Ruhe des Textbildes nicht zu sehr zu stören, sollte die Deckkraft des Textes bei Fettschrift ein wenig herabgesetzt werden.
• Text kursiv setzen: Kursiv gesetzter Text ist weniger aufdringlich. Üblicherweise wird solcher Text als Betonung interpretiert. Beachten Sie bei der Verwendung von kursivem Text die angesprochenen Einschränkungen bei geringer Bildschirmauflösung.
• Text unterstreichen: Text zu unterstreichen ist heute veraltet. Es handelt sich um eine Technik aus der Schreibmaschinennutzung, bei der man die Schrift nicht anpassen konnte und somit eine Hervorhebung durch späteres händisches Unterstreichen vornahm. Achtung: Unterstrichene Texte werden heute allgemein als Hyperlinks interpretiert! Unterstreichen Sie auf keinen Fall Text, der kein Link ist!
• Text sperren: Sperren bedeutet, den Abstand zwischen den Buchstaben zu erhöhen. Diese Technik, vor allem in ihrer einfachen Umsetzung durch das Einfügen von Leerzeichen zwischen den Buchstaben, ist ebenfalls eine Technik aus der Schreibmaschinenzeit. Gesperrter Text ist zwar auffällig, allerdings schwer zu lesen.
• Text in Versalien oder Kapitälchen: Bei der Verwendung von Versalien (Großbuchstaben) oder Kapitälchen (kleinere Großbuchstaben anstelle der Kleinbuchstaben) verschenken Sie das Potenzial einer prägnanten Worthülle. Die Lesbarkeit sinkt also. Kapitälchen können als Titel gut aussehen, eine Schreibung komplett in Großbuchstaben wirkt jedoch sehr aufdringlich.
• Abgewandelte Schriftgrößen: Auf keinen Fall sollten Sie innerhalb des Fließtextes die Schriftgröße ändern. Das Schriftbild wird dadurch unruhig und schwer lesbar. Auch die Zeilenabstände sind dann ungleich. Die Verwendung verschiedener Schriftgrößen ist aber eine gute Möglichkeit zur Verdeutlichung von Hierarchieebenen, etwa in Überschriften.
• Abgewandelte Schriftarten: Einen Schriftartenwechsel im Fließtext sollten Sie unbedingt vermeiden. Generell sollten Sie sich bei der Anzahl der Schriftarten in der Nutzungsschnittstelle sehr zurückhalten.

Farbe zur Textauszeichnung

Farbe haben Sie im vorherigen Kapitel bereits als gutes Gestaltungsmittel zur Auszeichnung kennengelernt. Farbe kann auch genutzt werden, um Text auszuzeichnen. Schwierig ist aber – vor allem bei Positivdarstellung – Buchstaben einzufärben. Dies zeigt sich auf obiger Abbildung vor allem in Spalte 2. Dunkle Farben wie dunkelblau und dunkelgrün sind gut lesbar, allerdings sind sie in ihrer Farbigkeit nicht mehr gut zu unterscheiden, vor allem nicht bei schnellem Hinsehen. Hellere Farben sind auffälliger, jedoch leidet die Lesbarkeit des Textes. Eine Ausnahme ist das voll gesättigte Rot, das Sie aber nur im Notfall einsetzen sollten.

In Spalte 3 wurden genau die gleichen Farben wie in Spalte 2 genutzt. Allerdings wurde diesmal der Hintergrund des Textes eingefärbt. In diesem Fall gibt es keine Probleme mehr, die Farbigkeit zu erkennen. Es tritt jedoch der Wahrnehmungseffekt ein, dass farbige Flächen erheblich stärker gesättigt wirken als kleine farbliche Strukturen. Sie können das ausgleichen, indem Sie die Sättigung der Farben, wie in Spalte 4, stark reduzieren und somit den Ablenkungscharakter mindern, ohne dass die Erkennbarkeit der farblichen Auszeichnung leiden würde.

Wenn Text farblich ausgezeichnet werden soll und eine Auszeichnung des Hintergrunds nicht in Frage kommt, wie zum Beispiel beim „Syntax Highlighting“ in der Programmierung, kann die Negativdarstellung wie in Spalte 1 eine gute Lösung verkörpern. Die Einfärbung des Textes ist in einer Negativdarstellung deutlich besser umsetzbar. Hellgrün, orange und hellblau sind sowohl gut erkennbar als auch gut lesbar. Dabei sollten jedoch die zu Beginn diskutierten Nachteile einer Negativdarstellung berücksichtigt werden, wie zum Beispiel die unterschiedliche Fokussierung bei Astigmatismus, die immerhin 50 % aller Menschen betrifft.

Nicht vergessen werden sollten schließlich unsere Hinweise zu Farbfehlsichtigkeiten. Die Nutzbarkeit einer Schnittstelle sollte nie nur von der Einfärbung eines Textes abhängig sein, sondern auch weitere Auszeichnungsarten vorsehen. Zu erwägen wäre auch, ein Möglichkeit vorzusehen, das gewählte Farbschema zur Nutzungszeit verändern zu können.