CSS: em, px, pt, cm, in…

Sprachen

Dies ist eine Übersetzung. Es ist möglich, daß sie Fehler enthält oder veraltet ist im Vergleich zur englischen Version. Übersetzer: Axel Friedrich (Axels Kitty Corner)

Werfen Sie auch einen Blick auf den Index für alle Tips.

Auf dieser Seite:

em, px, pt, cm, in…
Font Größen
zukünftige Einheiten

`em`, `px`, `pt`, `cm`, `in`…

CSS bietet eine Reihe unterschiedlicher Einheiten um Längen darzustellen. Einige haben ihre Wurzeln in der Typographie, wie point (pt) und pica (pc), andere sind aus dem Alltag bekannt, so wie centimeter (cm) und inch (in). Und dann gibt es noch eine "magische" Maßeinheit welche speziell für CSS erfunden wurde: px. Bedeutet das verschiedene Eigenschaften benötigen auch unterschiedliche Einheiten?

Nein, die Maßeinheiten haben nichts mit den Eigenschaften zu tun, aber alles mit dem Ausgabe-Medium: Bildschirm oder Papier.

Es gibt keine Einschränkung welche Einheit wo verwendet werden kann. Wenn eine Eigenschaft einen Wert in px ('margin: 5px') akzeptiert dann akzeptiert sie auch Werte in inches oder centimeter ('margin: 1.2in; margin: 0.5cm') oder umgekehrt.

Aber generell verwendet man verschiedene Einheiten für Displays oder für den Ausdruck auf Papier. Die folgende Tabelle stellt die empfohlene Verwendung dar:

	Empfohlen	Gelegentlich	Nicht empfohlen
Bildschirm	em, px, %	ex	pt, cm, mm, in, pc
Druck	em, cm, mm, in, pt, pc, %	px, ex

Das Verhältnis der absoluten Einheiten ist wie folgt: 1in = 2.54cm = 25.4mm = 72pt = 6pc

Wenn Sie ein Lineal zur Hand haben können Sie hiermit überprüfen wie präzise Ihr Gerät arbeitet. Diese Box hat eine Höhe von 2.54cm (1in):: ↑
72pt
↓

Die sogenannten absoluten Einheiten (cm, mm, in, pt und pc) haben in CSS die gleiche Bedeutung wie auch woanders. Eine Länge, definiert durch eine solche Einheit, besitzt überall exakt die gleiche Größe (innerhalb der Limitationen von Hard - und Software). Es wird nicht empfohlen diese Einheiten für den Bildschirm zu verwenden, das Bildschirmgrößen stark variieren. Ein großer Bildschirm kann z.B eine Diagonale von 60cm (24 in) besitzen, ein kleiner, portabler Bildschirm dagegen nur 8cm. Und man betrachtet Beide nicht von der gleichen Entfernung.

Die Einheiten em und ex sind abhängig vom Font und können innerhalb eines Dokumentes unterschiedlich sein. Die Einheit em ist einfach nur die Schriftgröße. Innerhalb eines Elements mit einem 2in Font, 1em bedeutet genau 2in. Ausdrücke wie margins und paddings sind von em abhängig, und wenn der User einen großen Font verwendet (z.B. auf einem großen Monitor) oder einen kleinen Font (z.B. auf einem mobilen Gerät), werden Größen proportional korrekt dargestellt. Festlegungen wie 'text-indent: 1.5em' und 'margin: 1em' sind sehr gebräuchlich in CSS.

Die Einheit ex wird äußerst selten verwendet. Ihr Sinn ist es Größen auszudrücken in Abhängigkeit zur x-Höhe eines Fonts. Die x-Höhe ist, grob ausgedrückt, die Höhe von Kleinbuchstaben. wie a, c, m, oder o. Fonts mit der gleichen Größe (und damit ist em auch gleich) können in der Höhe ihrer Kleinbuchstaben stark voneinander abweichen. Und wenn es nötig wird dass z.B. ein Bild gleich der x-Höhe ist, ist die Einheit ex das Mittel der Wahl.

Die Einheit px ist die magische Einheit von CSS. Sie ist nicht abhängig vom aktuellen Font und steht auch nicht in Verbindung mit den absoluten Einheiten. Die Einheit px wurde definiert um klein, aber noch sichtbar zu sein. Und so kann eine horizontale, 1px breite Linie mit scharfen Kanten (ohne Anti-Aliasing) dargestellt werden. Die Definition was genau scharf, klein und sichtbar ist hängt dabei vom benutzten Gerät und dessen Nutzung ab: halten Sie es dich an die Augen, sie wie ein Handy, auf Armlänge, wie einen Computermonitor, oder irgendwo dazwischen, wie ein Buch? Somit stellt px keine konstante Länge dar, sondern etwas in Abhängigkeit vom verwendeten Gerät und seiner typischen Nutzungsweise.

