Die wichtigsten Aspekte für eine gelungene Typografie – Digitale Schriftsetzung Teil I

Typografie ist ein ungeheuer spannendes, vielfältiges und wichtiges Thema. Doch während sich im Printbereich Experten mit der Schriftsetzung befassen, wird den Buchstaben im Digitalen noch immer viel zu wenig Bedeutung beigemessen. Dabei nehmen sie online einen großen, oft den größten Raum ein.

Damit Text informativ oder unterhaltsam sein kann, muss er eine Grundvoraussetzung erfüllen: Er muss gut lesbar sein. Und das ist gar nicht so einfach, schließlich ist Schrift sehr emotional und zudem ein wichtiges Gestaltungselement, ja sogar Kunst. Gut lesbare Texte halten Besucher länger auf der Seite, weil sie vom Auge angenehmer und schneller verarbeiten werden.

Folgend werden die wichtigsten Aspekte der Webtypografie behandelt. Wer sich an diese Grundregeln hält, der hat bereits viel für ein gelungenes Schriftbild getan. Wer zur Perfektion neigt, der sollte sich vorab darüber informieren, wie unsere Augen eigentlich lesen.

Die wichtigsten Aspekte für eine gelungene Typografie

Neben der Bedeutung der verschiedenen Formatierungsaspekte wird jeweils kurz angegeben, mit welcher Anweisung man die Formatierung mittels Cascading Style Sheets (CSS) vornimmt.

Wer sich mit CSS nicht auskennt und sein Internetangebot über ein Content-Management-System (CMS) pflegt, der kann meist dort typografische Einstellungen vornehmen.

Zudem gibt es für beliebte Systeme wie WordPress jede Menge Plugins mit denen man sein Schriftbild perfektionieren kann.

Schriftart
Allein über die Wahl der perfekten Schriftart könnte man wohl einen dicken Wälzer schreiben. Doch in welcher Schriftart bloß? Nun, hierauf gibt es, wie so oft, keine klare Antwort. Es hängt von diversen Faktoren ab, allen voran natürlich dem persönlichen Geschmack. Denn eine Schrift, die man von vornherein als komisch einstuft, kann in der Theorie noch so geeignet sein. Man wird sie nicht lesen wollen.

Was Serifen sind, weiß mittlerweile fast jeder. Neben Schriften mit und ohne die kleinen, abschließenden Querstriche am oberen oder unteren Ende eines Buchstaben, unterscheidet man noch zwischen Script-Schriftarten und dekorativen Schriften.

Für den Fließtext sollte die Wahl immer auf eine Serif- oder Sans-Serif-Schrift fallen. Schriftarten mit Serifen, zum Beispiel Times, schauen ein wenig formeller und klassischer aus. Wir kennen sie seitjeher aus Büchern und Zeitungen, was daran liegt, dass sie für gedruckte Publikationen besonders geeignet sind.

Sans-Serif-Schriften hingegen wirken informell, weil sie in etwa gleiche Strichstärken aufweisen. Sie sind im digitalen Bereich weit verbreitet. Ein Großteil der Texte im Internet ist beispielsweise in der Schriftart Arial geschrieben.

Früher mag der einfache Grundsatz “Serif für Gedrucktes, Sans-Serif für Digitales” vielleicht noch gegolten haben. Das liegt vor allen daran, dass Serifenschriften am Bildschirm in zu kleiner Schriftgröße eine Herausforderung für den Leser darstellen. Seitdem Monitore und damit auch Bilder und Schrift im Internet aber immer größer werden, ist das kein Problem mehr.

Script-Schriften wirken genauso wie dekorative Schriften verspielter. Sie ähneln der Handschrift und können ein guter Blickfang sein. Passt es zum Rest des Designs, kann man sie deshalb durchaus als Überschrift einsetzten. Als Hauptschrift hingegen sind sie gänzlich ungeeignet.

Einen enormen Beitrag zur Vielfalt der Schriftarten hat Google Fonts geleistet. Der 2010 eingeführte Dienst hat nach aktuellem Stand über 700 Schriftarten zur Auswahl. Alle stehen kostenlos zur Verfügung und sind frei verwendbar. Die Schriften können heruntergeladen werden um damit Grafiken zu erstellen und sie können in ein Stylesheet eingebunden werden um sie auf einem Internetangebot zu nutzen. Dank Google Fonts und ähnlichen Angeboten sind heute selbst ausgefallene Schriften kein Problem mehr, zumindest was ihre Websicherheit angeht.

