Welche Maßeinheiten kann ich im CSS
für Screen und Print benutzen?

Screen I

Hinweis: Diese Maßeinheiten werden im Screen-Design besonders häufig genutzt.

Screen I

CSSBedeutung
pxDer PIXEL ist ein Kofferwort aus Picture und Element. Er ist die kleinste darstellbare auf dem digitalen Ausgabegerät. Je nach Geräteauflösung ist die Ausgagröße unterschiedlich. So hat z.B. ein Smartphone gegenüber einem älteren Monitor eine deutlich höhere Auflösung. PX steht für Pixel.
%% bezieht sich je nach Kontext relativ auf das Eltern-Element. % steht für Prozent.
emEin EM entspricht der FONT-SIZE (Schriftgröße) des Elements, auf das eine Eigenschaft mit einem EM-Wert angewendet wird. Wird die Schriftgröße selbst (font-size) in EM festgelegt, bezieht sich die Einheit auf die Schriftgröße des Elternelements. Es gilt immer die letzte definierte FONT-SIZE eines Eltern-Elements. Historisch-Typographisch gesehen ist ein EM im Schriftsatz ein Geviert. Der Begriff EM leitet sich aus einer phonetisierung des Buchstaben M ab. Wobei anzumerken ist, dass ein M kein Geviert ist.
remREM entspricht der Schriftgröße, die für das HTML-Element (Wurzelelement) festgelegt ist. Es ist vererbungsunabhängig. Die FONT-SIZE für REM wird im HTML Element definert und kann mit REM genutzt werden. REM bedeutet Root-EM (Wurzel-EM).
chCH entspricht der Breite der Ziffer 0. CH steht für Character (Zeichen). Man kann mit CH relativ genau Lauf-Breiten für Texte bestimmen. Dies ist praktisch bei Eingabeformularen, z. B. für eine Begrenzung auf 20 Zeichen. Bei Mengentext und auch Überschriften ist es ebenso günstig wenn eine maximale Wortanzahl bestimmt werden soll. Z. B. sollte ein Mengentext mit linksbündigem Flattersatz mindestens 40 Zeichen breit und maximal 70-80 Zeichen breit sein. Die Breite hängt letztlich von der Schriftgröße ab. Die Laufweite für Überschriften werden eher geringer ausfallen. Mitunter sehen imLayout 3-4 Wörter pro Zeile einer Überschrift ansprechend aus. Grundsätzlich gilt: Das Lesen von Text sollte ohne seitliche Kopfbewegung und Augenbewegung geschehen können. Wenn für Screendesign Blocksatz eingesetzt wird, dann müssen die Zeilen breiter sein. Blocksatz funktioniert erst mit 8-10 Leerzeichen, also 9-12 Wörtern. Die Silbentrennung funktioniert in Browsern jedoch nicht gut, Blocksatz muss also jeweils getestet werden. Die Zeicheneinheit CH funktioniert am zuverlässigsten bei Schriften mit gleicher Breite (Monotype). CH für Breiten ist aber auch bei jeder anderen Schrift zu empfehlen. Die Grundlage ist die 0, ein Buchstabe M ist breiter und das Buchstabe i ist schmaler. In der Summe passt die Anzahl der Zeichen meistens in die mit CH bestimmte Breite.

Zeit und Winkel

Hinweis: Zeit spielt bei Animationen eine große Rolle. Winkelangaben werden Transformationen aber auch bei Farbangaben mit HSL genutzt.

Zeit und Winkel

CSSBedeutung
s1S entspricht genau einer Sekunde. 1s sind 1000ms.
ms1MS entspricht dem 1000. Teil einer Sekunde. 1000Ms sind 1s.
deg1DEG (degree, Grad) entspricht 1 von 360°. Positiver Wert im Uhrzeigersinn und negativer Wert entgegen dem Uhrzeigersinn. 360DEG sind 1TURN. 0.5TURN sind 180DEG.
turn1TURN (Vollwinkel) entspricht einer Kreisumrundung. 360DEG sind 1TURN. 0.75TURN sind 270DEG.

