10.5    Makrotypografie 

Die Typografie ist Teil des Gestaltungsprozesses mit Schriften, Bildern, Flächen, Linien und Farben. Sie beschränkt sich aber nicht nur auf die Auswahl einer oder mehrerer Schriftarten, sondern umfasst Aspekte, die für die Wirkung der Gestaltung elementar sind. Die Typografie lässt sich in zwei große Bereiche einteilen.

1. Makrotypografie: Bei der Makrotypografie geht es um die Gesamtgestaltung mit Typografie.

2. Mikrotypografie: Bei der Mikrotypografie geht es um die Feinheiten, etwa den Aufbau einzelner Buchstaben.

Die Makrotypografie setzt sich mit der gesamten Konstruktion der typografischen Gestaltung auseinander. Dies beginnt schon mit der Auswahl des Formats (siehe Kapitel 6, »Gestaltungsgrundlagen«). Dazu kommen die Zeilenlänge, Seitenaufteilung, Textgliederung, Schriftart, -größe, -farbe, Textausrichtung und sonstige Auszeichnungselemente und redaktionellen Informationsbereiche (Überschriften, Fließtexte, Listen, Infokästen, Fußnoten etc.). Diese Elemente prägen den Gesamteindruck der Webseite entscheidend mit. Diese Elemente sorgen dafür, wie »attraktiv« der Text erscheint. Macht sich der Betrachter die Mühe, ihn lesen zu wollen? Und wenn ja, wie gut kann er ihn dann auch lesen? Es geht um das Arrangement aller typografischen Elemente, daher hat Makrotypografie auch viel mit dem zu tun, was man auch Layout nennt (siehe Kapitel 8, »Layout und Raster«). Gerade Newsseiten sind ein schönes Beschäftigungs- und Erkundungsfeld für die makrotypografische Gestaltung, so wie faz.net und sueddeutsche.de es in Abbildung 10.48 zeigen.

Abbildung 10.48    Die Makrotypografie ist für den ersten Eindruck mitentscheidend, den der Anwender von einer Webseite bekommt (von oben nach unten: faz.net und sueddeutsche.de). Hier wurden bewusst die Bilder entfernt, um die Makrotypografie zu verdeutlichen.

Die Aufteilung einzelner typografischer Komponenten erfolgt in der Literatur nicht immer ganz eindeutig in die Bereiche Makro- oder Mikrotypografie. Die folgenden Abschnitte könnten also zum Teil auch in den jeweils anderen Bereich passen. Wichtiger aber als die konkrete Unterteilung in einen der beiden Abschnitte ist das Verständnis der einzelnen Gestaltungselemente.

 

10.5.1    Liniensystem 

Vielleicht kennen Sie es noch aus Ihrer Schulzeit: schreiben lernen anhand von Linien. Genauso lassen sich digitale Buchstaben in ein Liniensystem bringen. Mehrere horizontale Linien kennzeichnen einzelne Bereiche der Buchstaben.

Abbildung 10.49    Das Liniensystem der Typografie

Die Basis bildet die Grundlinie, manchmal auch Schriftlinie genannt, auf der die Buchstaben stehen. Das nächste wichtige Maß nach oben ist die Mittellänge. Sie gibt die Höhe der Kleinbuchstaben an und wird auch x-Höhe genannt, weil sie nach der Höhe das kleinen x bestimmt wird. Es folgt die Versalhöhe (Versalien = Großbuchstaben), die durch die Größe der Großbuchstaben bestimmt wird. In vielen Schriften ragen einige Kleinbuchstaben (z. B. h und l) über die Versalhöhe hinaus. Dies wird als Oberlänge bezeichnet.

Abbildung 10.50    Buchstaben auf Grundlinie, kommt einem irgendwie bekannt vor…

Unterhalb der Grundlinie gibt es dann noch die Unterlänge, die durch Kleinbuchstaben wie g, p und q bestimmt wird. Die Schriftgröße setzt sich aus der Ober-, Mittel- und Unterlänge plus einen kleinen Zuschlag zusammen. Die Schriftgröße, oft auch Schriftgrad genannt, ist also immer etwas größer als die Buchstabengröße.

 

10.5.2    Schriftschnitte 

Ein Schriftschnitt bezeichnet eine Variation einer Schriftart. Dabei kann die Schriftstärke, die Schriftbreite (Laufweite) oder die Schriftlage verändert werden. Die verschiedenen Schnitte ergeben zusammen eine Schriftfamilie. Standardmäßig hat fast jede Familie einen fetten und einen kursiven Schriftschnitt.

Mit Schriftschnitten lassen sich Inhalte einerseits semantisch kennzeichnen, aber vor allem auch optisch hervorheben. Unterschiedliche Schnitte sind oft besser geeignet, Abwechslung in die typografische Gestaltung zu bringen, als beispielsweise andere Schriftarten, -farben oder -größen. Denn die verschiedenen Schnitte einer Schriftfamilie sind aufeinander abgestimmt, wirken harmonisch zusammen und bringen oft nur einen dezenten Unterschied in die Gestaltung.

Abbildung 10.51    Gelungenes Spiel aus zwei Schriftarten und verschiedenen Schnitten, superreal.de

Mit der bewussten Auswahl verschiedener Schriftschnitte lässt sich ein Webdesign aber auch sehr abwechslungsreich gestalten. few.io (Abbildung 10.52) verwendet zwar nur eine Schriftart (die Brandon Grotesque), durch die Variation verschiedener Schnitte gelingt aber dennoch eine abwechslungsreiche typografische Gestaltung.