Auf einer Webseite sollte man nicht zu viele verschiedene Schriften kombinieren. Das bringt nur Unruhe. Insbesondere der Fließtext sollte durchgängig in einer einfachen Schriftart, der sogenannten Brotschrift, geschrieben sein. Die Überschrift, Anrisstexte oder auch die Inhalte der Sidebar kann man aber durchaus in einer zweiten Schriftart absetzen. So sind Teaser bei Nachrichtenseiten beispielsweise häufig in einer Schriftart ohne Serifen verfasst, weil die Texte nur sehr kurz und vielleicht sogar kleiner sind. Der gesamte Artikel, den man längere Zeit vor Augen hat, hingegen in einer Serifenschrift.

Die Schriftart wird über das CSS-Attribut ‘font-family’ angegeben. Man kann nicht nur eine bestimmte Schriftart, sondern auch Schriftfamilien anführen. Zudem ist es möglich mehrere Schriftarten oder Schriftfamilien getrennt durch ein Komma hintereinander aufzuführen. So stehen dem Browser Alternative zur Verfügung, falls er eine Schriftart nicht anzeigen kann.

Die wichtigsten Aspekte für eine gelungene Typografie - Digitale Schriftsetzung Teil I
Links Georgia, eine typische Schriftart mit Serifen.
Rechts Verdana, eine serifenlose Schrift.

Schriftfarbe
Wenn ich von Schriftfarbe rede, dann meine ich weniger Blau, Grün oder Rot. Diese bunten Farben sind für Text nämlich in 99 Prozent der Fälle ungeeignet. Grundsätzlich gilt, dass ein Text umso besser lesbar ist, je höher der Kontrast von Schrift zum Hintergrund ist. Nur ganz harte Kontraste können störend wirken. Deshalb hat sich ein achtzigprozentiges Schwarz als optimal etabliert.

Als Alternative zum Schwarz wird im Netz gern Grau in den verschiedensten Tönen genutzt. Das kann im Zusammenspiel mit einem passenden Design einen noblen Eindruck erwecken. Für den nötigen Kontrast darf das Grau aber nicht zu hell sein.

Auf invers gesetzte Texte sollte man lieber verzichten. Hellere Schrift auf dunklerem Grund flimmert in den Augen und brennt sich auf die Netzhaut.

In CSS wird die Schriftfarbe mit dem Attribut ‘color’ festgelegt. Es kann sowohl ein englischer Farbname, als auch ein Farbcode angegeben werden.

Die wichtigsten Aspekte für eine gelungene Typografie - Digitale Schriftsetzung Teil I
Kleiner aber feiner Unterschied:
Links eine schwarze Schrift, rechts ein Grau aus 80 Prozent Schwarz.

Schriftgröße
Schriftgrößen werden heute häufig zu klein gewählt. Die Bildschirme von Desktop-Computern haben deutlich an Größe zugelegt. Die Schrift vieler Internetauftritte leider nicht. Im Grunde kann die Schrift nicht groß genug sein.

Überschriften sind natürlich größer als der Fließtext. Zu viele unterschiedliche Schriftgrößen machen eine Seite unruhig. Im Stylesheet erfolgt die Angabe der Schriftgröße mit dem Attribut ‘font-size’.

Die wichtigsten Aspekte für eine gelungene Typografie - Digitale Schriftsetzung Teil I
Zwischen links und rechts liegen nur zwei Punkte Unterschied.
Das Schriftbild jedoch ist gleich ein ganz anderes.

Zeichenabstand
Horizontale Zeichenabstände werden unter dem Fachbegriff Spationierung zusammengefasst. Dazu zählen Buchstabenabstände, Wortabstände, Sonderabstände und Sperrsatz. Wichtiger noch als beim Computer ist der Zeichenabstand für mobile Endgeräte (siehe Teil II).

Schon bei der Auswahl einer Schriftart sollte man die Spationierung berücksichtigen. Es gibt engere und weitere Schriften. Schriftdesigner machen sich bei der Entwicklung ihrer Schriftart viele Gedanken darüber. Das Schriftdesign ist übrigens die Königsdisziplin der Gestaltung.

