15 Minuten für gute Webtypografie mit CSS

Die typografische Gestaltung sorgt für die Lesbarkeit der Texte. Und das wollen wir doch schließlich alle: dass unsere Texte gelesen werden. Dieser Artikel zeigt dir wie du mit CSS-Anweisungen eine gute, lesbare Typografie schaffst.

Nicht selten aber, dass die Typografie zu wenig beachtet wird. Templates, CMS-Themes und Frontend-Frameworks liefern oft schon eine gute Basis-Gestaltung – und dabei bleibt es dann meistens. Eventuell werden noch die Schriftarten ausgewählt, fertig.

Um effektiv Texte zu gestalten, sollte man die typografischen und technischen (CSS-)Möglichkeiten kennen.

Mit diesem Artikel will ich dir einen schnellen Überblick liefern, mit welchen CSS-Eigenschaften du deine Texte beeinflussen kannst. Und – fast wichtiger – möchte ich dir Empfehlungen und Tipps geben, wie du deine Texte gut lesbar gestalten kannst und was es dabei zu beachten gibt. Los gehts…

Schriftart

Die Schriftart ist mit der wichtigste Aspekt, wird in diesem Artikel-Workshop aber am kürzesten behandelt.
Warum? Weil ich dazu schon einen ausführlichen Artikel geschrieben habe:
7 Methoden, um passende Schriftarten zu finden.

Zu beachten ist vor allem, dass die Wahl der Schriftart unmittelbar die folgenden Aspekte erheblich beeinflusst. Deswegen gibt es bei den weiteren typografischen Möglichkeiten keine festen Werte, sondern eher Richtlinien, Empfehlungen.
Denn was beispielsweise bei der einen Schriftart eine ausreichende Schriftgröße ist, mag bei einer anderen als zu klein erscheinen.

Tipp zur Wahl der Schriftart:
Schriftarten mit einer hohen x-Höhe (Buchstabenmittellänge) sind auf Bildschirmen angenehmer zu lesen.
Die x-Höhe zweier Schriftarten
Die x-Höhe zweier unterschiedlicher Schriftarten

Schriftgröße

Die Schriftgröße beeinflusst erheblich die Lesbarkeit und die Bedeutung des Textes.
Die Schriftgröße gibt die Höhe der Schrift an, gemessen von der Ober- über die Mittel- bis zur Unterlänge.

Da die einzelnen Längen je nach Schriftart differieren können, wirken verschiedene Schriftarten unterschiedlich groß und sind damit unterschiedlich gut lesbar bei gleicher Schriftgröße.

Gleiche Schriftgröße – unterschiedliche Größenwirkung
Zwei Schriftarten in derselben Schriftgröße und doch deutlich anderer Größenwirkung.

Schriftgrößendefinition – Verschiedene Maßeinheiten

Die klassische Maßeinheit für die Schriftgröße (die CSS-Eigenschaft lautet font-size) ist der sog. „Punkt“ (1 Pica-Punkt = 0,352?mm), manchmal auch Didot-Punkt oder Pica-Punkt genannt. Im Web gibt es verschiedene Maßeinheiten, um die Schriftgröße zu definieren. Die häufigste ist sicherlich immer noch die Größe in Pixel (px) anzugeben, aber bei weitem nicht die einzige.

Die Angabe der Schriftgröße (egal in welcher Einheit) ist eher als Empfehlung zu betrachten. Die tatsächlich angezeigt Schriftgröße hängt von der Auflösung und Größe des Monitors, von den Benutzer-Einstellungen im Browser und vom Browser selber ab.

Wert Typ Beschreibung
px Absolut 1 „Viewport Pixel“
pt Absolut 1 Punkt beträgt 1/72 eines Inchs
pc Absolut 1 Pica entspricht 12 Punkt
% Relativ Relativ zur Schriftgröße des Eltern-Elements
em Relativ Relativ zur Schriftgröße des Eltern-Elements
rem Relative (root em) Relativ zur Schriftgröße des html-Elements
Schlüsselwort Relativ xx-small, x-small, small, medium, large, x-large, xx-large
vw Relativ 1/100 der Browserbreite
vh Relativ 1/100 der Browserhöhe
vmin Relativ 1/100 Fensterbreite oder -höhe (je nachdem, welche Größe die kleinere ist)
vmax Relativ 1/100 Fensterbreite oder -höhe (je nachdem, welche Größe die größere ist)

