Px, Pt, Em oder Rem? Was diese Webdesign-Werte für Abstände, Maße oder Schriftgrößen bedeuten

Wenn es um Abstände, Maße oder Schriftgrößen geht, stellt sich im Webdesign stets die Frage nach dem richtigen Wert. Innerhalb der CSS Angaben ist es problemlos möglich, alles pixelgenau anzugeben, doch wie viel Sinn macht das überhaupt? Ist die Angabe in Pixeln wirklich immer der richtige oder beste Wert?

Genau dieser Frage möchte ich mich heute widmen, indem ich mir die Werte Pixel (Px), Points (Pt), Em und Rem ein wenig konkreter ansehe.

Px, Pt, Em oder Rem?

Zunächst einmal sollten wir dabei klären, was diese Bezeichnungen im Webdesign genau bedeuten und durch was sie sich auszeichnen.

Pixel (Px)
Im Webdesign werden Pixel normalerweise mit »px« abgekürzt. Pixel sind dabei die kleinsten Punkte von Rastergrafiken bzw. auf Bildschirmen. Ein Element, was 10 Pixel hoch ist, nimmt daher immer zehn Bildpunkte auf der jeweiligen Fläche ein, ohne Rücksicht auf Besonderheiten oder Eigenheiten. Sowohl unter MacOS als auch unter Windows oder auf Android und iOS.

Pixel stellen somit eine absolute Größe dar. Ein Pixel ist immer ein Pixel, egal auf welchem System. Das führt allerdings zu Problemen auf Seiten der Nutzer. Ändern diese nämlich die Standardschriftgröße im Browser, sollte dies auch die Schriftgröße der Website ändern. Wer eine absolute Schriftgröße angibt, verhindert dies aber. Der Nutzer muss dann erst zoomen, wenn er die Schrift vergrößern möchte.

Das kann in Bezug auf die Barrierefreiheit ein größeres Problem darstellen. Der Vorteil bei Pixeln ist hingegen, dass eben pixelgenaues Design möglich ist, welches auf allen Rechnern und Monitoren gleich aussieht. Wer also möchte, dass ein Design überall identisch erscheint, wählt Pixel.

Points (Pt)
Auch die Points, also Punkte, sind eine absolute Größe. Für jemanden aus Deutschland ergeben sie allerdings weitaus weniger Sinn als die Pixel. Ein Point ist nämlich ein zweiundsiebzigstel Zoll (bzw. Inch im englischen). Bei 72 dpi (dots per inch) ist 1 Point daher 1 Pixel. Bei höheren dpi-Zahlen wird es dann zunehmend komplizierter.

Soweit mir das bekannt ist, kommen die Points aus dem Druck- und Grafikbereich, werden im Webdesign nach Möglichkeit also gar nicht verwendet. Da auf unterschiedlichen Geräten auch unterschiedliche Werte erzeugt werden könnten, sind Points prinzipiell immer schwierig zu behandeln. Die Schrift ist dann auf Geräten mit weniger dpi beispielsweise kleiner als auf Geräten mit hoher dpi-Zahl.

Em
Nun wird es spannend, denn mit Em ist eine relative Größe gemeint. Ausgeschrieben heißt es »Equal to M«. Im Druck meint Em die Breite eines Gevierts, im Web hingegen stellt Em einen Grundwert dar, der immer relativ zur Schriftgröße in Pixeln steht. Hat die Schrift auf der eigenen Website die Größe 1em, entspricht das dem Standardwert im Browser, also 16 Pixel. Dabei bezieht sich Em stets auf das nächsthöhere Element.

Gebe ich im Body also eine Schriftgröße von 10 Pixel an, ist der erste Container mit Schriftgröße 1em logischerweise 10 Pixel groß. Kompliziert wird es dann, wenn Container unterschiedliche Größen haben und aufeinander aufbauen, da sich Em, wie erwähnt, immer auf den nächsthöheren Container bezieht.

Früher wurde als kleine Hilfe oft ein 62.5% im Body angegeben, um die Standardschriftgröße (16px) auf 10px zu reduzieren. Damit waren 1em immer 10 Pixel, 1.8em also 18px. Das macht man heute nicht mehr, da viele die Standardschriftgröße im Browser anpassen und die Werte dann wieder abweichen bzw. es egal wird. 1em ist dabei immer der Grundwert. 1.5em hingegen sind die 1,5-fache Größe des Grundwertes und so weiter.

