CSS-Einheiten-Umrechner

Zwei Familien von Einheiten

Jede CSS-Länge gehört zu einer von zwei Familien. Absolute Einheiten wie px, pt, cm, mm und in beschreiben eine feste physische oder gerätebezogene Größe, die sich nicht mit dem Kontext ändert. Relative Einheiten wie em, rem, Prozent, vw, vh, ch und ex beschreiben eine Größe in Bezug auf etwas anderes, meist eine Schriftgröße oder den Viewport. Die ganze Kunst von responsivem, barrierefreiem CSS läuft darauf hinaus, für jede Aufgabe die richtige Familie zu wählen, und dieser Konverter existiert, um sauber zwischen ihnen zu übersetzen.

Die Trennlinie ist wichtig, weil absolute Einheiten einen Wert einfrieren, während relative Einheiten ihn sich anpassen lassen. Eine in Pixeln gesetzte Überschrift bleibt gleich groß, egal wie der Nutzer seinen Browser konfiguriert hat, während dieselbe Überschrift in rem mitwächst, wenn er seine Standard-Textgröße erhöht. Eines dieser Verhalten ist freundlich; das andere schließt Menschen stillschweigend aus.

Das Pixel und die 16px-Basislinie

Das px ist der Bezugspunkt für nahezu jede Umrechnung. Trotz des Namens ist ein CSS-Pixel nicht immer ein physischer Bildschirmpunkt; auf hochauflösenden Displays bildet der Browser es auf mehrere Gerätepunkte ab, sodass ein 16px-Wort eine angenehme Lesegröße behält – weshalb px als absolut gilt, obwohl die Hardware variiert. Die meisten Umrechnungen in diesem Tool hängen an einer Zahl, der Root-Schriftgröße, die standardmäßig 16px beträgt, weil das die Größe ist, die Browser ab Werk auf das html-Element anwenden. Ändern Sie diese Basis in den erweiterten Einstellungen, und jedes rem- und em-Ergebnis wird daran neu berechnet.

em gegen rem: der Unterschied in der Vererbung

Das ist die Unterscheidung, über die die meisten Entwickler stolpern. Ein rem ist immer relativ zur Root-Schriftgröße, sodass 1.5rem überall im Dokument dieselbe Länge ist – vorhersehbar und gleichbleibend. Ein em ist relativ zur Schriftgröße des Elements, auf dem es sitzt, was bedeutet, dass sich ems aufmultiplizieren. Ist ein Listenelement auf 1.2em gesetzt und sein Elternelement ebenfalls auf 1.2em, ist das Kind 1,2 mal 1,2 des Großelternelements, und Verschachtelung kann Ihren Text stillschweigend auf überraschende Größen anwachsen lassen.

Dieses Aufmultiplizieren ist gelegentlich genau das, was Sie wollen. Innen- oder Außenabstand, ausgedrückt in em, skaliert mit dem eigenen Text des Elements, sodass eine Schaltfläche anteilig gepolstert bleibt, während ihre Beschriftung wächst. Doch für die globale Schriftskala ist rem meist die sicherere Voreinstellung, gerade weil es sich nicht aufmultipliziert. Dieser Konverter lässt Sie die Root-Schriftgröße und die übergeordnete Schriftgröße getrennt festlegen, sodass das rem-Ergebnis und das em-Ergebnis genau diesen Unterschied widerspiegeln.

Viewport-Einheiten für fließende Layouts

Die Viewport-Einheiten messen anhand der Größe des Fensters selbst. 1vw ist ein Prozent der Viewport-Breite und 1vh ist ein Prozent seiner Höhe, sodass 50vw stets halb so breit wie das Fenster ist, unabhängig von den Schrifteinstellungen. Sie sind das Rückgrat fließender Layouts und großer Display-Überschriften, die mit dem Bildschirm statt mit der Textgröße skalieren sollen.