Print

Hinweis: Zentimeter etc. machen für Screen-Design keinen Sinn. Sie spielen ihr wahres Potential erst bei druckbezogenenen @media (Print) aus. Schickt man diese Beispielseite auf den Drucker oder erzeugt eine PDF, dann gelten die Print-spezifischen CSS Angaben.

Print

CSSBedeutung
cmZM (Zentimeter) ist der hundertste Teil eines Meters. 1 ZM ist 10 Millimeter lang.
mmMM (Millimeter) ist der tausendste Teil eines Meters. 10MM sind 1 Zentimeter.
inIN (Inch englisch für Zoll) ist 2,54 cm lang.
ptPT (DTP-Punkt) ist der 72ste Teil eines Inch (Zoll).
pcPC (Pica) ist der sechste Teil eines Inch (Zoll). Es ist daher 12 Punkt lang.
exEX entspricht der Höhe des Kleinbuchstabens x. Dieses Größenmaß ist sehr interessant für Gestaltung von Drucksachen. Die Lesbarkeit beträgt erfahrungsgemäß den Faktor 500. Eine Schrift mit z.B. 1cm großen Kleinbuchstaben x ist aus 5m noch Lesbar. Kann man gut bei Plakatgestaltung einsetzen. Leider kann es nicht so eindeutig im InDesign definiert werden. EX ist im CSS außerdem noch relativ zu der definierten Font-Size vom Eltern-Element.

Screen II

Hinweis: Im responsiven Screen-Design kann mit diesen Maßeinheiten feiner abgestimmt werden.

Screen II

CSSBedeutung
vwVW (Viehport-Breite) entspricht dem 100. Teil (1 Prozent) der Breite des Viewport (Anzeigebereichs). 100vw sind die komplette Breite des Viewports.
vhVH (Viewport-Höhe)entspricht dem 100. Teil der Höhe des Viewport (Anzeigebereichs). 100vh sind die komplette Höhe des Viewports.
vminDie Einheit VMIN (Viewport-Minimalabmessung) entspricht dem 100. Teil der KLEINEREN Größe bei Breite oder der Höhe des Viewport (Anzeigebereich). Viewport mit den Maßen 800px × 600px entspräche 1vmin also genau 6px. Die Höhe ist in dem Beispiel der kleinere Wert.
vmaxDie Einheit VMAX (Viewport-Maximalabmessung) entspricht dem 100. Teil der GRÖSSEREN Größe bei Breite oder der Höhe des Viewport (Anzeigebereich). Viewport mit den Maßen 800px × 600px entspräche 1vmin also genau 8px. Die Breite ist in dem Beispiel der größere Wert.
FrFR kann im display: GRID verwendet werden. Bedeutet soviel wie Bruchteil des verfügbaren Platzes. FR ist die Abkürzung von Fractional Space (Bruchteil).
exEX entspricht der Höhe des Kleinbuchstabens x. Dieses Größenmaß ist sehr interessant für Gestaltung von Drucksachen. Die Lesbarkeit beträgt erfahrungsgemäß den Faktor 500. Eine Schrift mit z.B. 1cm großen Kleinbuchstaben x ist aus 5m noch Lesbar. Kann man gut bei Plakatgestaltung einsetzen. Leider kann es nicht so eindeutig im InDesign definiert werden. EX ist im CSS außerdem noch relativ zu der definierten Font-Size vom Eltern-Element.

► Weitere Infos

Externe Quellen

CSS Values and Units Module Level 3

http://www.w3.org/TR/css3-values/

W3C Candidate Recommendation der Werte und Einheiten.


CSS Datentypen

https://developer.mozilla.org/(...)CSS/angle

Umfassende Übersicht der Datentypen für CSS.


CSS Maße und Maßeinheiten

https://wiki.selfhtml.org/(...)/Zahlen,_Maße_und_Maßeinheiten

Übersicht in deutscher Sprache bei dem Wiki von Selfthtml.