Am Computerbildschirm benötigt der Haupttext selten eine Nachbesserung des Zeichenabstands. Je nach Schriftart und Schriftgröße kann es aber bei Überschriften Sinn machen. Ebenso wie bei Smartphones und Tablets. Die Spationierung lässt sich über das CSS-Attribut ‘letter-spacing’ verändern.

Die wichtigsten Aspekte für eine gelungene Typografie - Digitale Schriftsetzung Teil I
Durch einen erweiterten Zeichenabstand wird der gesamte Text deutlich luftiger.

Zeilenabstand
Fast genauso wichtig wie die Schriftgröße ist der Zeilenabstand. Und der wird leider noch mehr vernachlässigt. Dabei ist er für einen guten Lesefluss in der Tat elementar. Mit dem Zeilenabstand ist die vertikale Entfernung der Grundlinie einer Textzeile zur Grundlinie der nächsten Textzeile gemeint. Und auch die kann eigentlich nicht groß genug sein. Mindestens sollte der Abstand jedoch eine Versalhöhe betragen. Versalien sind Großbuchstaben.

Je mehr Text, desto größer der Zeilenabstand. Überschriften folgen demnach eigenen Regeln. Das 1,5-fache als Zeilenabstand (Faustregel) sieht bei zwei, drei Zeilen Text einfach nicht schön aus. Je größer der Schriftgrad einer Überschrift, desto kleiner kann der Zeilenabstand werden. Er wird mit dem CSS-Attribut ‘line-height’ eingestellt.

Übrigens sind Weißräume nicht nur zwischen den Zeilen ein wichtiges Gestaltungselement. Durch Leerräume zwischen Textabschnitten und zu anderen Elementen der Webseite kann man die Inhalte besser strukturieren. So sollte die Sidebar zum Beispiel nicht zu dicht am Text liegen. Die durch leere Flächen gewonnene Übersichtlichkeit trägt auch zur Leserlichkeit bei.

Die wichtigsten Aspekte für eine gelungene Typografie - Digitale Schriftsetzung Teil I
Wer einen ausreichend großen Zeilenabstand wählt entzerrt seinen Text sichtlich.

Im zweiten Teil dieses Artikels gibt es nicht nur weitere wichtige Aspekte der Webtypografie, sondern auch Hinweise zur Schriftsetzung für mobile Endgeräte wie Smartphones und Tablets.

10 Gedanken zu „Die wichtigsten Aspekte für eine gelungene Typografie – Digitale Schriftsetzung Teil I“

  1. Welche Schriftgröße würdest du empfehlen? Ich verwende nichts mehr unter 16px. Die Lesbarkeit von langen Artikeln ist so um einiges besser.

    Antworten
  2. Interessant! Genauso wichtig empfinde ich auch die Farbgestaltung. Von Google gibt es eine “Farbpalette” in welcher genau erklärt wird welche Farben zusammen passen und welche nicht. Auf jedenfall auch zu berücksichtigen! 🙂

    Antworten
  3. Etwas oberflächlich am Thema geblieben, aber du hast absolut Recht. Typografie ist sooo wichtig und wird leider viel zu oft einfach vergessen. Sie ist auch meine große Leidenschaft, nicht zuletzt dank Menschen wie Erik Spiekermann, die einfach immer etwas treffendes zum Thema Schrift zu sagen haben.

    Dabei ist Schrift eine Sprache, Schrift ist Design, Schrift macht eine Marke. Schrift kann so viel bewirken und ist im Grunde das wichtigste Element, weil es auch ohne alles andere funktioniert und für sich selbst spricht. Sprechen kann.

    Allerdings bin ich mit den Schwarzwerten nicht deiner Meinung, denn zu dunkle Schrift wirkt hart und oft nicht sehr elegant. Grautöne machen sich da viel besser, wobei die Headlines natürlich stark herausstechen dürfen.

    Antworten
  4. Da kann man echt viel mit rum experimentieren, aber ich denke die Standart-Einstellungen bei WordPress sind da nicht ohne Grund. Klar ändere ich auch ab und zu Zwischenräume, Farben, etc. Aber im Allgemeinen passt das immer. Danke für die Infos 😉

    Antworten
  5. Seh gutes Thema mit der Schriftfarbe. Da habe ich mir auch schon mehrere Nächte um die Ohren geschlagen, um die richtige zu finden. LG Raul

    Antworten

Schreibe einen Kommentar