Mit Pixelangaben lässt sich zwar vermeintlich pixelgenau die Größe angeben, aber das Problem dabei ist, das ein CSS-Pixel nicht zwangsläufig ein Hardware-Pixel ist. Daher wird allgemein empfohlen auf flexiblere Einheiten wie %, em oder rem zu setzen. Auch aus Gründen der Barrierefreiheit wurde dies lange empfohlen, aber die modernen Browser sind inzwischen in der Lage auch absolute Einheiten bei Bedarf passend zu vergrößern. So ist es eher aus Sicht der Frontend-Entwicklung hilfreich relative Einheiten einzusetzen.

Schriftgröße in Abhängigkeit der Bildschirmbreite
Recht neu ist noch die Definition anhand der Bildschirmbreite, die mit den Anforderungen des responsiven Webdesigns aufkam. Einerseits sind die Abstände zwischen Bildschirm und Betrachter auf einzelnen Endgeräten sehr unterschiedlich, ebenso wie die Bildschirmbreite und damit die Zeilenlänge. Daher gibt es jetzt auch Einheiten wie vw, vh, sowie vmin und vmax.

Am ehesten zu empfehlen ist wohl aktuell die Angabe rem. Ähnlich wie em ist diese sehr flexibel, hat aber einen großen Vorteil gegenüber %– oder em-Angaben. Die letzten beiden setzen die Schriftgröße in Bezug zur Browser-Standardeinstellung um (16 Pixel). Dazu werden die Angaben aber auch vererbt an die HTML-Kind-Elemente. Bei entsprechend vielen Verschachtelungen kann man so leicht den Überblick verlieren, welche Schriftgröße am Ende heraus kommt.

rem als beliebteste Variante
Die rem-Einheit hat nicht diese Vererbungsproblematik. Die Berechnung der Schriftgröße ist daher wesentlich einfacher, da die Größen nicht mehr im Verhältnis zur Schriftgröße des Eltern-Elements berechnet werden müssen.

Geht man von der 16-Pixel-Browser-Standardschriftgröße aus, muss man die font-size des root-Elements auf 100% setzen. 1rem entspricht dann umgerechnet 16 Pixeln. Um andere Pixelwerte in rem zu übertragen, muss man den Pixelwert durch 16 teilen:


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 */

Im Gegensatz zu em ist diese Berechnung angenehmer, da einfacher. rem ist eine CSS3-Eigenschaft und wird daher nicht von allen älteren Browsern unterstützt. Zur Sicherheit kann man hier einen Fallback definieren, indem die entsprechenden Pixelwerte VOR den rem-werten angegeben 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; }

Moderne Browser erkennen die rem-Definition und überschreiben die Pixelwerte. Ältere Browser nehmen die Pixelwerte und ignorieren die rem-Anweisung.

Die richtige Schriftgröße finden

Wie oben schon angedeutet, lassen sich hier nur Empfehlungen geben. Die Schriftgröße sagt nämlich noch nichts über den optischen Eindruck der Höhe aus. Es gibt daher auch keine Standardgrößen für bestimmte Textelemente.

Mit dem Fließtext beginnen

Am geschicktesten ist es sicherlich mit der Definition des Fließtextes anzufangen, da dieser am häufigsten auf der Seite vorkommen wird. Das kann im body-Element erfolgen, zusätzlich auch im Absatz-Element (Das HTML-Element p wie paragraph).

Erst wenn der Fließtext gut lesbar ist, sollte man die weiteren Elemente gestalten, die ja meistens größer sind. Die Lesbarkeit sollte hier immer VOR der optisch-ästhetischen Wirkung stehen.

