15 Minuten für gute Webtypografie mit CSS
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.
Schriftarten mit einer hohen x-Höhe (Buchstabenmittellänge) sind auf Bildschirmen angenehmer zu lesen.
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.
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!).
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; }
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.
- Bei langen Zeilen den Zeilenabstand vergrößern.
- Bei größeren Bildschirmen also eher ein größerer Zeilenabstand.
- Auf Smartphones kann der Zeilenabstand geringer sein.
- Bei Schriften mit hoher Mittellänge den Zeilenabstand erhöhen.
- Da Überschriften eher kurz sind und selten länger als Zeilen, kann hier der Zeilenabstand auch etwas kleiner sein.
- Die
line-height
in relativen Werten zur Schriftgröße definieren.
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:
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcd
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.)
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.
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.
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:
- Ausreichender Hell-Dunkel-Kontrast zwischen Text und Hintergrund.
- Text nicht über Bilder oder Farbverläufe setzen.
- Farben sparsam einsetzen.
- Neben der Farbe möglichst noch ein weiteres Unterscheidungsmerkmal verwenden.
- Emotionale Wirkungen der Farbtöne und allgemeine Farbkonventionen beachten.
- Komplementärkontraste und Rot-Grün-Kombinationen vermeiden.
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 SilbentrennungIn 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 ­
. 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.