Abbildung 10.52    Auf kleinstem Raum mit drei Schriftschnitten die Informationen klar strukturiert, few.io zeigt, wie es gehen kann.

Tabelle 10.1    Schriftschnitte

Tabelle 10.2    Schriftstärke

Es gibt Schriftfamilien, die sich aus über hundert Schnitten zusammensetzen. Dies ist sicherlich die Ausnahme, und gerade bei Schriftfamilien fürs Web sind, wenn überhaupt, wenige Schnitte die Regel. Für die Bezeichnung der Schnitte gibt es deutsche und englische Bezeichnungen und manchmal auch noch weitere Synonyme. Tabelle 10.1 bis Tabelle 10.3 geben einen Überblick über die Bezeichnung der Schriftschnitte.

Abbildung 10.53    Sehr viele Schnitte: die Neue Helvetica bei Linotype. linotype.com/de/1266/NeueHelvetica-schriftfamilie.html

Tabelle 10.3    Schriftbreiten

Fett und kursiv | Neben dem »normalen« Schnitt werden am häufigsten kursiver und fetter Schnitt eingesetzt. Ein Grund dafür mag in den Textverarbeitungsprogrammen liegen, die es mit einem Klick ermöglichen, Text fett oder eben kursiv zu machen.

In HTML gibt es für die Umsetzung dieser beiden Schnitte jeweils zwei Möglichkeiten: strong und b sowie em und i. Die Unterschiede liegen jeweils in der Semantik, logisch, denn HTML ist ja semantisches Auszeichnen. Das i-Element soll laut W3C-HTML5-Richtlinie für besondere Fachausdrücke oder taxonomische Bezeichnungen eingesetzt werden, das em-Element dagegen, um Textpassagen besonders zu betonen. Die optische Wirkung ist bei beiden erst einmal die gleiche, ließe sich aber mit CSS verändern.

Ähnlich verhält es sich mit strong und b. Mit dem b-Element sollen Schlüsselwörter oder Eigennamen hervorgehoben werden. Mit dem strong-Element soll ein besonders wichtiger Inhalt markiert werden. Auch hier ist die optische Umsetzung im Browser gleich.

Zu unterscheiden sind beispielsweise echte kursive Schriftschnitte von elektronisch schräg gestellten Schriften. Echte kursive sind eigens entworfene Schriftschnitte. Bei elektronisch erzeugten werden die normalen Schriftschnitte schräg gestellt, was für ein leicht verzerrtes Schriftbild sorgt:

Abbildung 10.54    Der Unterschied ist offensichtlich zwischen einem echten kursiven und einem schräg gestellten normalen Schriftschnitt.

Schriftschnitte in HTML & CSS | Wer aus dem Printbereich kommt, ist durch die breite Auswahl an Schriftschnitten verwöhnt. Bei den Systemschriften sind die Arial und Arial Black fast schon das höchste der Gefühle. Die Webfonts bieten da häufig schon eine größere Auswahl an. Als Beispiel sei hier die Exo 2 der Google Fonts erwähnt. Diese steht in 18 unterschiedlichen Schnitten zur Verfügung, wodurch der Webdesigner ausreichend typografischen Gestaltungsspielraum hat.

Die Schriftlage lässt sich per CSS mit der Eigenschaft font-style verändern. Mögliche Werte sind normal, italic oder oblique. italic stellt die Schrift in einem kursiven Schnitt dar, während oblique den Browser veranlasst, den Text schräg zu stellen. Und normal ist die Voreinstellung und stellt die Zeichen aufrecht dar bzw. bringt Text wieder in den normalen Schnitt, wenn vorangegangene Deklarationen diesen kursiv setzten. So werden Überschriften vom Browser automatisch fett dargestellt. Mit der Anweisung font-weight: normal; kann die Überschrift wieder »normal« aussehen.

Um die Schriftstärke zu verändern, gibt es die CSS-Eigenschaft font-weight. Neben den Werten normal, bold, bolder, light und lighter kann man auch Zahlenwerte in Hunderterschritten von 100 bis 900 eingeben – sofern die entsprechenden Schriftschnitte existieren. Je größer der Zahlenwert, umso fetter der Text. 400 entspricht normal und 700 bold.

Eine exemplarische Schriftdefinition könnte also folgendermaßen aussehen:

font-family: 'Exo 2', sans-serif;
font-style:italic;
font-weight: 200;

Listing 10.4    Schriftdefinition einer Google-Fonts-Schriftart

Als typografisches Gestaltungsmittel eignen sich Schriftschnitte besonders gut. Bei der Auswahl geeigneter Webfonts heißt es also auch, darauf zu achten, ob diese in verschiedenen Schnitten vorliegen. Je mehr Schnitte eingesetzt werden, umso mehr Daten müssen allerdings auch geladen werden. Daher sollten immer nur die Schnitte eingebunden werden, die später auch wirklich eingesetzt werden. Die Anweisungen per font-style oder font-weight sind rein optischer Natur. Soll das Element auch semantisch hervorgehoben werden, muss es mit den HTML-Elementen (wie em oder strong) ausgezeichnet werden.

 

10.5.3    Schriftgröße 

Die Schriftgröße gibt die Höhe der Schrift an, und zwar gemessen von der Ober- bis zur Unterlänge.

Abbildung 10.55    Die Schriftgröße umfasst die Ober-, Mittel- und Unterlänge.

