Größen

1. Textgestaltung mit CSS 2.1 - So zähmen Sie Texte
2. Größen
3. Browser-Bugs und Inkompatibiliäten, CSS3
4. Text am Grundlinienraster
5. Absätze und Überschriften
6. Listen und Floats

Wenn Sie als Einheit für die Formatierung von Text px verwenden, sollten Sie außerdem beachten, dass in px definierter Text die Zeichengröße (die Eigenschaft font-size) von seinem Vaterelement nicht erben kann (er kann sie aber wohl an seine Kinderelemente vererben, sofern diese eine Einheit benutzen, die das Erben zulässt, wie etwa em, Prozente oder Schlüsselworte).

© Archiv

Sollte der Auftraggeber seine Meinung ändern und Größenänderungen der Schrift wünschen, weil er die Webseite plötzlich auf einem anderen Display gesehen hat, stehen Sie vor einem Problem. Es ist ziemlich aufwendig, die Textgröße, den Zeilenabstand und andere Parameter einer in px angelegten Webseite konsistent im ganzen Dokument zu vergrößern oder zu verkleinern. Wenn Sie statt px einfach em verwenden, können Sie diese Anpassung ganz leicht umsetzen.

Der Einsatz der Einheit Punkt (pt) erzeugt Text statischer Größe mit fest definiertem Zeilenabstand. Diese Einheit eignet sich nur für Stylesheets für die Druckausgabe. 72 Punkte gleichen einem Zoll auf dem Ausdruck, jedoch nicht auf dem Bildschirm, denn hier kann die Auflösung erheblich schwanken und darüber hinaus gehen Webbrowser bei der Anzeige von Text in Punkt sehr ignorant zur Sache, indem Sie die erforderliche Umrechnung von Punkt auf die tatsächliche Bildschirmauflösung sehr ungenau durchführen.

Die relative Einheit em ist meist schwieriger zu handhaben als absolute Einheiten wie px und pt, weil viele Webdesigner ihre Arbeitsweise nicht wirklich verstehen.

1 em entspricht der aktuellen Schriftgröße des betreffenden Textabschnitts (historisch gesehen entsprach em ursprünglich der Breite des Buchstaben m). Wenn Sie als Einheit em nutzen, aber die Textgröße nirgendwo definiert haben, nimmt der Browser als Berechnungsgrundlage seinen eigenen Standardwert (in der Regel 16 px). Doch das ist nicht alles. Zwei verschiedene Zeichensätze in

font-size: 1em;

sehen auf dem Bildschirm unterschiedlich groß aus, weil das Zeichen m verschiedene Breiten einnimmt.Wenn Sie Zeichengrößen wie beispielsweise 1.2 em verwenden, muss der Browser die aktuelle Schriftgröße mit 1,2 multiplizieren und das Resultat gegebenenfalls abrunden. Doch auch Rundungsfehler werden wiederum durch andere Elemente vererbt. Als Folge daraus sieht das Resultat dann in zwei Browsern unterschiedlich aus und Sie wissen nicht, warum das so ist.Als Workaround können Sie dem body-Element die Schriftgröße 62,5 Prozent zuweisen. Da der Browser von der Schriftgröße 16px ausgeht und diese jetzt mit 0,625 multipliziert, beträgt die resultierende Ausgangsschriftgröße genau 10px, wobei sie anders als im Falle von

font-size: 10pt;

jetzt an untergeordnete Textelemente weitergegeben (also vererbt) wird (das sogenannte cascading).

Selbstverständlich ist Text in 10px zu klein zum Lesen, aber darum geht es gar nicht. Wenn Sie als Standardschriftgröße 10px in em festlegen, können Sie davon jede benötigte Schriftgröße ohne Rundungsfehler ableiten. So können Sie zum Beispiel 16px einfach als 1.6em anlegen.

Diese Methode hat mehrere Vorteile. Der Benutzer kann in allen Webbrowsern den Text selbst vergrößern. Sie können Layouts mit elastischer Spaltenbreite weitaus einfacher umsetzen, da auch margin- und padding-Abstände in em mitskalieren und die aktuelle em-Einheit an Kindelemente weitergegeben wird.