Als Richtlinie, bzw. Basiswert kann man mit einer Schriftgröße von ca. 16 – 18 Pixel anfangen. Darunter wird es schon recht klein. Das war zu früheren Zeiten sicherlich so üblich, aber aufgrund der Gerätevielfalt und vielfältigsten Nutzungsszenarien wäre eine Schriftgröße unter 16 Pixeln grenzwertig.

Hat man eine passende Größe für den Fließtext gefunden, kann man nach und nach die weiteren Elemente gestalten. Nicht selten, dass dann die größte Überschrift (meistens die h1) dann bei weit über 30 Pixel liegt.

Der Quellcode im Kapitel zuvor zeigt beispielhaft die Größendefinitionen für verschiedene Elemente an.

Tipps zur Schriftgröße

Zu häufig sehe ich noch zu kleine Texte, also Schriftgrößen die (teils deutlich) unter 16 Pixel liegen. Möchte ich, dass die Texte gelesen werden – und dafür sind sie ja schließlich da – dann sollte ich diese nicht zu klein setzen (Ja, das kann ich hier nicht oft genug wiederholen!).

Schriftgröße im Webdesign
13 Pixel Schriftgröße im Vergleich zu 20 Pixel Schriftgröße für den Fließtext. Da hilft auch kein prüfender Blick: Der obere Text ist zu klein zum lesen.

Dazu solltest du die visuelle Hierarchie beachten: Je wichtiger ein Element ist, umso markanter sollte es auch gestaltet sein.

Je größer ein Text ist, umso bedeutender ist er auch.

Ich habe schon Screendesign-Entwürfe gesehen, da war die Metanavigation größer als die Hauptnavigation oder der Text in der Fußleiste größer als der Text im Inhaltsbereich. Das ist natürlich ungünstig und spiegelt die Bedeutung der Elemente nicht wieder.

Zeilenabstand / Vertikale Abstände

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

Der Zeilenabstand legt den Abstand zwischen zwei aufeinanderfolgenden Zeilen fest, die zu einem HTML-Element gehören, z.B. eine zweizeilige Überschrift.

Mit der CSS-Eigenschaft line-height werden gleichmäßig über und unter der Textzeile Abstände definiert.

Entspricht der Zeilenabstand der Schriftgröße, berühren sich Unterlänge der oberen Textzeilen und Oberlänge der unteren Textzeile.

Der Zeilenabstand kann, wie die Schriftgröße, in den Einheiten px, em oder % angegeben werden. rem als Einheit ist möglich, aber ungünstig, da sich diese ja immer relativ zur Standardbrowsergröße berechnet. Besser ist es aber den Zeilenabstand abhängig von der jeweiligen font-size anzugeben.

Da Pixel wieder ein unflexibler Wert ist, werden meistens % und em-Angaben eingesetzt oder einfach nur ein numerischer Wert. So können Vererbungsprobleme vermieden werden:

 
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; }

Dazu sollten Elemente einen Abstand nach oben und/oder unten bekommen. So dass bspw. zwei aufeinanderfolgende Absätze auch zueinander einen Abstand haben und dadurch erst als zwei getrennte Textblöcke erkennbar sind. In der Praxis kann das folgendermaßen aussehen:

p { font-size: 16px; font-size: 1rem; line-height: 1.7; margin-bottom: 12px; }
Zeilenabstand & Abstand nach unten

Tipps für den richtigen Zeilenabstand

Der Abstand zwischen den Zeilen sollte groß genug sein, damit das Auge gut in der gerade zu lesenden Zeile bleiben kann und danach leicht den Anschluss an die nächste Zeile findet.

Zu groß darf der Abstand aber auch nicht werden, so dass die Zeilen als zusammenhängender Block erkannt werden und nicht wie zwei voneinander getrennte Texteinheiten.

Im Print- und oft auch im Webdesign beträgt der Standard-Zeilenabstand 120% der Schriftgröße. Das ist aber fast immer zu gering. Mit einem Wert, der um ca. 130 bis 160 Prozent der Schriftgröße beträgt, kann man gut anfangen.

