freeonlinetools

Was ist Typografie-Einheitenrechner?

Der Typografie-Einheitenrechner rechnet zwischen Pixeln (px), em, rem, Punkt (pt), Prozent (%) und Viewport-Einheiten (vw, vh) um. Lege eine Basis-Schriftgröße und eine Viewport-Größe fest und gib einen Wert in ein beliebiges Feld ein, um alle anderen Einheiten sofort aktualisiert zu sehen.

Die Umrechnungen folgen dem CSS-Standard: 1pt = 96/72 px, em und rem multiplizieren mit der Basis-Schriftgröße, Prozent nimmt die Basis als 100%, und vw und vh sind Anteile der Viewport-Breite und -Höhe. Ändere ein Feld, die anderen sechs rechnen sich live neu. Die Basis-Schriftgröße ist standardmäßig 16px (der übliche Wurzelwert), du kannst sie aber auf 14, 18 oder jeden Wurzelwert deines Design-Systems setzen, und der Viewport ist standardmäßig 1920×1080, damit vw und vh genau bleiben.

Anleitung

  1. Schritt 1 — Legen Sie die Basis-Schriftgröße in Pixeln fest (Standard 16px), die bestimmt, wie relative Einheiten wie em, rem und % berechnet werden.
  2. Schritt 2 — Geben Sie einen numerischen Wert in eines der sieben Einheitenfelder (px, em, rem, pt, %, vw oder vh) ein, um alle anderen Einheiten sofort aktualisiert zu sehen.
  3. Schritt 3 — Kopieren Sie jeden umgerechneten Wert zur Verwendung in Ihrem CSS, Ihren Designspezifikationen oder Drucklayouts.

Wann verwenden

  • pt-Vorgaben einer Print-Designerin in die CSS-Pixelwerte übersetzen, die ein Stylesheet tatsächlich anwendet.
  • Ein Design-System prüfen, ob eine 1.25rem-Überschrift mit dem gewählten Root wirklich 20px ergibt.
  • Den richtigen em- oder %-Wert wählen, wenn der Eltern-Container die geerbte Schriftgröße bereits verändert.

Ergebnis

Ein Designer übergibt Ihnen Spezifikationen in Punkt (14pt Fließtext). Geben Sie 14 im pt-Feld mit einer Basis von 16px ein, um sofort zu sehen, dass dies 18,67px, 1,167em, 1,167rem und 116,7% entspricht — fertig für Ihr Stylesheet.

Häufige Fragen

Warum wird 1pt zu 1,333px statt 1px?
CSS definiert 1pt als exakt 1/72 Zoll und 1in als 96px, also 1pt = 96/72 = 1,333px. Das ist die Umrechnung jedes Browsers. Druckgrößen in pt wirken auf dem Bildschirm größer als die Zahl vermuten lässt, eben wegen dieses 4/3-Multiplikators.
Was ist der Unterschied zwischen em und rem?
rem bezieht sich immer auf die Root-Schriftgröße (das <html>-Element). em bezieht sich auf die Schriftgröße des nächsten Eltern­elements. 2em innerhalb eines 20px-Elternelements sind also 40px, 2rem sind aber 2 × Root, egal welcher Eltern­knoten dazwischen liegt.
Wie wirkt sich die Basis-Schriftgröße auf die Umrechnungen aus?
Sie verändert, wie viele px 1rem und 1em sind. Die Voreinstellung 16px deckt sich mit den meisten Browsern, also 1rem = 16px. Liegt dein Root bei 18px, ist 1rem = 18px und eine 1.25rem-Überschrift wird zu 22,5px statt 20px. pt bleibt unverändert, da pt absolut ist.
Soll ich im Stylesheet px, rem oder em nutzen?
rem für Schriftgrößen (Nutzer können via Browser-Zoom oder Bedienungshilfen anpassen), px für Rahmen und kleine Abstände, wo Genauigkeit zählt, und em für Abstände relativ zur Schriftgröße des aktuellen Elements (z. B. Innenabstand eines Buttons).
Warum sind es nicht 100%, wenn px der Basis entspricht?
Es sind 100%, probier's. Stimmt px exakt mit deiner Basis überein (z. B. 16 bei Basis 16), zeigt das %-Feld 100. Steht ein anderer Wert da, ist px nicht ganz gleich der Basis, vielleicht wegen Rundung in einem anderen Feld oder weil du nach Eingabe von px die Basis geändert hast.

Ähnliche Tools

Zeiteinheiten-Konverter

Zeiteinheiten sofort umrechnen

Zeitstempel-Konverter

Unix-Zeitstempel in Datumsangaben umwandeln

Drehmoment-Konverter

Zwischen Drehmomentseinheiten umrechnen

Winkelumrechner

Wandle Grad, Radiant, Gon, Umdrehungen, Bogenminuten, Bogensekunden und DMS um

Flächenumrechner

Flächeneinheiten sofort umrechnen

Kleidergrößen-Umrechner

Kleidergrößen umrechnen zwischen US, UK, EU, AU, JP und CN — per Etikett oder per Körpermaß, mit Frankreich, Italien und Korea auf Knopfdruck