Im Webdesign kommen verschiedene Arten von Einheiten zur Anwendung: Px, Pt, Em und Rem. Jede einzelne erfüllt einen bestimmten Zweck und kann bei der Erstellung oder Bearbeitung einer Website hilfreich sein. In diesem Artikel erklären wir, was die einzelnen Einheiten bedeuten und wie sie im Designprozess verwendet werden.
Px, Pt, Em und Rem – der Einheiten-Dschungel im Webdesign
Hinter den Kürzeln Px, Pt, Em und Rem verbergen sich Maßeinheiten. Sie werden verwendet, um die Größe von Elementen auf einer Website wie Text, Bilder oder Schaltflächen zu bestimmen.
- Px: Pixel sind die kleinste Maßeinheit und werden in der Regel für Webanwendungen oder für Software verwendet. Es handelt sich um die gebräuchlichste Maßeinheit im Webdesign. Pixel sind die kleinsten Punkte von Grafiken, die auf einem Raster basieren wie z.B. Bilder. Ein Element mit einer Höhe von 20 Pixeln, nimmt immer zwanzig Bildpunkte auf der jeweiligen Fläche ein. Wie groß das Element auf dem Endgerät des Benutzers erscheint, ist abhängig von der Größe des Bildschirms und der Auflösung. Eine konkrete Aussage lässt sich aus diesem Grund nicht treffen.
- Pt: Punkte sind etwas größer als Pixel und werden üblicherweise im Druckdesign verwendet. Darüber hinaus sind sie eine Maßeinheit, um die Schriftgröße zu messen. Punkte sind absolut, d. h. sie werden nicht von der Auflösung des Geräts beeinflusst. Daher werden Sie im Webdesign kaum verwendet.
- Em ist eine Einheit, die auf der Breite des Buchstabens „M“ in der gewählten Schriftart basiert. Dies ist eine beliebte Wahl für das Webdesign, da sich damit Responsive Designs erstellen lassen, die sich je nach Bildschirmgröße anpassen lassen. Em ist eine relative Größe – Em steht immer im Verhältnis zur Schriftgröße in Pixeln. Bei Em wird stets der jeweils höhere Container berücksichtigt. Ist der Container z.B. 10Px groß, entspricht 1Em im jeweiligen Container den 10px.
- Rem basieren auf der Schriftgröße des sogenannten Root-Elements, dem höchsten Element auf einer HTML-Seite. Diese Einheit hat gewisse Ähnlichkeit zu Em, kann aber auch verwendet werden, wenn die Schriftgröße nicht explizit festgelegt ist. Rem kommen bei verschachtelten Designs zum Einsatz und sie eignen sich, um flexible Layouts umzusetzen. Wird im Root eine Schriftgröße von 20 Pixeln angegeben, sind 1Rem immer 20Px – unabhängig davon, wo auf der Seite und unter welchem anderen Element oder in welchem Container.
Alternative: Angabe in %
Mit Prozentwerten kann dafür gesorgt werden, dass sich das Design flexibel an das jeweilige Browserfenster anpasst. Gibt der Webdesigner via CSS z.B. für ein Bild eine Breite von 20% an, füllt das Bild immer 20% des Bildschirms aus.
Was in der Theorie sehr nützlich klingt, führt in der Praxis bei unterschiedlichen Browsern oft zu Problemen und sollte nur von erfahrenen Webdesignern, beispielsweise von denen der Webgalaxie, angewendet werden. Unsere erfahrene Internetagentur bei Leipzig steht Ihnen gerne beratend und ausführend zur Seite.
