Horizontale Ausrichtung, Wort- und Zeichenabstand
Mit der vertikalen Ausrichtung aus der letzten Sektion haben wir bereits eine solide, gut lesbare Grundlage. Jedoch können wir auch noch bei den horizontalen Abständen einige Dinge verbessern.
In dieser Sektion werden zudem die durch das reset-Stylesheet gelöschten Formattierungen wieder hergestellt.
Wortabstand
Der Wortabstand hat in CSS den Standard-Wert normal, und bezieht diesen Wert aus den internen Angaben
der verwendeten Schriftart. Meist liegt der normale Wortabstand bei ca. 0.25em. Die Besonderheit ist nun,
dass eine Zahlenangabe zu dem Standardwert hinzu gerechnet wird, so ergibt die Angabe word-spacing:0.25em
also einen Wortabstand von ca. 0.5em, also etwa das doppelte der Voreinstellung!
Der korrekte Wortabstand hängt stark von der gewählten Schriftart, -größe und dem Schriftstil (normal, kursiv, fett)
ab. Mir sind nur wenige Faustregeln für einen guten Wortabstand bekannt, es gilt jedoch, dass fette Schriften einen
etwas größeren Wortabstand benötigen und große Schriften generell etwas enger gesetzt werden können.
In unserem Beispiel lassen wir den Standard-Wortabstand unberührt, verkleinern jedoch den Abstand in Überschriften
etwas und vergrößern ihn für fette Schrift:
h1,h2 {
word-spacing:-0.2em;
}
h3,h4 {
word-spacing:-0.15em;
}
h5,h6 {
word-spacing:-0.1em;
}
em {
font-style:italic;
word-spacing:0.1em;
}
strong {
font-weight:bold;
word-spacing:0.1em;
}
An dieser Stelle wurde auch der Schriftstil der Textauszeichnungen em und strong festgelegt,
der bei Anwendung des reset-Stylesheets gelöscht wurde. Es empfiehlt sich generell, anstelle der vermeintlich
gleichbedeutenden Elemente i und b die Elemente em und strong zu
verwenden, da diese auch eine semantische Bedeutung haben und somit auch von Screenreadern u.Ä. interpretiert werden
können.
Zeichenabstand
Beim Zeichenabstand werden in CSS genau wie beim Wortabstand numerische Angaben zum Standardwert hinzu addiert.
Generell sollte der Zeichenabstand im Fließtext auf dem Normalwert belassen werden, denkbar sind höchstens Änderungen in den Überschriften. Die einzig grundsätzlich sinnvolle Anpassung des Zeichenabstands betrifft Abkürzungen, da diese aufgrund meist mehrerer aufeinanderfolgender Versalien etwas enger gesetzt werden sollten:
abbr,acronym {
border-bottom:1px dotted;
}
acronym {
font-variant:small-caps;
letter-spacing:-0.1em;
}
Hier wurden zudem die Unterstreichung der Elemente abbr und definiert und Akronyme in
Kapitälchen gesetzt. Da beides Inline-Elemente sind, ist die Festlegung eines Rahmens anstelle einer Unterstreichung
möglich, ohne das vertikale Raster zu sprengen.
Seitliche Abstände
Seitliche Abstände beeinflussen die Lesbarkeit eines Textes weit weniger als vertikale Abstände. Man sollte lediglich darauf achten, eine einheitliche Formattierung zu wählen, damit ein harmonisches Gesamtbild entsteht. Wir beschränken uns an dieser Stelle also auf die Elemente, die normalerweise einen seitlichen Abstand haben sollten, der aber durch den CSS-Reset gelöscht wurde - namentlich sind das Listen und Zitate:
ul,ol {
padding-left:2em;
padding-right:1em;
}
dl dd {
margin-left:2em;
}
ul {
list-style-type:disc;
}
ol {
list-style-type:decimal;
}
blockquote {
margin-right:2em;
margin-left:1em;
}
Wie zu sehen ist, wurden an dieser Stelle auch die Aufzählungszeichen der Listen wiederhergestellt.
Anwendung
Unsere Beispiel-Seite enthält jetzt folgende Formattierungen:
- Entfernung der Browser-Voreinstellungen
- Wahl der Schriftarten
- Anpassung der vertikalen Abstände
- Anpassung der horizontalen Abstände
- Formattierung von Standard-Elementen