Masseinheiten im Web  –  relative oder absolute Angaben

Grössenangaben in Illustrations- und Print-Produkten sind meist einfach zu verstehen. Sie bilden ein globales und steifes Koordinatensystem ab. Im Web sind wir aber froh, wenn wir verschiedene Masseinheiten haben, die sich an unterschiedliche Gegebenheiten anpassen können.

Masseinheiten

Seit dem ausgehenden 18. Jahrhundert gibt es mit dem Meter ein standardisiertes Längenmass, das die Kommunikation über Dimensionen vereinfacht. Da wichtige Vertreter der frühen digitalen Grafikprogramme in Amerika beheimatet waren, basieren die Basis-Technologien für die Grafische Industrie häufig noch immer auf Zoll-Angaben. So werden die Massangaben bei PDF zum ­Beispiel intern in Einheiten von ¹⁄₇₂-Zoll gespeichert. Das ist der sogenannte DTP-Punkt.

Ein wenig anders verhält es sich bei Webseiten in HTML. Als im Dezember 1996 der erste Standard für Cascading Style Sheets (CSS) veröffentlicht wurde, waren in dieser Spezifikation bereits zwei Typen von Masseinheiten beschrieben: relative und absolute. Für damalige Verhältnisse fast schon visionär heisst es dort, dass sich Elemente, die per Formatvorlagen durch relative Einheiten definiert sind, leichter von einem Medium zum anderen skalieren lassen. Damals war diese Aussage noch vor dem Hintergrund zu verstehen, dass Websites nicht selten ausgedruckt wurden und somit ein Medienwechsel vollzogen wird. Heute ist die gedruckte Website ein zu vernachlässigender Faktor bei der Wahl einer Masseinheit. Vielmehr gilt es nun, Rücksicht auf verschiedene Ausgabegrössen zu nehmen. Diverse Geräteklassen (Mobile, Tablet, Desktop) haben ganz unterschiedliche Anforderungen, und um nicht alle Grössendefinitionen mehrfach zu schreiben, werden viele Dimensionen durch relative Angaben definiert.

Absolute Angaben

Die wohl am häufigsten verwendete absolute Masseinheit im Webdesign ist die Einheit Pixel, abgekürzt «px». Wenn also ein farbiges Quadrat mit 200 px Kantenlänge festgelegt wird, weiss man, dass es genau so gross auf dem Bildschirm erscheinen wird, wie ein Bild mit einem Flächeninhalt von 200 × 200 px. Viel mehr kann man dazu aber nicht sagen. Denn die effektive Grösse am Gerät des Betrachters kann nicht vorhergesagt werden. Je nach Bildschirmgrösse und Auflösungsdichte des Geräts kann sie variieren. Nicht einmal die intuitive Annahme, dass ein im CSS definiertes Pixel auch ein Pixel auf dem Bildschirm erzeugt, ist richtig. Vielmehr spielt heute die «device pixel ratio» des Geräts eine entscheidende Rolle – ein Verhältnis zwischen Geräte-Pixel und CSS-Pixel das vom Hersteller definiert wird. 

CSS zu Bild

Doch warum erscheinen die Pixel unterschiedlich gross? Die Ausgabe einer Website wird im Browser von einem Renderer gerastert. Je nach Fähigkeit des Screens erzeugt der Renderer ein «Bild» der auszugebenden Elemente. Nachfolgend die Darstellung von einem Bildschirm mit «einem» dunklen Pixel oben links, welches in CSS mit width: 1 px und height: 1 px definiert wurde.

Bild zu Gerät

Je nach Auflösungsdichte und Spezifikation des Geräts werden dann die errechneten Daten auf dem Display ausgegeben. Bei LCD-Displays wird jeder Pixel über ein dreigeteiltes Lichtelement mit den gefilterten Farben Rot, Grün, Blau erzeugt. Bei einem modernen OLED-Display bestehen die Pixel aus einzeln angesteuerten farbigen LEDs.

Natürlich ergibt die Verdoppelung von Pixeln keine bessere Qualität, aber bei Text oder Bildern ist die erweiterte Auflösung hilfreich, um die Schärfe und den Detailreichtum zu erhöhen.

Man sieht an den Beispielen, dass die Ausgabe sehr stark von der Hardware abhängt. Welche Dimension aber ein Pixel effektiv hat, wurde bei der ganzen Berechnung nicht berücksichtigt. Dies ist von Hersteller zu Hersteller anders, wodurch auch die Abbildungsgrösse uneinheitlich wird.

