tl;dr: Es gibt mehr als 10 mögliche Einheiten, Längen im Web zu definieren. Wann welche Einheit die beste Wahl ist, welche wichtig sind und welche nicht – darum geht es in diesem Artikel über Pixel (px), Prozent (%) Root Ems (REM) & Co.
Es könnte alles so einfach sein, ist es aber nicht (© Fanta 4): Der Rest der Welt hat das Metrische System übernommen, ein paar Regionen (zB. USA) nicht – ihr Problem. Wir haben 10 Finger (praktisch), das Urmeter (so ab 1799 !!) sagt uns wie lange der zehnmillionste Teil des Erdmeridianquadranten (Strecke vom Pol zum Äquator) ist. Wir haben also einen Bezugspunkt, an dem wir alles festmachen können. Wir wissen, wie lange ein Meter ist, jeder kann sich das vorstellen. Und trotzdem verwenden wir nicht cm und mm im Webdesign (obwohl wir das könnten!) sondern Pixel (px).
Weil: Pixel sind eine absolute Einheit, die aber relativ zum Ausgabegerät (Bildschirm, Drucker) verwendet wird. Bei Geräten mit niedriger Auflösung (alte Monitore) entspricht ein Pixel einem Bildpunkt des Gerätes, bei Geräten mit höherer Auflösung werden mehrere Gerätepunkte pro Pixel verwendet.
| Grafische Einheiten in CSS | |
|---|---|
Absolute Einheiten |
|
| px | Pixel (1px = 1/96th of 1in) |
| cm | Zentimeter |
| mm | Millimeter |
| in | Zoll (Inch) (1in = 96px = 2.54cm) |
| pt | Punkt (1pt = 1/72 of 1in) |
| pc | Pica (1pc = 12 pt) |
Relative Einheiten |
|
| em | Relation zur Schriftgröße des Elements |
| rem | Relation zur Schriftgröße des Root-Elements |
| ex | Relation zur x-Höhe der aktuellen Schrift |
| ch | Relation zur Breite der Ziffer 0 |
| vw | Relation zu 1% der Breite des Viewports |
| vh | Relation zu 1% der Höhe des Viewports |
| vmin | Relation zu 1% der kürzeren Viewport-Seite |
| vmax | Relation zu 1% der längeren Viewport-Seite |
| % | Relation zum umgebenden Element |
Von den 7 im CSS Möglichen absoluten Einheiten verwendet man in der Praxis genau eine: Pixel (px). Und zwar genau, weil diese Einheit sich um das Ausgabemedium – also das Gerät – kümmert. Bei 1 Pixel wissen wir nur, dass es ein Ausgabepunkt ist und der ist absolut, wie gross der Punkt ist wissen wir nicht.
Die anderen absoluten Einheiten beziehen sich auf das Metrische System (cm, mm) oder auf das angloamerikanische Masssystem (inch, Zoll, ein Zwölftel eines Fusses, bis 1959 war übrigens ein Fuss in den USA länger als in England). Diese Einheiten können ineinander umgerechnet werden, wobei Punkt (pt) und Pica (pc) aus dem Schriftsatz kommen und dort verwendet werden – was ihr Auftauchen in CSS erklärt.
Bei den relativen Einheiten kommt es darauf an (nomen est omen) worauf sich die jeweilige Einheit bezieht. Hier kommen besonders die Einheiten Prozent (%), REM und VW bzw. VH zur Anwendung.
In meiner Praxis noch nie vorgekommen sind ex und ch. Wer eine Beispielanwendung für vmin/vmax kennt möge den Link bitte in den Kommentaren posten!
Mehr zum Testen und Ursprung der Tabelle links ist W3 Schools.
Fast überall voreingestellt und wohl auch am häufigsten verwendet, die Pixel. Bei Bildern ist es die einzig logische Einheit, schliesslich kommen Bilder schon als Pixelsammlung aus der Kamera. Bei Grafiken im png-Format wird Pixel die Einheit sein, die man beim Speichern auswählt.
Wann und wo verwendet man am besten Pixel als Einheit?
Nicht verwenden sollte man Pixel bei Schriftgrössen. Weil: hier gibt es einfach bessere Einheiten (siehe unten).
Die erste Einheit, wenn man an relative Angaben denkt, ist wohl Prozent. Wir denken also an einen Bruchteil oder ein Vielfaches von – und genau darum geht es – den Bezugspunkt. Im Webdesign bezieht sich eine %-Angabe immer auf das umgebende Element. Bei Arbeiten in Elementor also ein Container, im Blockeditior eine Spalte, Gruppe oder was auch immer gerade eingesetzt wird.
Die grüne Box im Beispiel oben hat eine fixe Größe von 720 x 300 px. Ist in dieser Box nun ein Contanier mit den Dimensionen 50 % Breite und 100% Höhe, so entspricht das den Pixelwerten von 360 x 300.
Da der Bezug (die Relation) im CSS immer auf das nächste Element erfolgt ist es extrem wichtig, dass die Struktur des Designs (Container, Gruppen, Reihen, Stapel, …) zuvor korrekt erstellt wurde.
Würde man nun eine weitere Box innerhalb der roten Box mit den selben Dimensionen (50 % Breite und 100 % Höhe positionieren, so hätte diese eine Dimension von 180 x 300 Pixel. 50 % von 50 % von 720 px = 180 px. Es entstünde eine Kaskade, also eine stufenförmige Gestaltung.
Pixel und % helfen bei responsive Webdesign nur bedingt weiter. Wir benötigen eine Einheit, mit der sich Gestaltungen in Bezug auf das Browserfenster, genau genommen auf den durch das Webdesign gestaltbaren Bereich des Fensters, den Vieport, herstellen lassen. Diese Einheiten heissen Viewport Width (VW) und Viewport Height (VH).
Das Beispiel zeigt (rot) die Höhe des Viewports (100 vh) und die halbe Breite (blau, 50 vw). Die Grüne Box kombiniert eine relative Breite (50 vw) mit einer absoluten Höhe (300 px).
Was nun, wenn man die Relation nicht zu einem Element oder dem Viewport herstellt sondern zu einem Font? Genau genommen zu dem Geviert einer Schrift. Das Geviert ist eine Masseinheit aus dem Bleisatz, es bezeichnet den Bereich, den ein Bleiletter (Buchstabe) einnimmt. Der gewählte Buchstabe ist das grosse M. Daher die Bezeichnung EM als Masseinheit. Em bezieht sich auf die Typographie-Einstellungen des umgebenden Elements, kaskadiert also, während das Root-EM als Referenz die äussereste Struktur (normalerweise den Body-Tag) verwendet, daher REM.
Praktisch bedeutet das: immer wo möglich REM verwenden, nur falls das nicht geht eben EM. Für Elementor gibt es eine Artikel zu den Font-Settings hier.
Die Arbeitsweise ist also folgende:
Schriftgrößen, Zeilenabstände etc. können nun alle mit der Einheit REM gesetzt werden. Das Beispiel zeigt die Grundschrift in der Größe 1 rem, die am Fliesstext sichtbar wird (die Tags p, ul, … etc). Für Kleingedrucktes, Bildtexte o.ä. wird man vielleicht eine etwas kleinere Schrift definieren, für die Überschriften H1 bis H6 entsprechend größere Werte. Praxistip: nur selten benötigt man 6 Größen, daher kann man die Überschriften H5 und H6 auch für Textauszeichnungen (oder eben nicht) verwenden. Meine H6 schaut immer genau wie der Fliesstext aus, manchmal ist das recht praktisch.
Ein Design mit voller Breite solle vertikal 2geteilt werden: daher wird eine Konstruktion verwendet, die 2 Spalten (Conatiner) nebeneinander mit einer Breite von 50 vw verwendet. In der rechten Spalte wird als Hintergrundbild mit der Option cover ein Hintergrundbild gesetzt.
In der linken Spalte wird ein Container mit 80 % Breite mittig gesetzt. Dadurch bleiben 2 x 10 % Breite für den Aussenabstand über. Abhängig von der Fensterbreite wird also der Raum für den Text durch eine %-Angabe definiert: 80 Prozent von 50 vw. Alternativ könnte man auch hier statt 80 % 40 vw als Breite des Textbereiches (grün) einstellen. Das Ergebnis ist das selbe. Will man nun die linke Spalte wieder teilen so können 2 Container nebeneinander mit 50% Breite gesetzt werden (grüne Box rechte Spalte unten).
Die Schriftgrößen werden mit 1 rem, 1,5 rem und 3 rem definiert, sie beziehen sich auf die Schriftgröße des Root-Containers, in Elementor wäre das die Schrifteinstellungen unter Typographie > Body. Der Vorteil von der Verwendung von REM liegt darin, dass alle Fontangaben dadurch abhängig von der Schrift zueinander gesetzt sind und nicht zu einem absoluten Pixelwert. Das Schriftbild wird konsistent, Änderungen einfacher.
Wer die Einheiten im Web nicht kennt muss darauf vertrauen, dass die Templates richtig erstellt wurden. Alles in Pixel zu setzen wird nicht gut funktionieren und auch – im Falle einer Änderungen – viel Arbeit machen.
Relative Einheiten sorgen dafür, dass die Website auf verschiedenen Bildschirmgrößen besser aussehen, die Arbeit am Design wird auch einfacher mit den richtigen Grundeinstellungen.
Veröffentlicht am: 29. Juli 2025
Letztes Update: 30. Juli 2025
Sie müssen den Inhalt von reCAPTCHA laden, um das Formular abzuschicken. Bitte beachten Sie, dass dabei Daten mit Drittanbietern ausgetauscht werden.
Mehr Informationen