Ausrichtung einer Grundlinie

Hier findet Mark Boulton eine elegante Lösung: Dass alle Texte weiterhin auf einer Linie bleiben, geht nicht, wenn die Zeilenhöhe unterschiedlich ist. Man kann jedoch dafür sorgen, dass beispielsweise jede fünfte Zeile des kleineren Textes mit jeder vierten Zeile des Haupttextes auf einer Linie angeordnet ist.Um den kleineren passenden Wert für die Zeilenhöhe der Sidebar zu berechnen, gibt es folgende Formel: Vier Zeilen des größeren Textes mit einer Zeilenhöhe von 18px ergeben 72px (4 * 18px = 72px). Den so gewonnenen Wert muss man durch 5 teilen, denn vier Zeilen mit der größeren Zeilenhöhe sollen genauso hoch sein wie fünf Zeilen mit der kleineren Zeilenhöhe: 72px : 5 = 14.4px.Das heißt, wenn die Sidebar eine Zeilenhöhe von 14.4px hat und der Hauptteil eine Zeilenhöhe von 18px, so ist die jeweils vierte Zeile des Haupttextes auf derselben Höhe wie die Sidebar. Man muss nur mit dem passenden Wert für margin-top sicherstellen, dass der Text in der Sidebar auf der richtigen Höhe beginnt. Um das Beispiel einfach zu halten, wurde hier mit Pixeln operiert, aber es lassen sich diese gewonnenen Werte auch in em umrechnen.

Zentrieren über line-height

Ein weiterer Einsatzmöglichkeit von line-height ist die Bestimmung der Höhe von Inline-Elementen wie a, strong, em oder span: height wirkt sich bei diesen Elementen nicht aus, ein a { height: 30px; } macht einen Link nicht höher. Allerdings können Sie die Zeilenbox über line-height vergrößern. Dies lässt sich zur Zentrierung einzelner Zeilen ausnutzen: Wenn Sie die Höhe des umgebenden Blockelements auf denselben Wert wie die Zeilenhöhe setzen, wird der Inhalt zentriert.

Die Zentrierung erledigt dieser Code:

Abstand: Wörter und Buchstaben

Über word-spacing und letter-spacing lässt sich der Abstand zwischen den Wörtern und zwischen den Buchstaben genauer steuern. Der Standardwert bei beiden Eigenschaften ist normal, was dem numerischen Wert 0 entspricht.Und das bedeutet, wenn Sie word-spacing: 0 oder letter-spacing: 0 angeben, entfernen Sie nicht die Abstände, sondern belassen sie auf dem normalen Wert. Wie groß dieser konkret ist, hängt von der gewählten Schrift ab und ist als digitale Information innerhalb des jeweiligen Schriftsatzes gespeichert. Bei word-spacing entspricht das häufig 0.25em.Wenn Sie einen positiven Wert bei letter-spacing oder word-spacing nehmen, so wird dieser zum normalen Wert addiert; entsprechend verringert ein negativer Wert den normal vorhandenen Abstand zwischen Buchstaben und Wörtern. Word-spacing und letter-spacing sollten Sie, wenn überhaupt, dann gezielt einsetzen, beispielsweise bei Überschriften. Auf die folgende Art könnte man eine kleine Vorüberschrift etwas gesperrter machen:

sowie bei der eigentlichen großen Überschrift den Abstand zwischen den Zeichen um einen Tick verringern:

Ein Beispiel für diese Anwendung sehen Sie bei coudal.com: Die kleinen Überschriften sind leicht gesperrt, bei den größeren Überschriften ist der Abstand um 1px verringert. Eine minimale Änderung, die sich doch spürbar auswirkt.Praktisch ist letter-spacing ebenfalls bei Abkürzungen, sofern Sie diese mit den entsprechenden HTML-Elementen gekennzeichnet haben:

Weitere Möglichkeiten bei letter-spacing und word-spacing verspricht CSS3. Dort soll es möglich sein, drei Werte anzugeben - für den minimalen, maximalen und den optimalen Abstand. Im Normalfall wird dann der optimale Abstand verwendet, die Maximal- und Minimalwerte könnten hingegen beim Blocksatz herangezogen werden - aber das ist derzeit noch Zukunftsmusik.

1. Richtige Zeilenhöhe für barrierefreie Seiten: www.w3.org/TR/WCAG-TECHS/C21.html  
2. Angepasste Zeilenhöhe bei der Ausrichtung an einem Grid: www.markboulton.co.uk/journal/comments/incremental-leading
3. Online testen, wie sich Veränderungen an Schrifteinstellungen auswirken: www.typetester.org/
4. Eigenschaften für Text in CSS 3: www.w3.org/TR/css3-text/