Zeilenabstände im Webdesign
Zu kleiner, genau richtiger und zu großer Zeilenabstand
Typografie ermöglicht das schnelle Scannen der Webseite.

Dabei immer den Gesamteindruck aller Texte im Auge behalten und den Zeilenabstand auch auf die umliegenden Elemente abstimmen. Nicht dass auf einmal der Zeilenabstand innerhalb eines Absatzes größer ist, als der Abstand zwischen zwei Absätzen.

Der vertikale Abstand zwischen verschiedenen Elementen ermöglicht erst das schnelle Scannen der Seite.

Mehr Infos zum vertikalen Abstand findest du im Artikel Deep dive CSS: font metrics, line-height and vertical-align.

Zeilenlänge / Spaltenbreite

Die Empfehlungen für eine optimale Zeilenlänge variieren, hängen aber eben auch von der Schriftgröße und der Schriftart ab.

Zu lange Zeilenlängen sind schwerer lesbar. Bei zu kurzen entstehen oft unschöne Trennungen oder größere „Löcher“ am Ende der Zeilen.

Für Desktop-Bildschirme wird meistens eine Länge von 45 bis 80 Zeichen angegeben. Das entspricht gut zweimal den (Klein-)Buchstaben des Alphabets:

abcde­fghijklmnopqrstu­vwxyz­abcde­fghijklmnopqrstu­vwxyz­abcd

Die Buchstaben kann man sich gut in sein HTML-Dokument kopieren und die Zeilenlänge austesten.
(Ja, ich weiß, nach der „Rechnung“ sind meine Zeilenlängen hier zu lang. Aber wie gesagt es sind Empfehlungen und die typografische Gestaltung sorgt dafür, dass die Texte hier (trotzdem) gut lesbar sind.)

Unterschiedliche Zeilenlängen im Webdesign

Bei mobilen Geräten kann die Zeilenlänge kleiner sein, ca. zwischen 30 bis 40 Zeichen.

Die Zeilenlänge des Textes ergibt sich meistens aus der Breite (width) des Eltern-Elements, in dem der Text steht (z.B. in einem DIV-Container). Möchte man die Breite eines Textblockes unabhängig davon begrenzen, bietet sich die CSS-Eigenschaft max-width an, die eine maximale Zeilenlänge ermöglicht.

Schriftfarbe und der Text-Hintergrund-Kontrast

Als wichtigste Faustregel gilt: Der Hell-Dunkel-Kontrast zwischen Textfarbe und Hintergrundfarbe sollte groß genug. Groß genug, um die Buchstaben gut lesen zu können.