Vor allem im klassischen DTP-Bereich gibt es die Unterscheidung zwischen Schriftgröße und Schriftgrad. Umgangssprachlich werden die beiden Begriffe oft gleichgesetzt, und daher verzichte ich hier darauf, die feinen Unterschiede zu erwähnen.

Die Schriftgröße sagt aber noch nichts über den optischen Eindruck der Höhe aus. Zwei Schriftarten mit der gleichen Schriftgröße können unterschiedlich groß wirken.

Abbildung 10.56    Drei Schriftarten, gleiche Schriftgröße, aber unterschiedliche Größenwirkung

Die Wahl der Schriftgrößen ist also unmittelbar von der gewählten Schriftart abhängig. Auf Standardgrößen kann man daher nur bedingt zurückgreifen.

Abbildung 10.57    Systemschriften mit jeweils 16-Pixel-Schriftgröße im Vergleich. Besonders auffällig ist der Unterschied der x-Höhe zwischen der Verdana und der Times New Roman.

Die richtige Schriftgröße finden | Es gibt keine goldene Regel für die richtige Schriftgröße. Die Lesbarkeit sollte sicherlich immer an erster Stelle stehen. Diese ist aber von vielen Faktoren abhängig, nicht zuletzt von der gewählten Schriftart selbst (siehe Unterschied x-Höhe in Abbildung 10.57).

Bei der Schriftgrößendefinition sollte man immer mit dem Fließtext beginnen. Als Richtwert, der aber bei jedem Projekt individuell ausprobiert werden muss, kann man mit einer Größe zwischen 16 und 18 Pixel anfangen. Fließtext bedeutet vor allem das Absatzelement (p), aber durchaus auch Aufzählungen (li). Davon ausgehend werden dann die Schriftgrößen der anderen Elemente festlegt. So wird man für die wichtigste Überschrift (h1) vermutlich irgendwo zwischen 30 und 40 Pixel landen (ganz grober Richtwert).

Anders als in Grafikprogrammen, wo sich für jeden Textabschnitt die Größe frei einstellen lässt, sorgt die Arbeit mit Stylesheets dafür, dass Texte auch seitenübergreifend die gleiche Schriftgröße haben. Ein Absatz auf der Startseite ist dann meistens genauso groß wie auf jeder anderen Unterseite auch. Das betrifft auch alle anderen Elemente und ist auch gut so für ein konsistentes Aussehen im ganzen Projekt. Dies lässt sich durch den Einsatz von CSS-IDs und -Klassen ändern, sollte dann aber nur gezielt erfolgen. Unterschiede gibt es eher mit Texten in der Seitenleiste oder in der Fußleiste, die dann schon eher einmal etwas kleiner dargestellt sind und somit in deren Bedeutung auch etwas zurückgenommen werden. Mehr zu den einzelnen Textelementen in den jeweiligen Abschnitten in Abschnitt 10.7, »Gelungene Webtypografie – Textformatierungen und Gestaltungstipps «.

Schriftgrößendefinition | Schriftgrößen werden häufig über Pixel definiert. Es gibt aber noch einige bessere Alternativen, um die genaue Schriftgröße zu bestimmen. Klar, Pixel machen das Webdesign-Leben (vermeintlich) einfacher. Schriftgrößen lassen sich im Grafikprogramm auch so schön in Pixelwerten einstellen, sodass der Übertrag in CSS reibungslos funktionieren kann.

Lange Zeit war der Traum eines jeden Webdesigners, das Design pixelgenau festzulegen. Das Problem dabei ist, dass ein CSS-Pixel nicht zwangsläufig gleich ein Hardwarepixel ist. Auf einem Retina-Display würde dies zu sehr kleinen Schriften führen. Um die Größen flexibel zu halten für unterschiedliche technische Anforderungen und Benutzereinstellungen, werden als Alternative zu Pixelwerten gerne die Einheiten % oder em eingesetzt. Diese beiden Einheiten sind relativ und entsprechen damit auch den Accessibility-Vorgaben. Diese setzen die Schriftgröße relativ zur Browser-Standardvoreinstellung (meistens 16 Pixel). Allerdings werden die Schriftgrößen auch vererbt, bzw. die Angaben sind relativ zum Elternelement, und damit beginnt die Schwierigkeit. Bei entsprechend vielen Verschachtelungen mit font-size-Angaben hat man irgendwann den Überblick verloren, welche Schriftgröße am Ende herauskommt.

Abbildung 10.58    Wirkt ein bisschen wie altes Webdesign gegen neues Webdesign. Ist aber vor allem der Unterschied zwischen 11-Pixel- und 22-Pixel-Schriftgröße für den Fließtext. Die Unterschiede der Lesbarkeit sind offensichtlich. nordwest-beschaffung.de und hhpberlin.de

Responsive Schriftgrößen | Als Lösung für alle flexiblen und relativen Fälle präsentiert sich die CSS3-Schriftgrößeneinheit rem. Die Einheit ist ebenso flexibel wie % oder em, aber ohne die Vererbungsproblematik. rem bezieht sich immer auf das Root-Element (html). Die Berechnung der Schriftgrößen ist in rem wesentlich einfacher, da die Größen nicht mehr im Verhältnis zur Schriftgröße des Elternelements berechnet werden müssen.

Geht man von einer 16-Pixel-Browser-Standardschriftgröße aus, muss man die font-size des Root-Elements auf 100 % setzen. 1 rem entspricht dann umgerechnet 16 Pixeln. Um andere Pixelwerte in rem zu übertragen, muss man den Pixelwert durch 16 teilen. Eine Schriftgrößendefinition könnte also exemplarisch folgendermaßen aussehen:

html { font-size: 100%; } /* Default Font Size, 16px */
h1 { font-size: 2.5rem; } /* 40/16 = 2.5 */
h2 { font-size: 2rem; } /* 32/16 = 2 */
h3 { font-size: 1.5rem; } /* 24/16 = 1.5 */
p { font-size: 1rem; } /* 16/16 = 1 */

Listing 10.5    Schriftgrößenangaben mit rem

Im Gegensatz zu em ist diese Berechnung wesentlich angenehmer (und einfacher).

Da es eine CSS3-Eigenschaft ist, wird sie natürlich nicht von allen (älteren) Browsern unterstützt, wie beispielsweise IE 8 und niedriger. Als Fallback-Lösung sollten daher auch Pixelwerte definiert werden, die vor den rem-Werten definiert werden:

html { font-size: 100%; }
h1 {
font-size: 40px;
font-size: 2.5rem;
}
h2 {
font-size: 32px;
font-size: 2rem;
}
h3 {
font-size: 24px;
font-size: 1.5rem;
}
p {
font-size: 16px;
font-size: 1rem;
}

Listing 10.6    Schriftgrößenangaben mit Pixel und rem

Moderne Browser erkennen die rem-Definition und überschreiben somit die Pixelanweisungen. Ältere nehmen die Pixel und ignorieren die rem-Anweisungen.

Abbildung 10.59    dr-straessle.de ist ein schönes Beispiel für gelungene Typografie auf unterschiedlichen Endgeräten.

 

10.5.4    Zeilenabstand 

Der Zeilenabstand hat für die Lesbarkeit und die Gesamtwirkung des Textes eine große Bedeutung. Und doch gibt es wohl kaum ein typografisches Mittel, das im Gestaltungsprozess eines Webdesigns so vernachlässigt wird.

Der Zeilenabstand bezeichnet den Abstand zwischen zwei untereinanderstehenden Zeilen, die zu einem HTML-Element gehören. Während im Printbereich der Zeilenabstand von Grundlinie zu Grundlinie gemessen wird, ist dies im Web (leider) etwas anders. Mit der CSS-Eigenschaft line-height werden gleichmäßig über und unter der Textzeile die Abstände definiert.

Abbildung 10.60    Der Zeilenabstand wird mit line-height nach oben und unten gleichmäßig vergrößert.

Entspricht der Zeilenabstand genau der Schriftgröße, berühren sich Unterlänge der oberen Textzeile und die Oberlänge der unteren Textzeile. Ist der Zeilenabstand zu gering, was er auf den meisten Webseiten ist, ist der Text schlechter lesbar. Zu eng gesetzte Zeilen beeinflussen das Lesetempo, weil die Buchstaben der oberen und unteren Zeile zu dicht beieinanderstehen und der Leser Mühe hat, den Anschluss an die nächste Zeile zu finden. Zu viel Zeilenabstand ist ebenso ungünstig, weil die Zeilen schnell wie voneinander getrennte Textabschnitte wahrgenommen werden können. Siehe dazu auch Abschnitt 6.3.1, »Das Gesetz der Nähe«.

Abbildung 10.61    Unterschiedliche Zeilenabstände, unterschiedliche Wirkung: Bei agac.qc.ca wirkt der geringe Zeilenabstand sehr kompakt und dominant – auch aufgrund des fetten Schriftschnitts. handsome.is wirkt dagegen sehr luftig und hochwertig aufgrund des hohen Zeilenabstands und des entstehenden Leerraums.

In Abbildung 10.61 werden die unterschiedliche gestalterische Wirkung und das Zusammenspiel verschiedener typografischer Gestaltungskomponenten gut deutlich.

Auf agac.qc.ca (obere Abbildung) ist eine serifenlose Schrift mit relativ wenig Zeilenabstand und tiefem Schwarz auf weißem Hintergrund zu sehen. Dies wirkt sehr massiv und präsent. Der Textblock stellt so ein Gegengewicht zu den vielen unterschiedlichen farbigen Abbildungen dar, eben auch durch den geringen Zeilenabstand. Auf handsome.is (untere Abbildung) sorgen die Serifenschrift, eine graue Textfarbe und großzügiger Zeilenabstand für eine gewisse Luftig- und Leichtigkeit. Dezent und elegant wird die ebenfalls hell und »sanft« wirkende Abbildung ergänzt.

Beide Webseiten zeigen ein schönes Zusammenspiel aus typografischer Gestaltung und deren passender Einordnung in das Gesamtlayout mit den anderen Gestaltungselementen. Dies wird besonders deutlich, wenn wir die Fließtextblöcke auf den Websites miteinander tauschen, wie es Abbildung 10.62 zeigt.

Abbildung 10.62    Die Fließtexte von Abbildung 10.61 einmal ausgetauscht. Jetzt passen sie offensichtlich nicht mehr zur Gesamtgestaltung.

Im oberen Beispiel geht der Fließtext in seiner Helligkeit völlig unter, und im unteren Beispiel dominiert er viel zu stark.

Genaue oder ideale Werte für den Zeilenabstand vorzugeben ist nicht möglich. Zu unterschiedlich sind die individuellen Bedingungen. Der Zeilenabstand ist abhängig von der Schriftart. Schriftarten mit einer großen x-Höhe sollten eher mehr Abstand bekommen. Je länger die Zeilenlänge, umso größer sollte der Abstand sein. Je höher die Schriftgröße, umso geringer (im Verhältnis) kann der Abstand sein. Serifenlose Schriften benötigen meistens mehr Abstand als Serifenschriften. Je größer die Schriftart, umso weniger Zeilenabstand wird meistens benötigt.

