Typografische Grundlagen zur Gestaltung mit Schrift Im Internet

Typografie

Allgemeine Regeln & Begriffsdefinitionen zur Detail- und Makroypografie im Kontext unterschiedlichen Medien.

20. Oktober, 2013

In der Typografie wird zwischen den Schriftarten Antiqua und Grotesk unterschieden. Antiquaschriften sind im Wesentlichen dadurch gekennzeichnet, dass sie Serifen haben.

Dies sind häkchenartige Erweiterungen an den Enden der Buchstaben, die in der Regel die Lesbarkeit verbessern. Deshalb finden Antiquaschriften in Druckmedien bevorzugt Verwendung. Wegen dieses sehr entscheidenden Merkmals werden Antiquaschriften auch Serifenschriften genannt. Ein weiteres Merkmal der Serifenschriften sind ihre Unterschiede in den Strichstärken innerhalb eines Buchstaben. Dadurch sind sehr schmückende Schriftgestaltungen möglich, die allerdings bisweilen auch als schnörkelhaft empfunden werden können. Es sei hier noch die serifenbetonte Linearantiqua erwähnt, bei der, wie die Bezeichnung bereits vermuten lässt, die Serifen sehr betont sind und sich zudem die Strichstärken innerhalb eines Buchstaben nur gering oder gar nicht unterscheiden. Diese Schriftart wird häufig als Auszeichnungsschrift verwendet. Als solche kann sie gut für Druckmedien eingesetzt werden und ab bestimmten Schriftgrößen auch für selbstleuchtende Medien (vgl. ›Text und selbst leuchtende Medien‹).

Serifen

Serifen

Antiquaschriften

Antiquaschriften

Serifenbetonte Linearantiqua

Serifenbetonte Linearantiqua

Groteskschriften, auch serifenlose Linearantiqua genannt, sind, wie die Ergänzung vermuten lässt, serifenlose Schriften. Sie weisen nur sehr geringe oder gar keine Unterschiede in den Strichstärken auf.

Groteskschriften, serifenlose Linearantiqua

Groteskschriften, serifenlose Linearantiqua

Um sich für die geeignete Schriftart entscheiden zu können, sind die ergonomischen Aspekte des Darstellungsmediums genauso zu berücksichtigen, wie die Nutzungsgewohnheiten, die eine jeweilige Zielgruppe mit dem entsprechenden Darstellungsmedium in Verbindung bringt. Aber selbst- verständlich sind auch die Absichten, die mit den Textinhalten, aber auch durch die Gestaltung mit Typografie erreicht werden sollen, zu bedenken.

Schriftarten können zielgruppen- bzw. themenspezifisch gestaltet oder ausgewählt werden.

Schriftarten können zielgruppen- bzw. themenspezifisch gestaltet oder ausgewählt werden.

Für Druckmedien stehen, auf Grund der hohen Auflösung, alle Gestaltungsmöglichkeiten mit Typografie zur Verfügung. Es lassen sich sehr filigrane Details darstellen, selbst dann, wenn die Schriftgröße sehr klein gewählt wurde.

Beim Screen- und Interfacedesign sind die Möglichkeiten der typografischen Gestaltung hingegen erheblich eingeschränkt, wenn für Darstellungsmedien gestaltet wird, deren Auflösung in der Regel nicht mehr als 72 bzw. 96 dpi beträgt. Serifenschriften sind insbesondere dann ungeeignet, wenn nur in einer relativ geringen Auflösung dargestellt werden kann und die Darstellungsmedien zudem selbstleuchtende bzw. hintergrundbeleuchtete Medien sind. Die geringe Auflösung kann zum Ausreißen feiner Strichstärken führen. Und der Umstand, dass diese Wiedergabemedien selbst leuchten, kann zum Überstrahlen der dünnen Strichstärken führen. Besonders dann, wenn der Helligkeits- und Buntkontrast zwischen Schrift und Hintergrund nicht ausgewogen ist. Bereits dieser Umstand kann zu einer übermäßigen Belastung der Augen des Betrachters führen. Je nach Darstellungstechnologie kommt eventuell noch ein Flimmern hinzu, bedingt durch Wiederholungsfrequenzen des Bildaufbaus, z. B. bei Röhrenmonitoren. Für die Darstellung auf Bildschirmen sind speziell entwickelte Screenfonts bzw. Pixelschriften geeignet, da deren Strichstärken gleichmäßig auf die Abstände und Winkel der Rasterdarstellungen abgestimmt und jeweils für die passende Schriftgröße entwickelt sind.

Je nach Darstellungsmedium und Darstellungstechnologie sind bestimmte Schriftschnitte besser oder weniger gut geeignet. Grundsätzlich sind serifenlose Schriften für die Darstellung von Texten an selbstleuchtenden Medien gut geeignet. Erst ab einer bestimmten Schriftgröße, sobald die Strichstärken groß genug sind, um nicht überstrahlt zu werden, lassen sich auch Serifenschriften gut lesbar einsetzen. Serifenschriften sollten dann aber nicht im Fließtext, sondern in erster Linie für Überschriften Anwendung finden.