Setzen Sie sie jedoch mit Bedacht ein. Fließtext rein in vw zu bemessen bedeutet, dass der Text auf einem schmalen Smartphone bis zur Unlesbarkeit schrumpft und auf einem breiten Monitor aufbläht, und auf manchen Geräten kann es die Zoom-Einstellung des Nutzers ignorieren. Das moderne Gegenmittel ist die clamp-Funktion, die einen Mindestwert, einen bevorzugten fließenden Wert und einen Höchstwert nimmt und eine Überschrift mit dem Viewport wachsen lässt, ohne je unter einen Boden zu fallen oder eine Decke zu überschreiten. Rechnen Sie Ihren Boden und Ihre Decke hier in rem um, damit sie weiterhin die Schrifteinstellungen des Nutzers respektieren.

Prozent, ch und ex

Prozent ist relativ, aber wozu, hängt von der Eigenschaft ab. Bei der Breite ist es ein Prozentsatz der Breite des umgebenden Blocks; bei der Schriftgröße ist es ein Prozentsatz der Schriftgröße des Elternelements, was es für Schrift sehr ähnlich wie em verhalten lässt. Diese Kontextabhängigkeit ist der Grund, warum dieses Tool nach einer übergeordneten Schriftgröße fragt, wenn Sie Prozentwerte der Schriftgröße umrechnen. Zwei weitere schriftbezogene Einheiten werden leicht übersehen: ch ist die Breite der Ziffer Null in der aktuellen Schrift, perfekt, um einen Absatz auf ein angenehmes Lesemaß von etwa 60ch zu begrenzen, während ex die Höhe eines kleinen x ist, nützlich für vertikale Anpassungen, die an die Proportionen der Schriftart gebunden sind.

Absolute Druckeinheiten: pt, in, cm, mm

Die physischen Einheiten unterliegen exakten Verhältnissen in der CSS-Spezifikation, weshalb die Umrechnungen hier keine Näherungen sind. Ein Zoll entspricht 96px, ein Punkt ist ein Zweiundsiebzigstel eines Zolls und ergibt damit ein und ein Drittel Pixel, ein Zentimeter ist etwa 37,8px, und ein Millimeter ist ein Zehntel davon. Diese Verhältnisse sind fest, unabhängig vom tatsächlichen Display.

Auf dem Bildschirm sind diese Einheiten meist eine Falle, weil ein Zentimeter auf der Seite selten einem Zentimeter auf einem an den Monitor gehaltenen Lineal entspricht. Ihr eigentliches Zuhause sind Druck-Stylesheets, wo ein physisches Blatt Papier ihnen echte Bedeutung verleiht, und pt insbesondere bleibt die übliche Art, mit der Designer und Textverarbeitungen Schriftgrößen beschreiben. Greifen Sie zu pt, cm und mm, wenn Sie für den Druck gestalten, und greifen Sie zu rem, em und den Viewport-Einheiten, wenn Sie für Bildschirme gestalten.

Barrierefreiheit: warum px-Schriften ein Problem sind

Wenn Sie Schriftgrößen in px setzen, nageln Sie sie fest. Ein Nutzer, der die Standard-Textgröße seines Browsers erhöht – oft weil er es muss –, sieht keine Änderung, weil ein fester Pixelwert diese Präferenz vollständig ignoriert. Text stattdessen in rem zu bemessen bedeutet, dass er mit der vom Nutzer gewählten Root-Schriftgröße skaliert, was einer der wirkungsvollsten Gewinne für die Barrierefreiheit in CSS überhaupt ist und Sie für den Standardleser visuell nichts kostet.

Daraus ergibt sich ein praktischer Arbeitsablauf: Gestalten Sie in Pixeln, weil sie intuitiv sind, und rechnen Sie dann Ihre Schrift und Abstände vor der Auslieferung in rem um, damit das Layout die Nutzereinstellungen achtet. Das ist die mit Abstand häufigste Umrechnung, die dieses Tool durchführt, und bei der Standardbasis von 16px ist die Rechnung freundlich, denn 16px sind 1rem, 24px sind 1.5rem und 8px sind 0.5rem.