CSS Masseinheiten

In einem Design-Tool arbeiten wir meist mit Pixel- oder Punkwerten, da das Format der Ausgabe fest definiert werden kann, z.B. 1920×1080 Pixel oder A4, A3 etc.

Pixel und Punkt gibt es im Webdevelopment zwar auch, jedoch sind diese oft zu statisch (absolute Masseinheiten), um Layouts und Schriften effizient an jede mögliche Bildschirmgrösse anzupassen.

Aus diesem Grund gibt es in CSS viele relative Masseinheiten, die abhängig von ihrem Platz im Layout oder der Schriftgrösse kleiner oder grösser werden können.

Absolute Units

px - Fraction of Device Pixel

Ein Pixel ist das kleinstmögliche Quadrat, dass ein Bildschirm darstellen kann. Die px-Einheit in CSS ist nicht ganz dasselbe wie Pixel im Sinne von Bildschirmen (device-pixel).

Der Wert 1px in CSS ist ungefähr 1/96 von einem Zoll (Englisch “Inch”). Das heisst, dass 1px bei einem Screen mit 96 PPI (Pixel Per Inch) auch 1 device-pixel einnimmt, (96 / 96 = 1) oder 0.0104167 Inch (1 / 96 = 0.0104167) oder 0.026458418 Zentimeter.

Bei einem Bildschirm mit 300 PPI deckt sich 1px nicht mehr mit 1 device pixel (96 / 300 = 0.32 device pixel) oder 0.001067 Inch (0.32 / 300 = 0.001067) oder 0.00271018 Zentimeter.

Damit nun bei hochauflösenden Displays unsere Designs nicht deutlich kleiner dargestellt werden, verwenden alle Hersteller einen sogenannten pixel-ratio. Dies ist ein Faktor zur Umrechnung von CSS-px in device-pixel.

Apple beispielsweise verwendet einen pixel-ratio von 2. Hiermit stellt Apple sicher, dass ein CSS Pixel zwei device-pixel einnimmt und somit visuell etwa gleich gross dargestellt wird, wie auf einem Display mit halb so viel PPI.

Normalerweise verwenden Bildschirme einen Faktor von 1 um die richtige Grösse eines CSS Pixels in device pixels und damit in Inch/Zentimeter umzurechnen.

Beispiel
Wir definieren mit CSS eine Box mit einer Breite von 96px.
Ein 96 PPI Bildschirm macht daraus:

96 CSS Pixel * 1 / 96 PPI = 1 inch oder 2.54 cm

Bei hochauflösenden Bildschirmen (wie Retina-Displays) wird dieser Faktor (oder auch default pixel ratio) auf 2 erhöht. Also:

96 CSS Pixel * 2 / 300 PPI = 0.64 inch oder 1.6256 cm

Hinweis

Wie du anhand der Werte siehst, unterscheidet sich die Breite der Box (bei gleicher Bildschirmdiagonale und Distanz) somit um mehr als einen ganzen Zentimeter! Das erzeugt im Kontext von Responsive Design grosse Schwierigkeiten. Daher sind für den Aufbau von Layouts relative Masseinheiten wie font-units, viewport-units oder Prozent zu bevorzugen.

in - Imperial units (Inch)

Inches in und CSS Pixel px sind immer proportional zueinander. Also 1in in CSS richtet sich an der Referenzgrösse von 96px. Allerdings gibt es kaum reale Anwendungsfälle bei denen es sinnvoll wäre in in CSS zu verwenden.

1in = 96px * pixel-ratio (CSS Pixel nicht 96 device-pixel!)

cm, mm - Metric units (Zentimeter, Millimeter)

Dasselbe wie bei Inch nur im metrischen System. Auch cm und mm sind immer proportional zu px in CSS. Allerdings gibt es kaum reale Anwendungsfälle bei denen es sinnvoll wäre, mm oder cm in CSS zu verwenden.

1mm = 0.1cm = 3.78px * pixel-ratio

Aufgabe

Recherchiere anschauliche Beispiele oder Grafiken, damit du Absolute Units anschaulich der Klasse präsentieren kannst. Füge deine Links und Beispiele in dieses Google Doc ein.

Font-Relative Units

em - context font-size

Die Masseinheit em stammt aus der Typografie und den Zeiten des Bleisatzes. Dabei war 1em die Breite des Buchstaben M, was meistens auch der minimalen Zeilenhöhe entsprach. Heute, im digitalen Zeitalter mit einer riesigen Auswahl an Schriftarten, entspricht die Breite von M nicht mehr immer (oder zumindest nicht genau) der minimalen Zeilenhöhe. Daher bezieht sich em in CSS nicht mehr auf den Buchstaben M, sondern auf die aktuelle Schriftgrösse oder auch font-size.

EM ist immer relativ zur font-size die im nächsten übergeordneten DOM-Element definiert wurde. Wird keine font-size gefunden, wird die Standard-Schriftgrösse (meist 16px) des alles umschliessenden DOM-Elements html übernommen.

/* parent font-size: 16px */
2em = 32px

/* parent font-size: 32px */
2em = 64px

rem - root font-size

