Sizing does matter!

Eine Übersicht der wichtigsten CSS Maßeinheiten

Größenvergleich

Sicherlich nicht die neueste News, allerdings ein essentielles Thema im Bereich Design und Layout, dem imho teilweise wenig Beachtung geschenkt wird. Das Festlegen des Layouts und der Schrift, und vorallem welches Maß dafür genutzt wird ist eine Wissenschaft für sich und sollte sorgfältig abgestimmt sein. Ein Job, der jeodch nicht immer einfach ist. Uns stehen dazu heute diverse Helferlein und Maßeinheiten zur Verfügung, von denen ich einige aufzählen und beschreiben will.

px

Die Angabe der Schriftgröße in Pixel ist wohl die älteste und konservativste Form. Sie ist sicher und zuverlässig. Da die Erscheinung der Schriftgröße von der Auflösung des Ausgabegerätes abhängt zählt man die Einheit »px« zu den relativen Einheiten.Dennoch weist sie eine Beständigkeit auf, die in Zeiten von responsive Design nicht immer gewünscht ist. Wird die Schriftgröße auf 14px gesetzt ist diese konsistent 14px hoch, gemessen an Ober- und Unterlänge der Buchstaben. Benutzer des Internet Explorers haben außerdem keine Möglichkeit die Schriftgröße anzupassen (nicht zu verwechseln mit dem Zoom, der ja alle Elemente der Seite vergrößert).

em

Im Gegensatz zum Printbereich entspricht 1em nicht der Breite eines *Gevierts*, vielmehr ist die Größe anhängig vom Elternelement und der aktuellen Browsereinstellungen. Da die Schriftgröße in den meisten Browsern mit 16px voreingestellt ist entspricht 1em auch 16px. Um den Hirnschmalz möglichst zu schonen hat sich eine Technik etabliert, die die Rechnerei vereinfachen soll.

body { font-size:62.5%; }	/* =10px */
h1 { font-size: 2.4em; } 	/* =24px */
p  { font-size: 1.6em; } 	/* =16px */
li { font-size: 1.6em; } 	/* =16px */

Die Schriftgröße des body-Elements wird auf 10px eingestellt, womit leicht zu rechnen ist. Meiner Meinung nach kann man sich damit aber ins eigene Fleisch schneiden. Da die Schriftgröße kaskadiert, wäre in diesem Beispiel eine Liste in einer Liste nicht 16px groß sondern schon 22px. Die Reihe kann man beliebig forsetzen. Kompliziert wird es ebenfalls, wenn sich ein Element, dem explizit eine Schriftgröße zugewiesen wurde, in einem anderen Element mit explizit zugewiesener Schriftgröße befindet. Um solche Sachen zu fixen müsste all solchen Elemente wiederum eine feste Schriftgröße zugeordnet werden, was das Coden wirklich nervig macht.

Ich würde eher dazu tendieren dem body-Element die eigentlich gewünschte Schriftgröße zu verpassen. Damit scheint zunächst das Rechenproblem wieder aufzutauchen, jedoch hat man keine Probleme mit den vielen verschiedenen Größen und das Coden ist wird angenehmer. Man definiert lediglich die Elemente, die aus der Reihe tanzen (meist nur Überschriften) und fertig. Auch wenn das gesamte Layout (elastisch) auf »em« basiert ist dieser Reset für meinen Geschmack unnötig. Aber auch das ist ja ein alter Hut, also weiter zum interessanten Teil.

rem

Man erkennt im Namen schon die Verwandschaft zu »em«, dass »r« bedeutet »root«. Man bezieht sich bei der Größenangabe nämlich nicht auf das Elternelement, sondern auf das Rootelement , wodurch das »Problem« der Vererbung gelöst wäre. Sowohl Internet Explorer < 9, als auch Opera unterstützen die Einheit nicht, was mich aber nicht stört, denn ich sehe im Moment keinen Grund »rem« zu benutzen. Ich würde sogar sagen mit Erschaffen dieser Einheit wird konfuses CSS unterstützt. Die Größeneinheit wurde anscheinend nur wegen der 62.5%-Sache und der fehlenden Rechenlust erschaffen - für mich etwas unverständlich. Benutzt man nämlich von vornherein die eigentlich benötigte Größe gibt es keinen Grund »rem« zu benutzen.

vw/vh/vm

Die neueste Erfindung »viewport width« und »viewport height« sind Größenangaben relativ zum aktuellen Sichtbereich oder Viewport. Für den Internet Explorer 9 (ja, nur der IE9 unterstützt bisher diese Einheiten) könnte man die Größe einer Lightbox z.B. folgendermaßen festlegen:

.lightbox{ width:100vw; }

1vw/vh ist also 1/100 Breite/Höhe des aktuellen Viewports. Für die restlichen Browser benötigt man für solche Sachen, wie bisher, JavaScript. Die Einheit »vm« bezeichnet entweder die Höhe oder Breite des Viewports, je nachdem welche gerade kleiner ist.

CSS3 bietet wirklich eine ganze Palette neuer Einheiten und Größen. Wer Zeit und den Nerv hat kann mal einen Blick in den aktuellen Editor's Draft riskieren. Da wird noch einiges auf uns zukommen.