Da man für HTML-basierte Publikationen im Internet eigentlich nie sicher sein kann, welche Schriftarten auf dem Computer des Anwenders installiert sind, eignen sich besonders jene für die Gestaltung von Internetseiten, die beim Installieren der jeweiligen Betriebssysteme als Systemschriften mitgeliefert werden. Die Lucida Grande ist z. B. eine nicht deaktivierbare Systemschrift von Mac OS X. Dasselbe gilt für die Tahoma bei den Windows-Betriebssystemen. Ansonsten sind Arial, Times New Roman und Courier New weit verbreitete Schriftarten auf den beiden Systemen Windows und Mac. Attraktive Alternativen zu Arial, Times und Courier sind die Georgia, Trebuchet MS, Verdana, Vera Sans, Vera Sans Mono und Vera Serif.

Es ist zu empfehlen, über das HTML-Script ein bis zwei Alternativschriftarten anzugeben, die automatisch dargestellt werden, sobald die erstgenannte Schriftart nicht auf dem Computer des Anwenders installiert ist. Interessante Schriften, insbesondere Screenfonts, sind u.a. im Internet zu finden unter http://fontsforflash.com und http://dafont.com.

Screenfonts, auch Pixelschriften genannt, sind jeweils für die passende Schriftgröße entwickelt. Das heißt, eine 8-Punkt- Schrift ist für diese Größe bzw. für ein Vielfaches dieser Größe bestimmt. Zur Darstellung muss das Antialiasing ausgeschaltet sein. Silverscreen von Alex Schumacher, © 2005 www.typotaurus.de

Screenfonts, auch Pixelschriften genannt, sind jeweils für die passende Schriftgröße entwickelt. Das heißt, eine 8-Punkt- Schrift ist für diese Größe bzw. für ein Vielfaches dieser Größe bestimmt. Zur Darstellung muss das Antialiasing ausgeschaltet sein. Silverscreen von Alex Schumacher, © 2005 www.typotaurus.de

Je nach Darstellungsmedium, Hintergrund und Schriftgröße können die geeigneten Schriftschnitte gewählt werden. Dünne, kursive und schmale Schriftschnitte sind in der Regel für eine Bildschirmdarstellung ungeeignet. Die Schrift muss schon relativ groß sein, damit die Linien im Pixelraster sauber dargestellt werden können. Sind die Schnitte zu fett, kann es passieren, dass die Buchstaben ineinander verlaufen.


Je nach Darstellungsmedium, Hintergrund und Schriftgröße können die geeigneten Schriftschnitte gewählt werden. Dünne, kursive und schmale Schriftschnitte sind in der Regel für eine Bildschirmdarstellung ungeeignet. Die Schrift muss schon relativ groß sein, damit die Linien im Pixelraster sauber dargestellt werden können. Sind die Schnitte zu fett, kann es passieren, dass die Buchstaben ineinander verlaufen. Je nach Darstellungsmedium, Hintergrund und Schriftgröße können die geeigneten Schriftschnitte gewählt werden. Dünne, kursive und schmale Schriftschnitte sind in der Regel für eine Bildschirmdarstellung ungeeignet. Die Schrift muss schon relativ groß sein, damit die Linien im Pixelraster sauber dargestellt werden können. Sind die Schnitte zu fett, kann es passieren, dass die Buchstaben ineinander verlaufen.

Pixelraster von Schriften ohne Serifen

Pixelraster von Schriften ohne Serifen

Pixelraster von Schriften mit Serifen

Pixelraster von Schriften mit Serifen

Typografie im Detail

Typografie im Detail

Auch wenn verschiedene Schriftarten in einer identischen, in Punkt gemessenen Schriftgröße abgebildet werden, können sie sich in ihrer dargestellten Größe dennoch sehr stark unterscheiden.

Auch wenn verschiedene Schriftarten in einer identischen, in Punkt gemessenen Schriftgröße abgebildet werden, können sie sich in ihrer dargestellten Größe dennoch sehr stark unterscheiden.

Proportionale und nicht proportionale Schrift

Bei einer nicht proportionalen Schrift, auch Monospaced Font genannt, hat jedes Schriftzeichen die gleiche Breite. Bei einer proportionalen Schrift hat jedes Schriftzeichen die horizontale Ausdehnung, die es tatsächlich benötigt. Daraus resultiert ein ausgeglichenes Schriftbild.

Die Courier ist eine Schriftart, die der Schreibmaschinenschrift nachgeahmt ist, weshalb die Buchstabenabstände alle identisch sind. Bei einer rein mechanischen Schreibmaschine wäre dies nicht anders möglich. Deswegen ist die Courier ein idealtypisches Beispiel für eine nicht proportionale Schrift. Die Zwischenräume zwischen den einzelnen Buchstaben sind ungeachtet ihrer eigenen Breite identisch, weshalb nicht proportionale Schriftarten auch Monospaced Fonts genannt werden (gleicher Zwischenraum).