Um eine Vorstellung vom Erscheinungsbild von px zu bekommen, stellen Sie sich einen CRT Computermonitor aus den 90'ern vor: die kleinste darstellbare Lochmaske liegt irgendwo beim 1/100stel eines Inchs (0,25mm) oder auch etwas darüber. Die Einheit px erhielt ihren Namen von diesen Bildschirmpixeln.

Heutzutage existieren Geräte welche wesentlich kleinere Bildpunkte darstellen können (auch wenn Sie wohl eine Lupe brauchen um sie zu erkennen). Aber Dokumente aus dem letzten Jahrhundert welche px in CSS nutzten sehen noch immer gleich aus, unabhängig vom verwendeten Gerät. Drucker im Speziellen können Linien, wesentlich kleiner als 1px, darstellen, eine 1px Linie sieht aber ziemlich genauso aus wie auf dem Monitor. Geräte ändern sich, aber px besitzt immer das gleiche Aussehen.

CSS legt auch fest dass Rastergrafiken (wie z.B. Fotos) standardmäßig mit einem Pixel pro 1px dargestellt werden. So wird ein Foto mit der Auflösung 600 mal 400 mit einer Breite von 600px und einer Höhe von 400px ausgegeben. Die Pixel eines Fotos entsprechen dabei nicht den Pixeln des Geräts (welche wesentlich kleiner sein können), sondern entsprechen der Einheit px. Das macht es möglich Fotos exakt an anderen Elementen in einem Dokument auszurichten, solange Sie nur px im Stylesheet verwenden und nicht pt, cm, etc.

Verwenden Sie em oder `px` für Schriftgrößen

CSS hat die Einheiten pt (Punkt) und pt (Pica) aus der Typographie geerbt. Drucker haben diese und ähnliche Einheiten traditionell bevorzugt zu cm oder in verwendet. In CSS gibt es keinen Grund pt zu verwenden, nutzen Sie einfach die Einheit die Sie bevorzugen. Aber es gibt gute Gründe niemals pt oder irgendeine andere absolute Einheit zu verwenden und nur auf em und px zu setzen.

Hier ein paar Linien unterschiedlicher Dicke. Einige mögen scharf erscheinen, aber zumindest die 1px und 2px Linien sollten scharf und sichtbar sein:

0.5pt, 1px, 1pt, 1.5px, 2px

Wenn die ersten vier Linie alle gleich aussehen (oder die 0.5pt Linie fehlt), nutzen Sie wahrscheinlich einen Computermonitor welcher keine Bildpunkte kleiner als 1px darstellen kann. Wenn die Linien mit steigender Breite erscheinen, schauen Sie sich diese Seite höchstwahrscheinlich auf einem qualitativ hochwertigen Computermonitor oder einem Blatt Papier an. Und wenn 1pt dicker als 1.5px erscheint, nutzen Sie höchstwahrscheinlich einen mobilen Bildschirm.

Die magische Einheit von CSS, px, ist oftmals das Mittel der Wahl, im Speziellen wenn der Style es verlangs Text an Bildern auszurichten, oder einfach nur weil alles mit einer Breite von 1px, oder einem Vielfachen davon, scharf dargestellt werden wird.

Aber für Schriftgrößen nutzt man besser em. Der Sinn dahinter ist es (1) nicht die Schriftgröße des BODY Elements (in HTML) zu setzen, sondern die Default-Größe des Gerätes zu nutzen, da diese eine Höhe hat die der Leser komfortabel lesen kann; und (2) Schriftgrößen anderer Elemente mit em: 'H1 {font-size: 2.5em}' zu erstellen und damit H1 2½ mal so gross darzustellen wie den normalen, body Font.

Das einzige Mal wo es besser ist pt (oder cm oder in) für die Schriftgröße zu nutzen ist bei der Verwendung von Stylesheets für den Druck, wo man sichergehen muss dass der gedruckte Font immer genau die gleiche Größe hat. Aber selbst das ist es besser die Default Font-Schriftgröße zu verwenden.

Weitere Einheiten in der Zukunft von CSS

Um es noch einfacher zu machen Styleregeln zu erstellen die von der Default Schriftgröße abhängen, befindet sich eine neue Einheit in der Entwicklung: rem. rem (für "root em") ist die Schriftgröße des Basiselements eines Dokuments. Anders als bei em, welche unterschiedlich für jedes Element erscheinen kann, bleibt rem konstant im gesamten Dokument.

Andere Einheiten in der Entwicklung machen es möglich Größen zu spezifizieren in Relation für Fenster des Betrachters. Diese sind vw und vh. vw ist dabei das 1/100stel der Bildschirmbreite und vh 1/100stel der Bildschirmhöhe.