Modernes CSS bietet Ihnen drei gängige Längeneinheiten für Typografie und Abstand: px, rem und em. Die Konvertierung zwischen ihnen ist trivial, aber die Wahl der richtigen hat echte Konsequenzen für die Zugänglichkeit und Wartbarkeit. Dieser Leitfaden erklärt die Mathematik, die Kompromisse und wann man zu den einzelnen Kompromissen greifen sollte.

Wie die Konvertierungen funktionieren

Jede Umrechnung hier ist eine einzelne Division oder Multiplikation. rem wird anhand der Stammschriftgröße (dem html-Element) gemessen, die standardmäßig 16 Pixel beträgt, also rem = px ÷ 16 und px = rem × 16. Wenn Sie die Wurzel ändern, ändert sich auch der Teiler – mit diesem Tool können Sie eine beliebige Basis festlegen. em funktioniert auf die gleiche Weise, jedoch mit der eigenen (oder übergeordneten) Schriftgröße des Elements anstelle der Stammschriftgröße, also em = px ÷ parent. Die Ergebnisse werden auf vier Dezimalstellen gerundet und nachgestellte Nullen werden entfernt, sodass 24px als sauberes 1.5rem und nicht als 1.5000rem zurückgegeben wird.

Warum rem px in puncto Barrierefreiheit übertrifft

Der wichtigste Grund, rem zu bevorzugen, ist der Respekt vor den Browsereinstellungen des Benutzers. Wenn jemand seine Standardschriftgröße erhöht – was bei sehbehinderten Benutzern üblich ist –, wird jede REM-basierte Größe entsprechend vergrößert. Bei einer harten px-Schriftgröße wird diese Einstellung vollständig ignoriert, sodass der Text in der von Ihnen ausgewählten Größe bleibt. Die Verwendung von rem für Schriftgrößen (und oft auch für Abstände) ist einer der günstigsten verfügbaren Vorteile hinsichtlich der Barrierefreiheit, und deshalb geben die meisten Designsysteme ihre Schriftskala in rem an. Die 16-Pixel-Standardeinstellung ist ebenfalls eine sinnvolle Untergrenze: Sie entspricht der Browser-Standardeinstellung, auf der die WCAG-bewusste Welt basiert.

Wann man sie verwendet und der 62,5 %-Trick

Greifen Sie nach em, wenn Sie möchten, dass ein Wert mit einer bestimmten Komponente und nicht mit der gesamten Seite skaliert wird – zum Beispiel durch Auffüllen einer Schaltfläche, die mit dem Text der Schaltfläche wachsen soll, oder durch ein Symbol, dessen Größe relativ zur Beschriftung ist. Der Haken ist kompliziert: Verschachteln Sie em-große Elemente und die Multiplikatorstapel, die Sie überraschen können. Einige Teams stellen html {font-size: 62,5 % so ein, dass 1rem = 10px und die Kopfrechnung einfacher ist (1,6rem = 16px). Es funktioniert, aber es überschreibt die Basisgröße des Benutzers für alle px-basierten Inhalte von Drittanbietern und fügt eine Indirektionsebene hinzu. Ein Konverter beseitigt den Hauptgrund, warum Menschen zu diesem Trick greifen: Sie können die zugängliche 16-Pixel-Standardeinstellung beibehalten und das Tool mit der Berechnung beauftragen.