Grundlagen: CSS
Typografische Grundlagen in CSS
In diesem Artikel geht es um die grundlegenden Elemente zum korrekten Setzen von Texten auf Webseiten sowie um die grundlegenden Möglichkeiten, Texte per CSS zu layouten.
Schrift
Schriftfamilie
Dieser Absatz ist in Garmond, Baskerville oder "Times New Roman" gesetzt.
Über CSS definiert man, welche Schrift eingesetzt und wie diese gesetzt wird. Dazu definiert man so genannte »font stacks« per CSS. Unter einem font stack versteht man die Abfolge verschiedener Schriftfamilien, wobei der erste Eintrag die höchste Priorität hat. Kann der Browser auf die dort angegebene Schrift nicht zugreifen, z. B. weil sie im Browser nicht installiert ist, nutzt er die nächste verfügbare Schriftfamilie im font-stack. Der letzte Eintrag im font stack definiert jeweils allgemein, welche Art von Schrift verwand werden soll, falls keine der angegebenen Schriften vorhanden ist.
/* font-family: Ideal, Alternativ, Common, Generic; */
p {
font-family: Garamond, Baskerville, "Times New Roman", serif;
}
In den font stack können auch mehr als 4 Schriften aufgenommen werden, im obigen Beispiel wären z. B. noch »Baskerville Old Face« und »Hoefler Text« als Alternativen möglich.
…font stacks are ultimately design factors,
and should be scrutinized as such.Nathan Ford, Better CSS Font Stacks
Welche Schriften man in den font stack aufnimmt, sollte man nicht dem Zufall überlassen, sonder abhängig machen von der Verfügbarkeit der Schriften auf unterschiedlichen Systemen. Eine Übersicht über die Verbreitung von Schriften auf den unterschiedlichen Systemen gibt es hier. Auf der selben Seite gibt es auch einen »Font stack builder«, um passende stacks zu definieren.
Ein schönen Artikel der sich speziell mit diesem Thema beschäftigt, gibt es von Amrinder Sandhu: Revised Font Stack. Sandhu wiederum bezieht sich auf einen Artikel von Nathan Ford.
Durch neue Browser-Versionen besteht die Möglichkeit, über @font-face die Schrift-Datei direkt an den Browser zu schicken, so dass die entsprechende Schrift auch dargestellt wird, wenn sie nicht auf dem Rechner verfügbar ist. Mehr dazu in einem eigenen Artikel.
Schriftgröße
Die Schriftgröße kann mit Hilfe unterschiedlicher Einheiten definiert werden. Diese sind Ems, Punkt, Pixel und Prozent. Auf mögliche vorbelegte Schlüsselwörter zur Schriftgröße gehe ich hier nicht weiter ein, da diese sehr limitierend sind und eine wirkliche Kontrolle über die Schriftgröße vermissen lassen.
Ems
Ein »em« ist die ungefähre Laufweite des Buchstabens »M« und entspricht einem typografischen Geviert. Em ist dabei eine relative Maßeinheit, bei einer elementeigenen Schriftgröße von 12 Punkten entspricht 1 em gleich 12 Punkten.
Über Ems lässt sich die Schriftgröße relativ zur umgebenden Schriftgröße festlegen. Em-Angaben werden also auf untergeordnete Elemente vererbt.
p {
font-size: 0.8em;
}
strong {
font-size: 1.5em;
}
Im obigen Beispiel wird die Schriftgröße für Absätze etwas kleiner eingestellt als die Standardschriftgröße des Browsers (0,8 × Standardgröße, also 80 Prozent). Eine innerhalb des Absatzes als strong ausgezeichnete Textpassage wird wiederum eineinhalb mal größer als die Schrift im Absatz gesetzt. Gehen wir von einer Standardschriftgröße des Browsers von 16 Pixeln aus, ergibt sich so für den Paragraphtext ein Größe von 12,8 Pixeln (0,8 × 16) und für den mit strong ausgezeichneten Text innerhalb eines Paragraphen ein Größe von 19,2 Pixeln (0,8 × 16 × 1,5). Die Schriftgrößen werden in diesem Fall vom Browser gerundet.
Die Verwendung von »em« ist die vom W3C empfohlene Methode zur Definition von Schriftgrößen.
Punkte
Ein Punkt (engl. Point) ist als 1/72 Zoll (Inch) definiert. Auf Mac Systemen, die Bildschirmauflösungen mit 72 dpi berechnen, entspricht ein Punkt somit einem Pixel. Windows rechnet hier mit 96 dpi, somit entspricht 1 Punkt dort 1,3 Pixeln.
Die Folge: Eine 10pt-Schrift ist unter Mac 10 Pixel hoch, unter Windows 13 Pixel.
Schrift auf Webseiten sollte darum allenfalls in Druck-Stylesheets als Punkt gesetzt werden, da es sonst zu sehr unterschiedlichen Darstellungen auf verschiedenen Systemen kommt.
Pixel
Schriftgröße kann auch in Pixeln angegeben werden. Diese Größeneinheit wird von Vielen favorisiert, da sie Angaben von Größen in Pixeln aus dem Screenlayout gewöhnt sind. Außerdem tritt hier nicht das Problem der Vererbung von Größen auf, wie dies bei prozentualen Angaben und Ems auf der Fall ist. Es ist einfacher, Text in Pixeln zu setzen, da man davon ausgehen kann, dass Text in 12px auch immer als solcher dargestellt wird.
Allerdings können Pixel-Angaben von einigen Browsern nicht skaliert werden (IE6 und IE7). Sehbehinderte Besucher der Seite mit dem Internet Explorer haben so keine Möglichkeit, die Textgröße an ihre Bedürfnisse anzupassen. Er wird immer in der vorgegeben Pixelgröße dargestellt.
Was ist nun zu empfehlen?
Schriftgrößen sollten in Ems definiert werden, wobei man von einer Standardgröße von 16 Pixeln in den Browsern ausgeht. Aufgrund eines Bugs in älteren Versionen des Internet Explorers definiert man die Standardgröße auf 100 Prozent und setzt eine Zeilenhöhe von 1.125em als Standard. Ausgehend von diesen Werten, die am body-Tag definiert werden, setzt man die übrigen Schriftgrößen.
body {
font-size: 100%;
line-height: 1.125em; /* 16 x 1.125 = 18 */
}
p {
font-size: 0.75em; /* 16 x 0,75 = 12 */
}
h1 {
font-size: 1.125em; /* 16 x 1.125 = 18 */
}
Zusätzlich definiert man im Quelltext der Seite noch eine weitere Anweisung für alle Browser außer dem IE, um bei diesen die Standardschriftgröße ebenfalls auf 16 Pixel zu setzen:
body {
font-size: 16px;
}
Die Angaben in der ersten Zeile des obigen Beispiels und in der letzten Zeile werden »Conditional comments« genannt und schließen in diesem Fall alle Internet Explorer Versionen vom eingeschlossenen CSS aus.
Textausrichtung
Absätze lassen sich entweder links-, zentriert– oder rechtsbündig ausrichten. Zusätzlich ist auch noch der Blocksatz möglich.
Dieser Absatz ist linksbündig.
p {
text-align: left; /* or right */
}
Richtet den Text links– oder rechtsbündig aus.
Dieser Absatz ist zentriert.
p {
text-align: center;
}
Richtet den Text zentriert aus.
Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus.
p {
text-align: justify;
}
Richtet den Text im Blocksatz aus. Blocksatz sollte allerdings nicht ohne eine entsprechende Silbentrennung verwendet werden. Ansonsten entstehen große Lücken im Text, die den Lesefluss erheblich einschränken. Da aber bislang kein Browser automatisch eine Silbentrennung durchführt, ist es mit sehr viel Aufwand verbunden, Texte mit entsprechenden Zeichen zu verehen (mehr im Artikel zur Zeichensetzung).
Schriftschnitte
Unter Schriftschnitten versteht man Variationen einer Schriftart. Üblicherweise variieren Schriftschnitte in der Schriftstärke (fett), Schriftbreite und in der Schriftlage (kursiv). Legt man Wert auf Qualität, werden dabei nicht einfach nur die Schriftzeichen vom Rechner verändert, sondern die Schrift liegt in einem entsprechend gestalteten eigenen Schnitt vor. Dies ist besonders wichtig beim Einsatz von web-fonts.
Einige Schnitte lassen sich über die Eigenschaft font-style definieren.
Kursiver Schriftschnitt.
p {
font-style: italic;
}
Die normale Variante wird hier mit dem Wert normal definiert.
In Schriftstärke 100 gesetzt.
In Schriftstärke 300 gesetzt.
In Schriftstärke 500 gesetzt.
Neben den fetten Schriftschnitten gibt es bei einigen Schriften noch eine Reihe weiterer Abstufungen. Definiert werden diese über die Eigenschaft font-weight.
p {
font-weight: bold;
}
Definiert den fetten Schriftschnitt. Neben bold gibt es noch die Variablen normal (normale Schriftstärke), lighter (dünner als normal falls vorhanden), bolder (fetter als fett falls vorhanden).
Daneben gibt es noch die Möglichkeit, die verschiedenen Schnitte genauer über numerische Werte zu definieren.
200 = -
200 = thin
300 = light
400 = regular / CSS: normal
500 = medium
600 = -
700 = bold / CSS: bold
800 = black
900 = heavy
Kapitälchen
Kapitälchen sind ein eigener Zeichensatz. Sie gleichen Versalien in der Höhe von Kleinbuchstaben, mit dem Unterschied, dass sie etwas breiter laufen und ihre Strichstärke so breit ist wie bei der übrigen Schrift.
Unechte Kapitälchen
p {
font-variant: small-caps;
}
Auf Webseiten werden in der Regel unechte Kapitälchen eingesetzt, da die Schriftart entweder keine echten Kapitälchen enthält oder man nicht auf diese zugreifen kann. Mit der @font-face-Technik und entsprechenden Schriften hat man hier jedoch die Möglichkeit, echte Kapitälchen einzusetzen.
Versalien
Versalien
Man kann per CSS Textpassagen auch in Versalien (Großbuchstaben) umwandeln, um den Text entsprechend auszuzeichnen. Dies sollte aber nur bei kurzen Passagen wie Überschriften gemacht werden, da Text in Versalien nur sehr schwer lesbar ist. Hier auf der Seite wird dies z. B. bei einigen Überschriften gemacht.
h1 {
text-transform: uppercase;
letter-spacing: 0.1em;
}
Die umgekehrte Möglichkeit mit lowercase kann auch eingesetzt werden, um Passagen in Minuskel (Kleinbuchstaben) umzuwandeln. Mit capitalize wandelt man nur den ersten Buchstaben jedes Wortes in eine Versalie.
Unter-, Über– und Durchstreichungen
Wörter können unterstrichen, überstrichen oder durchgestrichen werden.
Textpassagen lassen sich per CSS einfach unterstreichen. Es ist auch möglich eine Linie über dem Textabschnitt anzeigen zu lassen oder den Text durch-zu-streichen.
h1 {
text-decoration: underline;
}
Sollen nur einzelne Abschnitte innerhalb eines Textblocks unterstrichen werden, definiert man eine entsprechende Klasse und weist diese dem Abschnitt mit Hilfe des span-Elements zu.
span.underline {
text-decoration: underline;
}
Neben underline (Linie unter dem Text) gibt es noch die möglichen Werte none (keine Linie), overline (Linie über dem Text) und line-through (durchgestrichen).
Farbe
Ich bin grün…
Die Schriftfarbe wird über die Einstellung color definiert. Der Farbwert kann entweder als hexadezimaler Wert, RGB oder RGBA angegeben werden. RGBA wird nur von neueren Browsern unterstützt.
p {
color: #8fdb63;
}
Aufgrund des hohen Kontrastes von Monitoren wird Text häufig nicht in schwarz gesetzt, sondern in einem dunklen Grauton.
Horizontaler Textfluss
Angenehmes Lesen ist hauptsächlich abhängig von zwei Faktoren: der Zeilenlänge und dem Zeilenabstand. Dabei gilt: Die perfekte Zeilenlänge gibt es nicht. Sie ist immer abhängig von der verwendeten Schriftart und Schriftgröße. Es gilt aber auch, dass zu lange und zu kurze Zeilen ermüdend wirken, da das Auge zu lange der Textzeile folgen oder zu häufig umspringen muss. Die Zeilenlänge sollte also mit Bedacht gewählt werden. Als Richtwerte kann man von 50–70 Zeichen (8–11 pt Schriftgröße) bei einspaltigem Text und von 40–50 Zeichen bei mehrspaltigem Text ausgehen.
Wortabstand
Über die CSS-Eigenschaft word-spacing lässt sich der Abstand (Leerraum) einzelner Wörter innerhalb einer Zeile setzen.
Dieser Text hat Lücken.
p {
word-spacing: 1em;
}
Zeichenabstand
Die Laufweite eines Textes lässt sich per CSS ändern. Dabei wird der Abstand einzelner Zeichen zueinander erhöht oder verringert. In der Typografie wird dies Spationieren genannt. Wird der Text so stark spationiert, dass sich der Text von der normalen Laufweite deutlich absetzt, spricht man von »Sperren«.
Dieser Text ist gesperrt.
p {
letter-spacing: 0.4em;
}
Vertikaler Textfluss
Der vertikale Textfluss wird bestimmt durch die Textgröße, den Zeilenabstand und die Abstände zwischen Textblöcken. Diese Werte können per CSS beeinflusst werden.
Zeilenabstand
Der Zeilenabstand ist definiert durch den Abstand von Grundlinie zu Grundlinie. Den Abstand zwischen den Unterlängen der ersten Zeile und den Oberlängen der nächsten Zeile bezeichnet man als Durchschuss.
Der Zeilenabstand lässt sich mit line-height festlegen. Dabei sollte line-height nie als absoluter Wert (px oder pt) angegeben werden, sondern immer als Faktor der Textgröße (em).
Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
p {
font-size: 12px;
line-height: 1.5em;
}
Zur Vereinfachung habe ich in diesem Fall die Schriftgröße als Pixelwert angegeben. Durch die Definierung der Zeilenhöhe als 1.5em kommt man so auf eine Gesamthöhe jeder Zeile von 18 Pixel (12 × 1,5). Der Durchschuss beträgt hier 6 Pixel (18 − 12 = 6).
Je länger eine Zeile ist, desto größer muss der Zeilenabstand sein, um den Text angenehm lesen zu können. Als Standard kann man von einen Zeilenabstand von 120 Prozent also 1.2em ausgehen.
Abstand zwischen Textblöcken
In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit.
Proin metus odio, aliquam eget molestie nec, gravida ut. Praesent id metus massa, ut blandit odio. Proin quis tortor.
Um einen angenehmen vertikalen Textfluss zu erreichen, sollte man den Abstand zwischen Textpassagen auf die Zeilenhöhe abstimmen. Das erreicht man durch entsprechend definierte margins.
p {
font-size: 12px;
line-height: 1.5em;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
Bei Variation der Textgröße, z.B. bei Überschriften, sollten der Zeilenabstand und der Abstand zwischen den Textbereichen proportional der Zeilenhöhe des Fließtextes entsprechen. Um dies zu erreichen, passt man die line-height und margin-Werte entsprechend an.
h2 {
font-size: 14px;
line-height: 1.286;
margin-top: 1.286;
margin-bottom: 1.286;
}
Wie kommen diese Werte zustande? Überschriften zweiter Kategorie haben in diesem Fall eine Schriftgröße von 14 Pixeln. Bei einer zu Grunde liegenden Zeilenhöhe von 18 Pixeln sollte die Zeilenhöhe in diesem Fall 18 ÷ 14 = 1.286 sein. Die Abstände werden entsprechend angepasst.
Die margins können auch unsymmetrisch angelegt werden. So kann z.B. ein oberer Abstand von 1½ Zeilen mit einem unteren Abstand von einer halben Zeile kombiniert werden.
h2 {
line-height: 1.286;
margin-top: 1.929em;
margin-bottom: 0.643em;
}
Ein hilfreiches Tool zur Berechnung von Schriftgrößen und Abständen ist der CSS-Typeset Matrix and code generator von Jan Quickels.
Bilder im Text
Damit Bilder im Text den Textfluss nicht stören, sollten sie immer der Zeilenhöhe angepasst sein. Die Höhe des Bildes entspricht also immer einem Vielfachem der Zeilenhöhe.
Damit es hier nicht zu Problemen kommt, wenn ein Besucher der Seite die Schriftgröße per Browser verstellt, kann man die Größe der Bilder per CSS in ems definieren. Somit skalieren die Bilder bei der Vergrößerung der Schriftgröße.
Ein 180 Pixel hohes Bild (10 Zeilen hoch) würde eine Höhe von 180 ÷ 12 = 15em bekommen (12 ist gleich der Basis-Schriftgröße von 12px). Eine dynamische Matrix zum Umrechnen von px in em gibt es hier.
Textumbruch
Leerraum
Browser rendern Text anders, als dieser im Quelltext angegeben wurde. So werden mehrere aufeinander folgende Leerzeichen z.B. durch ein einzelnes Leerzeichen ersetzt und Zeilenumbrüche im Quelltext nicht dargestellt, es sei denn sie werden mit dem br–Element erzwungen.
Dies hat den Vorteil, dass sich der Quelltext bezüglich seiner Lesbarkeit entsprechend formatieren lässt, ohne Einfluss auf die Darstellung der Webseite zu nehmen.
Will man diese Eigenschaft der Browser für bestimmte Inhalte einer Webseite deaktivieren, nutzt man dafür das pre–Element.
Mit der CSS–Eigenschaft white-space lässt sich ebenso festlegen wie der Browser mit Zeilenumbrüchen und Leerzeichen im Text umgehen soll:
p {
white-space: normal;
}
Zeilenumbrüche im Quelltext werden nicht dargestellt. Mehrere aufeinander folgende Leerzeichen werden zu einem Leerzeichen zusammengefügt. Der Browser fügt einen Zeilenumbruch am Ende der Zeile ein.
p {
white-space: pre;
}
Zeilenumbrüche und Leerzeichen werden wie im Quelltext angegeben dargestellt, genauso wie bei Verwendung des HTML– Elements.
p {
white-space: nowrap;
}
Der Browser führt keine automatischen Zeilenumbrüche am Zeilenende durch. Linksbündiger Text wird also am rechten Rand eines HTML– Elements nicht umgebrochen, sondern läuft über den Rand hinaus. Zeilenumbrüche im Quelltext werden nicht dargestellt, Leerzeichen zusammengefasst. Entspricht der Verwendung des HTML–Elements.
p {
white-space: pre-wrap;
}
Wurde mit CSS 2.1 eingeführt. Leerzeichen und Einrückungen werden aus dem Quelltext übernommen. Zusätzlich erfolgt ein automatischer Zeilenumbruch am Zeilenende. Wird im Internet Explorer seit der Version 8, im Firefox seit der Version 3.0 und in Safari, Chrome und Opera unterstützt.
p {
white-space: pre-line;
}
Wurde mit CSS 2.1 eingeführt. Leerzeichen im Quelltext werden zusammengefasst. Zeilenumbrüche werden wie im Quelltext angegeben, wenn sie durch das br–Element erzwungen oder am Zeilenende durchgeführt werden. Wird im Internet Explorer seit der Version 8, im Firefox seit der Version 3.5 und in Safari, Chrome und Opera unterstützt.
Eingesetzt wird hauptsächlich nowrap – um zu verhindern, dass zu langer Text z.B. bei einem Link in die nächste Zeile umbricht.
Vorgehen bei zu langen Texten
Bei Texten innerhalb von festgelegten Containern kann es vorkommen, dass einzelne Wörter oder der ganze Text über den Container hinauslaufen. Um dies zu verhindern, bestehen zwei Möglichkeiten: Man kann eine Trennung langer Wörter erzwingen, oder den Text automatisch kürzen.
Worttrennung
Das längste deutsche Wort ist Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft laut dem Guiness Buch der Rekorde.
Gerade im Deutschen gibt es teilweise sehr lange Wörter. Mit der CSS–Eigenschaft word-wrap kann man den Browser zwingen, solche Wörter zu trennen, wenn sie über die Zeilenbreite hinauslaufen würden. Die Trennung erfolgt an beliebiger Stelle und folgt keinen Regeln.
p {
word-wrap: break-word;
}
Die Eigenschaft verfügt über nur zwei mögliche Werte, normal (keine Trennung) und break-word (Trennung an beliebiger Stelle).
Texte kürzen
Das längste deutsche Wort ist Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft laut dem Guiness Buch der Rekorde.
Mit Hilfe von text-overflow ist es möglich, Text zu kürzen, wenn er über den ihn umgebenen Container hinausläuft.
p {
width: 100%;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
Definiert wird die Eigenschaft am umgebenden Element. Das Element muss eine gesetzte Weite haben, damit der IE6 die Eigenschaft interpretiert.
Unterstützt wird die Möglichkeit seit dem Internet Explorer 6 und in Safari. Für Opera muss man die herstellerspezifische Angabe (-o-) angeben. Firefox schneidet den Text einfach ab und zeigt keine Ellipsis an.
Das längste deutsche Wort ist Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft laut dem Guiness Buch der Rekorde.
Setz man zusätzlich noch white-space auf nowrap, limitiert man den Text auf eine Zeile.
Automatische Anführungszeichen
Statt Anführungszeichen im Quelltext einer Seite zu setzen, gibt es auch die Möglichkeit, entsprechende Textpassagen mit ‹q›–Tags zu kennzeichnen.
Karl Mustermann sagte
Dies ist ein Zitat.
Standardmäßig stellen Browser den eingeschlossenen Textblock in oben stehenden doppelten Anführungszeichen dar. Das quote-Tag führt dabei nicht zu einem Zeilenumbruch, so das auch Passagen im Fließtext ausgezeichnet werden können.
Ein Vorteil der quote-Tags: Sie lassen sich per CSS gestalten, z. B. in Abhängigkeit von der Sprache. So lassen sich etwa typografische Anführungszeichen per CSS deklarieren, auch die Verschachtelungstiefe lässt sich mit angeben:
html[lang="de"] q {
quotes: "»" "«" "›" "‹"
}
html[lang="fr"] q {
quotes: "«" "»" "‹" "›"
}
q:lang(de) {
quotes: "»" "«" "›" "‹"
}
q:lang(fr) {
quotes: "«" "»" "‹" "›"
}
Bei den Sprachangaben handelt es sich um einen CSS Pseudo-Selektor. Damit die Auswahl der Sprache über entsprechende Selektoren funktioniert, muss den HTML-Elementen im Quelltext ein entsprechendes Sprachattribut mitgegeben werden. Unter CSS3.info gibt es einen Test, um die Kompatibilität und Unterstützung von verschiedenen Selektoren im Browser zu testen.
Leider wird dies nicht von allen Browsern korrekt umgesetzt. So zeigt der Internet Explorer 6/7 keine Anführungszeichen an.
Safari zeigt die Anführungszeichen auch nicht an, da er die CSS Eigenschaft quotes nicht versteht. Hier gibt es aber eine Lösung.
q:before {
content: "201E";
}
q:after {
content: "201C";
}
Die Anführungszeichen sind hier im Unicode angegeben.
Allerdings werden durch diese Deklaration eventuell vorhandene Sprachangaben auch für andere Browser überschrieben. Daher muss bei vorhandenen Sprachangaben die Deklaration genauer werden:
q[lang~='de']:before {
content: "201E"
}
q[lang~='de']:after {
content: "201C"
}
Weitere Details finden sich in einem Artikel bei David’s Kitchen.