Weitere absolute Masseinheiten

Neben der Masseinheit px gibt es noch weitere absolute Masseinheiten wie beispielsweise «mm» für Millimeter oder «in» für Zoll (engl inch). Diese werden jedoch selten verwendet, da sie ausser bei der Druckausgabe fast keine Rolle spielen. Und auch für den Druck dienen diese Angaben oft nur zur ­Definition der Druckränder, da die Typografie oder der Seitenaufbau meist relativ formatiert wird.

Relative Masseinheiten

Eine der wohl am meisten verwendete CSS-Einheit ist das Prozent, «%». Sie wird vor allem für Breitenangaben genutzt. Die Angabe in Prozent bezieht sich dabei immer auf das umschliessende Objekt. Diese Aufteilung bleibt proportional gleich – unabhängig vom Viewport (Bildschirmausschnitt). Auch lassen sich damit zum Beispiel (mit Tricks) Bilder proportional verkleinern und vergrössern, ohne das Bildverhältnis zu verändern.

EM – relativ zu was schon wieder?

Mit der Einheit «em» wird die Grösse in Relation zur aktuellen Schriftgrösse festgelegt. Dabei kann diese Einheit – wie ebenfalls alle anderen hier besprochenen – nicht nur auf Schrift angewandt werden, sondern auch auf beliebige andere Dimensionen (Grösse, Position, …). Dennoch ist die Bezugsgrösse, worauf sich «em» bezieht die Schriftgrösse. In Gestaltungen ist dies äusserst nützlich, da somit die Angabe in einer Abhängigkeit zur momentanen Schriftgrösse beschrieben wird und eine Skalierung der Schrift auch eine Skalierung anderer Elemente ergibt. Da sich die Angabe immer auf das umschliessende Element bezieht, ist die Verschachtelung der Komponenten entscheidend.

REM – relativ zum Obersten

Bei der Einheit «rem» wird die Grösse immer relativ zur Schriftgrösse des obersten Elements im Dokument (HTML-Tag) angegeben. So können Titelhierarchien bequem aufgebaut werden, ohne dabei auf die Verschachtelung zu achten. Bei der Nutzung anderer Viewports muss dann nur noch die Schriftgrösse entsprechend des HTML-Tag angepasst werden. Sowohl «em» wie auch «rem» sind aus der Perspektive von klassischen Masssystemen schwer vorstellbar. Dort ist meist eine möglichst einheitliche Bezugsgrösse gewünscht. Ein Konzept, bei dem eine Dimension sich an einer momentanen Schriftgrösse orientiert scheint fast schon absurd, ist aber – wenn man sich daran gewöhnt hat – sehr hilfreich.

Viewportabhängige Einheiten

Weitere relative Einheiten, die ab und an noch gebraucht werden, sind die viewportabhängigen Einheiten. Sie beziehen sich also auf die Grösse des Viewports, in dem die Inhalte betrachtet werden. Hier eine Übersicht:

vh – 1 % der Viewporthöhe

vw – 1 % der Viewportbreite

vmin – 1 % der schmaleren Viewportdimension (bei Hochformat also die Breite und bei Breitformat die Höhe)

vmax – 1% der grösseren Viewportdimension (bei Hochformat also die Höhe und bei Breitformat die Breite)

Mischung

Nicht eigentliche eine Masseinheit von CSS, aber dennoch ideal zur Massangabe, ist die so genannte calc()-Funktion. Mit ihr lassen sich beliebige CSS-Einheiten mischen. Möchte man zum Beispiel ein Objekt auf die Viewportbreite skalieren, aber links und rechts noch einen Rand von je 10 px lassen, so könnte man die Breite wie folgt angeben: calc(100vw – 20px).

Fazit

Nebst den hier gezeigten Massangaben gibt es noch diverse andere. Jedoch werden diese nur selten gebraucht. Oder wollten Sie schon mal eine Grössenangabe ­abhängig von der Breite der Ziffer Null tätigen? In CSS hätten Sie mit der Einheit «ch» die Chance dazu …

Das mentale Modell, wie man eine Gestaltung proportioniert, erscheint für eine Website auf den ersten Blick eher komplex. ­Jedoch erkennt man in der Anwendung schnell, dass man sich viel Arbeit bei der Viewport-Adaption durch den bewussten Einsatz der richtigen Masseinheit am richtigen Ort ersparen kann. Einer tollen Gestaltung von Mobile bis Desktop steht nichts mehr im Weg.