Rem
Rem ist im Kern das Gleiche wie Em, es nutzt aber nicht den nächsthöheren Container, sondern immer das Root-Element für den Grundwert. Das macht Rems leichter zu denken und erspart oft unnötige Rechenarbeit bei verschachtelten Designs. R steht dabei für »Root« und somit das höchste Element auf einer HTML-Seite.

Gebe ich im Root als Schriftgröße also 20 Pixel an, sind 1rem immer 20px, ganz egal wo auf der Seite und unter welchem anderen Element oder in welchem Container ich mich gerade befinde. Bei Em würde hingegen stets der jeweilig höhere Container berücksichtigt. Hätte ich also 20px im Root und 10px im Container, würde 1em im jeweiligen Container den 10px entsprechen, nicht den 20px vom Root-Element.

Der kleine Unterschied sorgt dafür, dass Größen via Rem deutlich einfacher und auch logischer im Webdesign zu verwenden sind. Rem verschachtelt sich im Design weniger und eignet sich daher perfekt, um elastische Layouts zu realisieren. Gerade bei komplexen Designs verliere ich mit Em nämlich regelmäßig die Übersicht, weshalb ich persönlich nur noch Rem verwende.

Prozent
Prozentangaben gibt es theoretisch ebenfalls noch, doch die sind immer etwas schwierig und wurden gerade in der Vergangenheit je nach Browser auch gerne sehr unterschiedlich interpretiert. Bei Fluid Layouts kommen dennoch Prozentwerte zum Einsatz.

Die Prozentwerte sorgen im Großen und Ganzen dafür, dass sich das Design an das jeweilige Browserfenster anpasst. Ist die Breite mit 50 Prozent angegeben, wird also immer die hälfte des Fensters verwendet. Verschiebt oder verändert der Nutzer die Größe, passt sich somit auch die Website an.

So etwas kann praktisch sein, persönlich gab es bei mir jedoch oft Probleme mit Prozentwerten und der richtigen Interpretation im Browser, weshalb ich komplett Abstand davon genommen habe. Sinn macht es unter Umständen bei Tabellen oder Grids, die innerhalb des Designs natürlich immer denselben Platz verwenden sollten.

Dynamische Layouts mit Rem erstellen

In der Theorie kann der Rem-Wert für alles verwendet werden, sodass komplett dynamische Layouts entstehen. Damit werden alle Angaben, was Größen, Breiten, Margins und Paddings angeht, in Rem deklariert und richten sich dann nach dem Grundwert im Root.

Den größten Vorteil, jedenfalls aus meiner Sicht, gibt es bei dynamischen Layouts dadurch, dass ein einziger Wert als Grundlage für alle anderen dient. Rem bezieht sich, wie wir gelernt haben, nämlich stets auf den Grundwert im Root-Element. Verändere ich nun diesen Wert im Root, passt sich das gesamte Layout automatisch daran an.

Ändere ich also die Schriftgröße, ändern sich auch die Schriftgrößen und Abstände der H1 bis H6 Überschriften. Das macht Layout-Veränderungen unkompliziert und sorgt dafür, dass alles immer perfekt aneinander angepasst agiert und reagiert. Einmal errechnete Freiräume und Abstände behalten also ihre Wirkung.

Fazit zu den Größenangaben im Webdesign

Es gibt viele Möglichkeiten im Webdesign und die meisten enden heutzutage mit Rem. Em ist in der Regel zu kompliziert, gerade wenn es viele Ebenen und eine Menge Container gibt. Irgendwann weiß der Designer dann gar nicht mehr, wo genau nun welcher Wert besteht. Rem löst das Problem, indem sich der Wert immer auf einen einzigen Grundwert bezieht, statt auf den im nächsthöheren Container.

Pixel sind zuverlässig und gut nutzbar, sie sind aber absolut und müssen daher wieder einzeln angepasst werden. Wer hingegen einmal die richtigen Werte als Rem gefunden hat, baut die Größen aufeinander auf, was es deutlich einfacher macht, diese entsprechend zu verwalten oder anzupassen, wenn sich die Gegebenheiten ändern.

Points und Prozente sind schwierig. Persönlich habe ich durchweg schlechte Erfahrungen mit diesen Werten gemacht, da sie gerade in der Vergangenheit oft unterschiedlich interpretiert wurden. Aber auch da sind wir inzwischen weiter, sodass Browser heute mit den meisten Angaben gut zurechtkommen. Meine Wahl fällt mittlerweile immer auf den Wert Rem, da er am flexibelsten und zeitgemäßesten ist.

Welche dieser Größenangaben nutzt du in deinem Layout?