Zu einem schmalen ›i‹ werden demnach dieselben Abstände eingehalten wie z. B. zu einem wesentlich breiteren ›C‹.

Proportionale Schriftarten zeichnen sich dadurch aus, dass sie je nach Buchstabenbreite unterschiedliche Zeichenbreiten aufweisen. Ein ›i‹ benötigt dementsprechend weniger Raum als ein ›O‹ (hier am Beispiel der Optima).

Nicht proportionale Schriftart, Monospaced Font, hier Courier New Regular.

Nicht proportionale Schriftart, Monospaced Font, hier Courier New Regular.

Proportionale Schriftart, hier Optima Roman.

Proportionale Schriftart, hier Optima Roman.

Antialiasing

Bei Schriften wird Antialiasing angewandt, um den Eindruck zu erwecken, die Ränder von Buchstaben seien glatt, was sie aber, bedingt durch die Rasterdarstellung an Bildschirmen, aber nicht sein können. Die Abstufung wird optisch durch einen Verlauf der Schriftfarbe abgeschwächt, der in die Hintergrundfarbe übergeht. Deshalb ist Antialiasing auch nicht bei allen Schriftgrößen, Hintergrundfarben und Strichstärken geeignet. Je kleiner die Schrift ist, um so eher kann bzw. sollte auf Antialising verzichtet werden. Die Schrift wird sonst zu unscharf. Sie wirkt dann übertrieben weich gezeichnet und verschwimmt. Bei Serifenschriften sollte Antialiasing erst dann eingesetzt werden, wenn die Strichstärke groß genug ist.

Bei den meisten Produktionen, die über selbstleuchtende Medien dargestellt werden, kann von Seiten des Gestalters festgelegt werden, ob und ab welcher Schriftgröße eine Schriftart geglättet dargestellt wird. Bei HTML-basierten Darstellungen, die über das Internet publiziert werden, hat er darüber aber nur einen reduzierten Einfluss. Die Eigenschaften der Schrift werden dann durch das Betriebssystem, den Browser und eventuell durch den Anwender selbst bestimmt, vorausgesetzt, er ist mit den Einstellungsmöglichkeiten seines Browsers vertraut.

Durch den Einsatz von CSS (Cascading Style Sheets), einer Formatierungssprache, wird es dem Gestalter von HTML-basierten Internetseiten allerdings ermöglicht, Schriftgröße, Schriftart, Spationierung und Zeilenabstand weitestgehend festzulegen. Will man ganz sicher gehen, dass die im Internet publizierten Textdarstellungen den eigenen Formatierungsvorgaben entsprechend abgebildet werden, kann man auf die Autoren-Software Flash zurückgreifen.

Antialiasing

Antialiasing

Zeilenabstand

Der Abstand der Zeilen zueinander sollte je nach der Länge der Zeilen entsprechend größer oder kleiner sein. Es geht dabei in erster Linie um die Lesbarkeit eines Textes. Ist der Zeilenabstand sehr gering, so scheinen sich die Zeilen zu berühren oder zu überlagern. Ist er zu weit, so werden die Zeilen nicht als zusammenhängend wahrgenommen. Der ideale Zeilenabstand liegt bei 100 % bis 150 % der Mittellänge des jeweiligen Schrifttyps. Hier lässt sich kein eindeutiger Wert nennt, da zu beachten ist, dass sich die Mittellänge verschiedener Schrifttypen auch dann unterscheiden, wenn die Versalienhöhe identisch ist (vgl. ›Mittellänge‹ und ›Versalienhöhe‹ in der Abbildung zu ›Schriftgrößen in Abhängigkeit von Darstellungsmedien‹).

Wie bedeutsam der Zeilenabstand für die Lesegeschwindigkeit ist, zeigt eine Studie von Psychologen an der Universität in Toronto, bei der das Lesen von Texten auf Fernseh-Röhrenmonitoren untersucht wurde. Sie ergab, dass die Anzahl der Buchstaben pro Zeile, die Anzahl der Zeilen selbst und deren Abstand zueinander einen größeren Einfluss auf die Lesegeschwindigkeit haben, als der Kontrast und der Abstand vom Bildschirm (http://psych.utoronto.ca).

Zeilenabstand (Beispiel 1)
Zeilenabstand (Beispiel 2)
Zeilenabstand (Beispiel 3)
Zeilenabstand (Beispiel 4)

Spaltenbreite

Je nachdem, auf welchem Medium der Text abgebildet wird, welcher Schrifttyp und welche Schriftgröße gewählt wurde, ergibt sich das geeignete Maß für die Spaltenbreite. Grundsätzlich gilt aber, dass sieben bis zehn Worte pro Zeile eine gut lesbare Spalte ergeben.

Durch eine zu lange Zeile kann der Wechsel zur nächsten beeinträchtigt werden und durch eine zu kurze Zeile wird der Text schwer lesbar. Außerdem wirkt das Schriftbild dann sehr unruhig.

Spaltenbreite (Beispiel 1)
Spaltenbreite (Beispiel 2)
Spaltenbreite (Beispiel 3)


Zum Anfang der Seite