Vertikale Ausrichtung, Zeilenabstand
Gut formattierte Texte zeichen sich vor allem durch einen konsistenten, gleichmäßigen vertikalen Rhythmus aus. Das
bedeutet, dass sämtliche Zeilenabstände und Absätze so gesetzt werden, dass der Abstand zwischen zwei Zeilen immer
ein ganzzahliges Vielfaches des Grundabstands ist. Dementsprechend müssen nun sämtliche Angaben für
line-height, margin und padding gesetzt werden.
Zeilenabstand
Der Zeilenabstand ist eine elementare typographische Größe und hat großen Einfluss auf die Lesbarkeit eines Textes. Ist der Zeilenabstand zu groß, fällt es dem Auge schwer, von einer Zeile in die nächste zu springen, ist er zu klein, fällt es schwer, sich auf nur eine Zeile zu konzentrieren. Als Standard-Richtwert für Printmedien gilt hier 1,2-fache der Schriftgröße, für die Darstellung auf dem Monitor darf jedoch ein größerer Zeilenabstand gewählt werden, damit sich das Auge auch beim Überfliegen eines Textes auf eine Zeile konzentrieren kann. Grundsätzlich gilt zudem, dass serifenloser Schriften ein größerer Zeilenabstand benötigen als Serifenschriften.
Aufgrund dieser Überlegungen wählen wir für unser Beispiel als Zeilenabstand für Absätze sowie Listen und Elemente für logische Textauszeichnung das 1,5-fache der Schriftgröße, also 21 Pixel. Um die Skalierbarkeit zu erhalten, geben wir diese Größe jedoch - wie bereits erwähnt - relativ zur Basis-Schriftgröße an:
p,ul,ol {
line-height:1.5em;
}
An diesen Zeilenabstand müssen nun sämtliche anderen vertikalen Abstände angepasst werden, damit der vertikale Rhythmus intakt bleibt.
Absatzabstände
Ein Absatz soll den Text visuell in semantische Absätze aufteilen. Der Zeilenabstand sollte also größer als normal sein, jedoch auch nicht übermäßg groß; analoges gilt für Listen und Zitate. Hier stellt sich die Sache also recht einfach dar:
p,ul,ol,blockquote {
margin-bottom:1.5em;
}
Überschriften
Bei Überschriften wird das ganze schon etwas komplexer: Wollen wir alle sechs Überschriften (h1 bis
h6) schon allein durch ihre Schriftgröße erkennbar auszeichnen, brauchen wir bereits sechs weitere
Schriftgrößen und dementsprechend angepasste Zeilenabstände.
In unserem Beispiel soll die Schriftgröße pro Überschrifts-Klasse um einen Pixel erhöht werden, wir wollen also Werte
von 15 bis 20 Pixel vergeben. Da wir aber mit em arbeiten wollen, ergibt sich für h6 als
Schriftgröße ein gerundeter Wert von 15px : 14px = 1,071em.
Da der Zeilenabstand jedoch identisch dem eines normalen Textabsatzes (21px) sein soll, müssen wir auch hier den Wert
anpassen: 1,5em * (14px : 15px) = 1,4em. Analog ergibt sich für die anderen Überschriften:
h1 {
font-size:1.428em;
line-height:1.05em;
}
h2 {
font-size:1.357em;
line-height:1.105em;
}
h3 {
font-size:1.286em;
line-height:1.167em;
}
h4 {
font-size:1.214em;
line-height:1.235em;
}
h5 {
font-size:1.143em;
line-height:1.313em;
}
h6 {
font-size:1.071em;
line-height:1.4em;
}
Um die ersten drei Überschriften noch stärker vom Fließtext abzusetzen, empfiehlt es sich, hier zusätzlich den oberen
und unteren Absatzabstand zu erhöhen. Um hier flexibler zu sein, erlauben wir diesen drei Schriftarten, den vertikalen
Rhythmus leicht zu durchbrechen: Wir fordern nicht mehr, dass die Grundlinien in das Raster passen, sondern achten nur
darauf, dass das Raster nach der Überschrift wieder eingehalten wird.
Um Konflikte zwischen konkurrierenden margin-Angaben zu vermeiden, wählen wir für diese Absatzangaben
das padding-Attribut.
Der ersten Überschrift geben wir volle zwei Zeilen Platz, indem wir den oberen und unteren Absatzabstand auf
0.525em (10,5px) setzen:
h1 {
padding-top:0.525em;
padding-bottom:0.525em;
}
Die zweite Überschrift soll auch zwei Zeilen Platz bekommen, allerdings soll sie aus semantischen Gründen näher am unteren Rand stehen. Somit setzen wir den oberen Absatzabstand auf (2/3) * 1,105em = 0,737em (14px), den unteren auf (1/3) * 1,105em = 0,368em (7px):
h2 {
padding-top:0.737em;
padding-bottom:0.368em;
}
Analog verfahren wir mit der dritten Überschrift. Es ergibt sich für den oberen Absatzabstand (2/3) * 1,167em = 0,778em (14px), für den unteren (1/3) * 0,778em = 0,389em (7px):
h3 {
padding-top:0.778em;
padding-bottom:0.389em;
}
Logische Textauszeichnung
Bei den inline-Elementen code, dfn, kbd, samp und
var ergibt sich das Problem, dass diese in Firefox und Opera das vertikale Raster sprengen, obwohl sie
korrekte Größenangaben für Schriftgröße und Zeilenabstand bekommen. Dies liegt an der vertikalen Ausrichtung an der
Mittellinie der aktuellen Zeile und kann behoben werden, indem man der vertikalen Ausrichtung einen anderen Wert als
middle zuweist:
code,pre,dfn,samp,kbd,var {
line-height:1.5em; font-size:1em;
vertical-align:bottom;
}
Weitere Textauszeichnungen
Exemplarisch für weitere Textauszeichnungen möchte ich an dieser Stelle einen Text als Randnotiz auszeichnen, der in einer Float-Box vom übrigen Text abgesetzt werden soll, zudem soll diese Box eine kleinere Schriftgröße haben.
Im Beispiel-Quelltext sind bereits zwei Absätze mit der CSS-Klasse left bzw. right bezeichnet.
Diese formatieren wir nun:
.left {
float:left;
margin:0.75em 1em 0.75em 0;
padding:0 0.5em 0 0.5em;
}
.right {
float:right;
margin:0.75em 0em 0.75em 1em;
padding:0 0.5em 0 0.5em;
}
Zusätzlich definieren wir noch eine Klasse für Float-Elemente am Beginn eines Absatzes, um diese oben bündig auszurichten:
.top {
margin-top:0em;
margin-bottom:1.5em;
}
Bei der Schriftgröße gibt es wiederum das übliche zu beachten: Bei Veränderung der Schriftgröße muss auch der Zeilen- und ggf. der Absatzabstand angepasst werden:
.small {
font-size:0.857em;
line-height:1.75em;
}
p.small {
margin-bottom:1.75em;
}
Hinweis:
Die Formattierung der Float-Box gilt natürlich in dieser Form nur, sofern die Box die Basis-Schriftgröße hat. Deswegen muss z.B. für die Verkleinerung der Schriftgröße ein zweites Element innerhalb der Box verwendet werden, oder alternativ die Abstände für die Box verändert werden.
Anwendung
Unsere Beispiel-Seite enthält jetzt folgende Formattierungen:
- Entfernung der Browser-Voreinstellungen
- Wahl der Schriftarten
- Anpassung der vertikalen Abstände