Im Print gibt es schwarz auf weiß. Schwarze Schrift auf weißem Hintergrund bildet den größten Hell-Dunkel-Kontrast. Was im Printbereich meistens eingesetzt wird, ist auf Bildschirmen zu kontrastreich. Daher wird gerne entweder ein dunkelgrauer Text (z.B: #333) auf weißem Hintergrund oder schwarzer Text auf sehr hellgrauen (oder sonstige helle Farbtone) Hintergrund (z.B. #f3f3f3) eingesetzt. Das Kontrast wird dadurch leicht abgemildert.

Der Hell-Dunkel-Kontrast im Webdesign

Für farbige Texte oder Hintergründe gibt es verschiedene Tools, mit denen man überprüfen kann, ob der Kontrast ausreichend ist und die die Kombination anhand der Accessibility-Richtlinien auswerten, z.B. den Color Contrast Checker

Farben sind ein tolle Gestaltungselement mit enormer emotionaler und ästhetischer Wirkkraft.

Gerade deswegen sollte aber vermieden werden, dass durch den Einsatz von zu vielen Farbtönen oder ungünstigen Farbkombinationen die Lesbarkeit leidet.

Der Farbe-Hell-Dunkel-Kontrast im Webdesign

So sind Kontraste von Komplementärfarben ungeeignet, da sie zu einem Flimmereffekt führen. Ebenso sollte eine Rot-Grün-Kombination vermieden werden, da die Rot-Grün-Sehschwäche recht weit verbreitet ist.

Der Einsatz von Text auf Bildhintergründen oder Verläufen wird zwar gerne genommen, ist aber mit Vorsicht zu genießen. Wechselnde und irritierende Kontrastverhältnisse erschweren hier die Lesbarkeit.

Tipps für den Einsatz von Schriftfarben

Um Farben effektiv einzusetzen, gibt es ein paar Empfehlungen:

Textausrichtung

Linksbündig, rechtsbündig, zentriert oder Blocksatz – das sind die vier Möglichkeiten Text mit Hilfe der CSS-Eigenschaft text-align auszurichten.

Die geläufigste und zu empfehlende Variante ist der linksbündig Text (text-align: left). Zwar wird im Printbereich gerne der Blocksatz (also links- und rechtsbündig) eingesetzt, dort lassen sich aber auch Trennungen und Wortabstände viel feiner einstellen und ausgleichen als im Web.

Linksbündiger Text verursacht zwar schnell einmal die sog. Treppenstufen am rechten Rand, ist aber unter den aktuellen Möglichkeiten noch die beste. Vor allem bleiben beim sog. Flattersatz die Wortabstände gleich.

Blocksatz sieht zwar meistens harmonischer aus, führt im Web aber zu oft zu großen Wortabständen.

Rechtsbündiger und zentrierter Text sind nur bei besonderen Einsatzfällen hilfreich, z.B. bei Zitaten. Längerer Lesetext sollte damit allerdings vermieden werden.

Exkurs Silbentrennung
In der deutschen Sprache sind sehr lange Wörter keine Seltenheit. Hier eigene Trennungen mit Trennstrichen und erzwungenen Umbrüchen (<br>) einzusetzen, wäre bei einem so flexiblen Medium wie dem Web unsinnig.

Mit der CSS3-Eigenschaft hyphens (zu deutsch: Trennstrich) lässt sich die automatische Silbentrennung in Webtexten einsetzen:


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

    

Am besten im eigenen Projekt einmal austesten und die Trennungen überprüfen. Diese dürften zwar korrekt sein, aber nicht immer wirken sie passend.

Um bei bestimmten Wörtern die Trennung aktiv zu beeinflussen gibt es das HTML-Sonderzeichen &shy;. Dies lässt sich in einem Wort einfügen und bestimmt dann, wo bei Bedarf das Wort getrennt werden soll. Gerade bei kleineren Bildschirmen sinnvoll.
Der Aufwand ist natürlich größer, da jedesmal ein Sonderzeichen manuell eingefügt werden muss, so dass sich die Umsetzung meistens auf sehr lange Wörter in einer Überschrift beschränkt.

Mehr zur Silbentrennung findest du im Artikel Dealing with long words in CSS.

Schriftschnitt

Der Schriftschnitt ist die Variation einer Schriftart und wird in CSS mit font-weight definiert. Am bekanntesten sind wohl fett und kursiv. Der Schriftschnitt kann die Schriftstärke, die -breite oder die -lage verändern. Zusammen ergeben die verschiedenen Schriftschnitte eine Schriftfamilie.

Für den umfangreicheren Einsatz auf Websites ist es hilfreich, wenn eine Schriftart mehrere Schriftschnitte besitzt. Durch sie lässt sich besser Abwechslung in die Gestaltung bringen, als beispielsweise mit anderen Schriftarten, -farben oder -größen.

Mit Schriftschnitten lassen sich Texte semantisch kennzeichnen (z.B. durch das strong-Element als wichtig markieren) und optisch hervorheben.

CSS-Wert Beschreibung
100 bis 900 Dicke der Schrift auf einer Skala von 100 bis 900 in Hunderterschritten.
Je größer der Wert, umso fetter wird der Text angezeigt.
normal Standardeinstellung, entspricht dem numerischen Wert 400.
bold Fetter Schnitt, entspricht dem numerischen Wert 700.
bolder Stellt die Schrift dicker als der vererbte Wert.
lighter Stellt die Schrift dünner als der vererbte Wert.
Webdesign Webfont Schriftschnitt
Der Webfont Fira Sans bietet sehr viele Schriftschnitte an.

Tipps für den Einsatz von Schriftschnitten

Abstände / Leerraum

Ja, auch das gehört zur Typografie: Der Weißraum, also der Platz auf der Website, der leer ist.

Dieser lässt die vorhanden Elemente überhaupt erst sinnvoll zur Wirkung kommen. Er strukturiert die Seite und schafft Zusammenhänge.

Das sog. Gesetz der Nähe funktioniert nur durch entsprechenden Weißraum.

Webdesign Gesetz der Nähe
Das Gesetz der Nähe im praktischen Einsatz. outbankapp.com strukturiert seine Inhalte (in hellrot kenntlich gemacht) mit Hilfe von Weißraum .
Webdesign-Typografie: Abstände und Leerraum schaffen Struktur und Ordnung und erleichtern die Erkennbarkeit

Zusammenhänge Elemente sollten daher ausreichend Abstand zu den anderen Inhaltsbereichen bekommen. So z.B. der Inhaltsblock zum Header, zur Seitenleiste und zum Footer. Oder die einzelnen Spalten zueinander. Und gerade auf Desktop-Bildschirmen geht ja der Trend eher dazu größer und großflächiger zu arbeiten.

Abstände und Leerraum schaffen Struktur und Ordnung und erleichtern die Erkennbarkeit.

Hierachie

Eine (typografische) Gestaltung lebt ja nicht nur von der Aussage und der ästhetischen Wirkung. Eine effektive Gestaltung schafft auch Hierarchien. Sie schafft Bedeutungen: Was ist besonders wichtig und was ist weniger wichtig.

Alle oben aufgeführten typografischen Gestaltungsmittel lassen sich einsetzen, um Texten Bedeutungen zu geben, wie die folgende Aufzählung verdeutlicht:

Typografische Hierarchie im Webdesign

Ohne eine typografische Hierarchie wird es für den Leser schwierig wichtige Informationen innerhalb des gesamten Design schnell zu identifizieren und die Bedeutungen schon visuell zu erfassen.
Die Hierarchie definiert, wie, bzw. in welcher Reihenfolge Inhalte durchgelesen werden.

Erkenntnisse des Typografie-CSS-Workshops

Du musst keine ungeahnten Design-Fähigkeiten besitzen, sondern ein paar einfachen Prinzipien folgen, um deine Inhalte leicht lesbar zu machen.

Die vorgestellten CSS-Eigenschaften und typografischen Tipps sind kurz und bündig und keineswegs umfassend. Die Intention ist es die Lesbarkeit der Websites im Netz an sich zu erhöhen, in dem du deine Inhalte besser lesbar machst.

Schlechte Webdesign Typografie
Die Typo auf der Seite wirth-rae.de sieht ja ganz nett aus,
ist für die Lesbarkeit aber eher eine Zumutung:
Geringer Hell-Dunkel-Kontrast, (zu) dünner Schriftschnitt und zu lange Zeilenlängen (unterer Screen).

Beachte die Tipps aus diesem Artikel und du hast eine gute Lesbarkeit deiner Inhalte gesichert.

Hierbei gilt: Mit gesundem Menschenverstand an Typografie heran gehen. Sich selber, bzw. den Text stetig hinterfragen:
Sieht dieser nicht nur gut aus, sondern vor allem „Ist dieser gut lesbar?“.

Teste mehrere unterschiedliche Varianten aus, um die beste Option für eine gute Lesbarkeit deiner Inhalte zu finden.

Hat euch der 15-Minuten-Typografie-Artikel geholfen? Habt ihr wichtige CSS-Typografie-Eigenschaften vermisst?


Deprecated: Directive 'allow_url_include' is deprecated in Unknown on line 0