Zeilenabstand in HTML & CSS | Der Zeilenabstand sollte für jeden Fall individuell betrachtet und festgelegt werden. Als Ausgangsbasis kann man mit ca. 30 bis 40 Prozent der Schriftgröße beginnen. Und wer nicht rechnen mag, fängt mit mindestens 1.5em an. Anders als bei der Schriftgröße ist die Arbeit beim Zeilenabstand mit der Einheit rem eher ungünstig. Denn rem berechnet sich relativ zur Standardbrowsergröße. Hier ist aber eine Abhängigkeit von der jeweiligen font-size besser, daher sollte der Zeilenabstand ohne Einheit (oder alternativ mit em) angegeben werden. Vererbungsprobleme können so vermieden werden.

Folgende Angaben haben den gleichen Effekt:

line-height: 1.7;
line-height: 1.7em;
line-height: 170%;

Listing 10.7    Die unterschiedlichen CSS-Definitionen des Zeilenabstands

Abbildung 10.63    Von oben nach unten: zu wenig Zeilenabstand, genau richtig, zu viel Zeilenabstand

Die Schriftgrößen aus dem Listing 10.7 erweitert mit Zeilenabstandsangaben könnten dann folgendermaßen aussehen:

h1 {
font-size: 40px;
font-size: 2.5rem;
line-height: 1.3;
}
h2 {
font-size: 32px;
font-size: 2rem;
line-height: 1.3;
}
h3 {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.3;
}
p {
font-size: 16px;
font-size: 1rem;
line-height: 1.7;
}

Listing 10.8    Schriftgrößen und passende Zeilenabstände

Wichtig ist, den Gesamteindruck der Webseite zu beachten und den Zeilenabstand auf die umliegenden Elemente mit abzustimmen. Nicht dass auf einmal der Zeilenabstand innerhalb eines Absatzes größer ist als der Abstand zwischen zwei Absätzen.

Abbildung 10.64    Das vorherige Beispiel mit angepassten Zeilenabständen. Bei den Überschriften wäre line-height: 1.7 zu viel gewesen!

 

10.5.5    Schriftfarbe – Text- & Hintergrundkontrast 

Der Kontrast zwischen der Textfarbe und der Hintergrundfarbe sorgt nicht unerheblich für die Lesbarkeit wie auch die Anmutung des Textes. Es sollte ein deutlicher Hell-Dunkel-Kontrast erkennbar sein (siehe Abschnitt 9.6.2, »Hell-Dunkel-Kontrast«). Je geringer der Kontrast wird, umso schwerer ist der Text zu lesen.

Abbildung 10.65    So eher nicht: Hier sind die Text-Hintergrundkontraste (viel) zu schwach. Ästhetik sollte nicht vor Lesbarkeit gehen.

Der klassische Text-Hintergrundkontrast ist schwarzer Text auf weißem Hintergrund. Was »schwarz auf weiß« geschrieben steht, wirkt auf den Betrachter unbewusst glaubwürdig. Dieser stärkste Hell-Dunkel-Kontrast mit #000000-Text auf #ffffff-Hintergrund wird auch auf Webseiten am liebsten eingesetzt.

Allerdings ist der stärkste Kontrast nicht automatisch am besten lesbar. Eine etwas abgemilderte Variante ist für die Augen angenehmer. Also eher ein dunkelgrauer Text auf weiß oder schwarzer Text auf einem dezent abgedunkelten Hintergrund.

Abbildung 10.66    Oben steht der Text schwarz auf weiß, im unteren Bild oben dunkelgrau auf weiß und unten schwarz auf hellgrauem Hintergrund. Am Bildschirm sind die beiden Varianten im unteren Bild lesefreundlicher (im Druck eher nicht!).

Es gibt natürlich auch die Varianten mit farbigen Texten und/oder farbigen Hintergründen, was für viele Layouts durchaus passender sein mag als grau auf weiß. Was visuell aber besser in die Gesamtgestaltung passt, muss noch lange nicht besser lesbar sein. Im Gegenteil, die Gefahr, dass gerade Menschen mit Farbsehschwächen oder bei ungünstigen Bedingungen (Außenlicht etc.) die Texte schwerer zu erkennen sind, steigt. Als Hilfestellung gibt es die Web Content Accessibility Guidelines (WCAG) 2.0, die genau festlegen, wie groß der Farbunterschied sein sollte, um eine größtmögliche Zugänglichkeit zu gewährleisten. Bereits in Kapitel 1, »Prinzipien des modernen Webdesigns«, bin ich im Abschnitt zur Barrierefreiheit auf dieses Thema zu sprechen gekommen.

Abbildung 10.67    Sieht nett aus, ist aber sehr schlecht lesbar. Bei robindeniro.com könnte der Hell-Dunkel-Kontrast doch deutlich größer sein.

