Stil mit {stil}

Dez 2009

Maßeinheiten

CSS bietet Schriftgrößen in vier Maßeinheiten: Pixel, Prozent, em (ex) oder als Schlüsselwort wie smaller, larger oder x-small, x-large. Auch die Breite und Höhe von Layoutblöcken oder Tabellen kann absolut als Pixel oder relativ in Prozentwerten geregelt werden.

Dazu kommen Maßeinheiten wie cm, inch, mm, pt und pc, die sich aber für die Wiedergabe auf dem Monitor nicht eignen, sondern für den Druck gedacht sind.

Da die Auflösung der Monitore vom kleinen Notebook bis zum 30"-Monitor immer weiter differiert, wird ein konsistentes Layout mit der Wahl der Schriftgrößen immer komplexer.

Monitor-Auflösung bei den Besuchern einer Kleinstadt

Prozent, EMS (em) • Skalierbare Schriftgrößen, flexibles Layout

Mit em für Schriftgrößen oder Abmessungen wie der Breite eines div-Blocks entsteht ein flexibles Layout, dass sich an die Auflösung des Monitors beim Besucher anpassen kann. Benutzer mit extrem hohen Auflösungen können bei der Angabe von em für Schriftgrößen den Text auf dem Monitor vergrößern.

Wie wirken Schriftgrößen auf kleinen und großen Monitoren?

• Internet Explorer Menüleiste: Ansicht Textgröße, einstellbar sind Mittel (Vorgabe), Größer, Kleiner, Am größten, Am kleinsten
• Safari, Firefox auf dem Mac: cmd +/-

EMS für Layoutblöcke | Wenn Breite, padding und margin – z.B. bei Tabellen oder für div-Blöcke in em im Stylesheet notiert sind, wachsen die Blöcke mit, wenn der Benutzer die Darstellung der Seite im Browser ändert.

% (Prozent) | Ähnliche Effekte wie mit der Angabe von em erzielt die Definition von Schriftgrößen und Breiten von Layout-Elementen in Prozent (%). Bei normaler Schriftgröße gibt es keinen Unterschied.

px Pixel • Konsistente Schrift, festes Layout

px Schriftgrößen | Zwar wird durch Schriftgrößen in Pixeln eine konsistentere Darstellung erreicht, aber auf dem 13-Zoll Monitor eines Notebooks wird eine Schrift mit 10 px bei einer Bildschirmauflösung von 1024x640 Pixeln anders wirken als auf einem 22-Zoll-Monitor mit einer Auflösung von 1680 x 1050 Pixeln.

Sowohl relative Angaben wie em, % oder smaller/larger als auch absolute Angaben wie px haben Vor- und Nachteile. em für die Schriftgröße ist eine elegante Lösung, die dem Benutzer die Anpassung an die eigenen Sehgewohnheiten erlaubt, während sich mit Schriftgrößen in px ein pixelgenaues Layout umsetzen lässt.