rem ist das Gleiche wie em mit dem Unterschied, dass sich rem immer proportional zur font-size des alles umschliessenden DOM-Elements html, also dem root-element verhält.

/* root font-size: 16px*/
1rem = 16px

EM und REM haben den Vorteil, dass bei einer Veränderung an einem übergeordneten Element (parent), alle untergeordneten (childs) diese Änderung erben (auch Inheritance genannt). So kannst du beispielsweise die Schriftgrösse für deine gesamte Seite vergrössern oder verkleinern, ohne bei jedem einzelnen Element eine feste Schriftgrösse in px anpassen zu müssen.

pt, pc - Points & Pica

Points (Punkt) sind im Print die gängigste Masseinheit. Ein Point bezieht sich auf die kleinste physische Dimension die ein Drucker darstellen kann. Ähnlich wie bei Bildschirmen, steht dies wiederum in Relation zu DPI (dots per inch). In CSS sind pt, pc und px proportional zueinander. Point und Pica werden in CSS meistens für print-styles genutzt. Wenn also User eine Website ausdrucken möchten und sich die Druckausgabe von der Darstellung auf dem Bildschirm unterscheiden soll.

1pt = 4/3px
1pc = 12pt = 16px

ex, ch - x-height & 0-width

Diese Masseinheit bezieht sich auf die Höhe des Kleinbuchstaben x der ausgewählten Schriftart. Im Gegensatz zu em verändert sich ex wenn du die Schriftart änderst, da die x-Höhe je nach Schriftart unterschiedlich sein kann, die gesetzte Schriftgrösse jedoch gleichbleibt.

ch funktioniert sehr ähnlich wie ex nur bezieht es sich auf die Breite der Nummer 0 in der ausgewählten Schriftart. Dies verändert sich ebenfalls, wenn du eine andere Schriftart auswählst.

Beide Units werden in CSS meist dann genutzt, wenn präzise Mikrotypografie erreicht werden soll.

Aufgabe

Recherchiere anschauliche Beispiele oder Grafiken, damit du Font-Relative Units anschaulich der Klasse präsentieren kannst. Füge deine Links und Beispiele in dieses Google Doc ein.

Viewport Units

vw - viewport width

1vw entspricht 1% der Breite des Bildschirms. Im Gegensatz zu Prozent ignorieren Viewport Units die Verschachtelung der Elemente und orientieren sich immer an den Dimensionen des Bildschirms.

vh - viewport height

Das Gleiche wie bei vw, nur bezieht sich vh auf die Bildschirmhöhe.

vmin - smaller viewport side

vmin bezieht sich auf die kurze Seite des Bildschirms. Dies ist insbesondere bei Bildschirmen praktisch, die zwischen Hoch- und Querformat wechseln können wie Tablets und Smartphones.

vmax - larger viewport side

Das Gleiche wie bei vmin, nur bezieht sich vmax auf die lange Seite des Bildschirms.

Aufgabe

Recherchiere anschauliche Beispiele oder Grafiken, damit du Vieport Units anschaulich der Klasse präsentieren kannst. Füge deine Links und Beispiele in dieses Google Doc ein.

Prozent

% - percentage

Prozentangaben sind relative Werte, die sich immer auf einen anderen Wert beziehen. Dafür gibt es grundsätzlich nur drei Möglichkeiten:

• Der Prozentwert einer Property (Eigenschaft) bezieht sich auf den Wert einer anderen Property desselben Elementes, z. B. ist ein Prozentwert für line-height abhängig von der font-size desselben Elements.
• Der Prozentwert einer Property bezieht sich auf den Wert einer Property eines übergeordneten parent-Elements, z. B. ist ein Prozentwert für font-size abhängig von der font-size des Elternelements.
• Der Prozentwert einer Property bezieht sich auf den Kontext der Formatierung, z.B. ist ein Prozentwert für width oder height abhängig von der Breite oder Höhe des umschließenden parent-Elements.

Beispiel
Wir definieren in HTML ein div und setzten für dieses in CSS eine Breite von 500px. Nun verschachteln wir in HTML innerhalb dieses divs ein weiteres div und geben diesem in CSS die Property width: 50% - dann wird das innere div 250px breit dargestellt.

Hinweis

Bitte beachte, dass der Browser auf Block-Elemente automatisch Werte wie width und height setzt, auch wenn du dies nicht explizit in deinem CSS deklariert hast. Dieser übernimmt für dich viel Arbeit, damit du nicht alle DOM-Elemente manuell in CSS stylen musst. Das bedeutet also, dass du meistens Prozentwerte verwenden kannst, auch wenn du nicht manuell definiert hast, wonach sich der Prozentwert richten soll.

Aufgabe

Recherchiere anschauliche Beispiele oder Grafiken, damit du Prozent Units anschaulich der Klasse präsentieren kannst. Füge deine Links und Beispiele in dieses Google Doc ein.

Übersicht & Browser-Support

In diesem Beispiel findest du eine visuelle Darstellung der verschiedenen Einheiten. Ausserdem sollten bei dir alle Balken grün sein. Dies zeigt dir, dass dein Browser alle gezeigten Masseinheiten darstellen kann.

Tipps & Links

Understanding CSS Units
The length of CSS