Inverse Schrift | Helle Schrift auf dunklem Hintergrund kommt im Webdesign selten vor. Aus berechtigten Gründen? Ja, auch wenn der Kontrast genauso hoch sein kann wie bei dunkler Schrift auf hellem Hintergrund, die Lesbarkeit leidet fast jedes Mal. Für große Mengen an Fließtext ist diese Variante eher nicht zu empfehlen. Manchmal geht aber die Wirkung des Gesamtlayouts vor, und dann muss es ein dunkler Hintergrund sein. Um die Lesbarkeit aber nicht zu weit einzuschränken, sollte man inverse Schrift auf Überschriften oder wenig Text beschränken. Denn hier kann diese Gestaltungsvariante ein Highlight setzen und sich vom Rest abheben. Inverser Text kann beispielsweise in Überschriften Akzente setzen, und wenn Text über einem Bild liegt, sorgt er für Lesbarkeit wie bei segebergerkliniken.de.

Abbildung 10.68    Bei den segebergerkliniken.de ist der Einsatz von inversem Text gelungen und sorgt für die Lesbarkeit des Textes auch auf einem unruhigen Hintergrundbild.

 

10.5.6    Zeilenlänge 

Oft ist die Spaltenbreite im Gesamtlayout schon vorgegeben, im Inhaltsbereich, in eventuell vorhandenen Seitenleisten oder in der Fußleiste. Manchmal besteht noch die Möglichkeit, in einem breiteren Inhaltsbereich den Text auf mehrere Spalten aufzuteilen. Für eine optimale Lesbarkeit lassen sich auch hier keine Regeln angeben. Zu stark ist eine geeignete Zeilenlänge von der Schriftart und der Schriftgröße abhängig. Meistens sind sieben bis zehn Wörter für eine optimale Lesbarkeit geeignet. Dies hängt natürlich auch vom Text selbst ab. Bei Fachartikeln mit langen Fachbegriffen sind eher weniger Wörter sinnvoll. So kann man sich auch an den Anschlägen orientieren. Mit Anschlägen sind die Anzahl der Zeichen inklusive Leerzeichen gemeint. Zwischen 70 bis 90 Anschläge haben sich in vielen Fällen als geeignet herausgestellt.

Abbildung 10.69    Bei modernen Webseiten häufig im Einsatz: Zwei- oder Dreispalter so wie hier bei vivacis.de. Zu lange Zeilen werden so vermieden, und es sieht auch noch schick aus.

Achtung: Ist eine Zeile zu lang, kann es für den Betrachter zu Schwierigkeiten beim Wechsel zur nächsten Zeile kommen! Außerdem wirken sehr lange Textzeilen auf den Betrachter eher abschreckend. Bei zu kurzen Zeilen wird der Lesefluss durch den häufigen Zeilenwechsel gestört, und das Schriftbild als Ganzes wirkt eher unruhig.

Abbildung 10.70    Ist aber leider auch oft zu sehen: Zeilen, die über die volle Inhaltsbreite laufen. Dabei zeigt blogst.de direkt darunter, wie es besser geht.

Zeilenlänge in responsiven Layouts | Bei fixen Layouts mit fixen Spaltenbreiten ist die Abmessung der Zeilenlänge noch gut umzusetzen. Richtig interessant wird es aber bei flexiblen und responsiven Layouts, bei denen sich die Breite dynamisch verändert. Hier sollte man aufpassen, dass bei sehr breiten Layouts für große Bildschirmauflösungen die Zeilenlängen nicht zu groß werden. Die Gefahr droht auch bei kleineren Auflösungen, wenn beispielsweise die Seitenleiste nach unten rutscht und der Text über die volle Breite geht und die Zeilenlänge auf einmal sehr groß wird.

Responsive Layouts achten also nicht nur auf die Positionierung der Inhalte, sondern auch auf die Zeilenlänge. Notfalls gilt es, die Textspalte(n) mit einer CSS-Weitenangabe (width) bewusst schmal und damit lesbar zu halten.

 

10.5.7    Grundlinienraster 

In Printpublikationen ist es üblich, dass die Textzeilen – auch seitenübergreifend – auf einem fiktiven Raster stehen, damit alle Zeilen in allen Spalten auf gleicher Höhe stehen. Dieses Grundlinienraster sorgt mit für ein harmonisches Gesamterscheinungsbild, gerade bei dünnem Zeitungspapier hat es aber auch ganz pragmatische Eigenschaften. Der Text der Rückseite schimmert nicht unangenehm zwischen den Zeilen durch, wenn dieser auf dem Grundlinienraster liegt.

Abbildung 10.71    Im DTP-Programm sitzt der Text mit einem Klick auf der Grundlinie.

Was sich im Printbereich durch die Layoutprogramme noch recht simpel (durch einen einzigen Knopfdruck) umsetzen lässt, wurde und wird im Webdesign fast völlig vernachlässigt. Der Grund ist einfach nachzuvollziehen: das Potpourri aus Schriftgrößen, Zeilen-, Innen- und Außenabständen für jeden einzelnen Texttyp, dazu noch Höhen und Abstände von Containern und Bildern so zu definieren und kontrollieren, dass sich bei beliebiger Anordnung der Elemente ein Grundlinienraster ergibt … fast unmöglich.

Es stellt sich auch die Frage nach der Notwendigkeit eines solchen Grundlinienrasters. Im Gegensatz zu Zeitungen und Magazinen, wo bei der Betrachtung von Doppelseiten ein Grundlinienraster für ein ausgeglichenes Gesamtbild sorgt, wird immer lediglich ein Ausschnitt einer Webseite betrachtet. So fällt es kaum ins Gewicht, wenn Textelemente vom Header bis in die letzte Zeile der Fußleiste nicht aufeinander abgestimmt sind. Aber man muss ja nicht zwangsläufig gleich ein Grundlinienraster implementieren. Das Tool Gridwax legt (per Lesezeichen aktiviert) ein Grundlinienraster über die aktuelle Webseite und verdeutlicht so vertikale Ausrichtungen.

 

10.5.8    Textausrichtung & Silbentrennung 

Texte im Webdesign sind immer innerhalb des Blocks, in dem sie stehen, ausgerichtet. Entweder stehen sie am linken Rand bündig, am rechten, am linken und rechten, oder sie sind zentriert, das heißt weder links noch rechts bündig. Die Definition der Ausrichtung erfolgt in CSS mit der Eigenschaft text-align.

• Linksbündiger Text: Da wir in unserer Kultur von links nach rechts lesen, sind die meisten Texte linksbündig, damit das Auge schnell und einfach den Einstieg in die nächste Zeile schafft. Die häufigste im Webdesign anzutreffende Variante ist daher linksbündiger Text, der rechts »flattert«. Dies kann zwar auch zu unschönen »Treppen«-Effekten führen, ist aber meistens trotzdem noch am besten lesbar. Die Standardeinstellung für Texte im Browser ist linksbündig. Möchte man diese Einstellung beibehalten, muss man nichts weiter machen. Möchte man diese Einstellung aber doch definieren (beispielsweise weil man eine vorherige Definition überschreiben möchte), dann geht dies in CSS durch die Anweisung text-align:left.

  

  Abbildung 10.72    Der Klassiker und (fast) immer erste Wahl, linksbündiger Text wie bei sueddeutsche.de/

• Blocksatz: In Printpublikationen wird meistens Blocksatz eingesetzt, also Text, der links- und rechtsbündig ist. Durch Blocksatz entsteht eine ruhige, ausgeglichene Wirkung, da alle Zeilen gleich lang sind. Im Printerzeugnissen wird ansprechender Blocksatz nur durch passende Silbentrennungen erreicht, die meistens manuell gesetzt werden. Im Web gab es – bis vor Kurzem – keine sinnige Möglichkeit der Silbentrennung. Und nein, das br-Tag ist keine denkbare Möglichkeit! Wörter im Web werden normalerweise nicht getrennt. Bei auf Blocksatz gestellten Texten ergeben sich damit recht häufig unschöne »Lücken« im Text. Die Wortabstände müssen unter Umständen weit vergrößert werden, damit der Text bündig ist. Blocksatz funktioniert daher, zumindest ansatzweise, nur bei relativ großen Zeilenlängen. Um Blocksatz zu erzeugen, braucht das entsprechende Textelement die Anweisung text-align:justify.

  Schlechte Lesbarkeit bei Blocksatz

  Ich hatte genügend Kunden, die gerne alle Texte auf Blocksatz haben wollten. »Weil es so schön ausgeglichen aussieht« – mag zwar sein, aber darunter leidet im Webdesign meistens die Lesbarkeit!

• Zentrierter Text: Zentrierter Text sollte nur sehr bewusst, z. B. für längere Zitate, Gedichte, Überschriften oder Ähnliches, eingesetzt werden. Werden Fließtexte zentriert dargestellt, verlieren sie häufig an Lesbarkeit, weil das Auge am linken Rand schwerer wieder den Einstieg in die nächste Zeile findet. Die CSS-Definition lautet text-align:center. Bei relativ kurzen Teaser-Texten ist zentrierter Text eine Alternative. Die Symmetrie des Designs wird dadurch schön betont wie bei athleticsnyc.com.

  

  Abbildung 10.73    Der symmetrische Text zieht sich durch die ganze Seite bei athleticsnyc.com. Bei so wenig Text ist das gut lesbar und wirkt sehr harmonisch.

• Rechtsbündiger Text: Rechtsbündigen Text kann ich mir lediglich als »Kunstgriff« vorstellen, um einem Design eine sehr besonders kreative Individualität zu verleihen. Und auch hier höchstens für einzelne Wörter und Texte von geringem Umfang. Fließtexte rechtsbündig setzen, na ja … Ich will Sie nicht auf dumme Ideen bringen. Sinnvoll kann es aber da sein, wo (wenig) Text rechts ausgerichtet werden soll, um das ästhetisch gestalterische Gleichgewicht zu erhalten. Die Anweisung dafür lautet dann text-align:right.

Silbentrennung | Der Browser trennt Texte standardmäßig nicht. Und gezielte Trennungen eigenhändig an bestimmten Stellen fix zu erzeugen ist bei einem flexiblen Medium wie dem Web unsinnig. Trennstriche haben also im Quellcode nichts verloren.

Mit CSS3 wurde die Eigenschaft hyphens (auf Deutsch: Trennungsstriche) realisiert, die die automatische Silbentrennung regelt. Zuerst sollte im HTML-Tag die Sprache eingestellt werden (<html lang="de">), damit die Browser, die die Eigenschaft unterstützen, auch an den richtigen Stellen trennen.

Und mit der Zuweisung hyphens:auto trennt der Browser die Wörter automatisch. Die aktuellen Browser sollten die Trennungen eigentlich alle beherrschen, aber viele tun es noch nicht allzu lange. Unterstützt ein Browser die Zuweisung nicht, dann trennt er eben keine Wörter. Insofern ist der Einsatz unbedenklich.

Die Zuweisung sollte dann folgendermaßen aussehen:

body {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

Listing 10.9    Code zur Aktivierung der automatischen Silbentrennung

Am besten hyphens einfach mal ausprobieren und sich die Ergebnisse in verschiedenen Browsern anschauen und entscheiden, ob es zum aktuellen Projekt passt. Denn die Trennungen mögen zwar korrekt gesetzt sein, aber nicht immer wirken sie passend.

Abbildung 10.74    Der Einsatz von hyphens kann zu eher unschönen Trennungen wie im linken Beispiel bei frankfurtaesthetik.de führen. Rechts wurde stattdessen passend der weiche Trennstrich eingesetzt.

Eine Ergänzung/ein Ersatz kann das weiche Trennzeichen sein. Das HTML-Sonderzeichen &shy; kann überall in einem Wort eingefügt werden, so dieses bei Bedarf getrennt werden soll. Das obere rechte Beispiel würde also wie folgt im Quellcode aussehen: Oberschenkel&shy; straffung. Der Einsatz des weichen Trennzeichens ist vor allem auch bei schmaleren Bildschirmen sinnvoll, damit lange Überschriften optisch ansprechend getrennt werden. Weil die Umsetzung durchaus aufwendiger ist, da jeweils manuell das Sonderzeichen eingefügt werden muss, bleibt der Einsatz meistens auf Überschriften beschränkt.

 

10.5.9    Abstände & Leerraum 

Abstände, nehmt mehr Abstände – denn Abstände helfen fast immer! Im Kapitel zu den Gestaltungsgrundlagen haben Sie bereits das Gesetz der Nähe kennengelernt. Elemente, die nahe beieinanderliegen, werden als zusammengehörig wahrgenommen. Das ist eines der wichtigsten Gestaltungsgesetze. Erst diese Wahrnehmung ermöglicht uns, einzelne inhaltliche Elemente als ein größeres Ganzes zu identifizieren. Denken Sie an Navigationspunkte, Seitenleisten usw. Erst die Nähe der einzelnen Elemente zueinander sorgt dafür, dass sie als zusammengehörig wahrgenommen werden. Hinzu kommt der Aspekt, dass fast immer allen Elementen Freiraum guttut – wenn die Elemente nicht zu gedrängt beieinanderstehen, sondern ausreichend Abstand zueinander haben und so jedes Element für sich auch wirken kann.

Abbildung 10.75    Erst durch die Nähe der »Einzelteile« zueinander und durch die Abstände zu anderen Elementen entstehen optische und damit auch inhaltliche Einheiten so wie bei bakkenbaeck.com.

Ein oft begangener Gestaltungsfehler besteht darin, dieses Gesetz zu missachten: also inhaltlich zusammengehörige Elemente entweder zu weit auseinander zu platzieren, sodass diese eben nicht als zusammengehörig erkannt werden, oder inhaltlich nicht zusammengehörige Elemente zu dicht beieinander zu positionieren, sodass sie als zusammengehörig wahrgenommen werden. Übertragen auf die technische Umsetzung heißt dies: An padding und margin bitte nicht sparen! Denn gerade die Leerräume sorgen oft dafür, dass eine Gestaltung Spannung und Lebendigkeit bekommt.

Abbildung 10.76    Sehr große Typo und viel Freiraum bei tozen.de

Die Parole »Mehr Abstand!« gilt dabei nicht nur für inhaltlich unterschiedliche Elemente, sondern es sollten beispielsweise auch zwei aufeinanderfolgende Absätze optisch klar voneinander getrennt sein. Und zwar nicht durch eine Leerzeile, sondern durch definierten Abstand nach unten, der von der Schriftgröße abhängt – als Richtlinie ca. 50 bis 100 % der Schriftgröße.

p{
font-size: 16px;
font-size: 1rem;
margin-bottom: .75rem;
}

Listing 10.10    Absatzdefinition mit Abstand am Ende zum nächsten Element

Das p-Tag hat zwar eigentlich schon einen automatischen Abstand nach unten, aber dieser wird meistens durch CSS-Reset-Anweisungen wieder zurückgenommen, und es ist besser, diesen individuell auf das eigene Layout anzupassen.

 

10.5.10    Schriftdefinition mit CSS 

In den bisherigen Typografie-Abschnitten kamen immer wieder einzelne CSS-Schriftzuweisungen vor. Es gibt eine Kurzform, mit der sich die einzelnen Angaben zusammenfassen lassen: font.

Mit ihr lassen sich die sechs Eigenschaften für Schriftgröße (font-size), Zeilenabstand (line-height), Schriftgewicht (font-weight), Schriftstil (font-style), Groß- oder Kleinschreibung (font-variant) und Schriftarten (font-family) definieren.

Die Reihenfolge lautet:

font: [font-style] [font-variant] [font-weight] 
[font-size]/[line-height] [font-family];

Aus einer langen Deklaration:

p{
font-style: italic;
font-variant:small-caps;
font-weight:bold;
font-size:1rem;
line-height:1.7;
font-family:Georgia, serif;
}

Listing 10.11    Alle Angaben zur Schrift ausgeschrieben

… wird somit die Kurzschreibweise:

p {
font: italic small-caps bold 1rem/1.7 Georgia,
Times,serif;
}

Listing 10.12    Kurzschreibweise zur Schriftdefinition mit allen möglichen Angaben

Die Reihenfolge muss so eingehalten werden. Schriftgröße und Schriftart müssen definiert werden, die anderen Werte sind optional. Die Werte, die von vorherigen Definitionen beibehalten oder die den Standardwert behalten sollen, können also weggelassen werden. Daher sieht die font-Zuweisung häufig ähnlich wie folgt aus:

p {
font: 1rem/1.7 Georgia,Times,serif;
}

Listing 10.13    Häufigste Angaben zur Schriftdefinition