Kostenloses Technik-Tool

PX-in-REM-Rechner

Rechnen Sie px, rem, em und Viewport-Einheiten um, erzeugen Sie flüssige Schriftgrößen mit clamp() und bauen Sie eine komplette Typo-Skala. Ein Schieberegler zeigt, wie groß jede Stufe bei jeder Bildschirmbreite wird.

7 Einheiten8 Skalenstufen200 % Zoom-Prüfung5 Ausgabeformate

h1 bei 1440 px0 px0 rem

Einheiten umrechnen

Beispieldaten

Wert

Einheit des Werts

Root-Schrift für rem

Eltern-Schrift für em, %

Viewport-Breite

Viewport-Höhe

Browser setzen die Root-Schrift standardmäßig auf 16 px. Wer in den Browsereinstellungen eine größere Schrift wählt, bekommt bei rem-Werten automatisch größeren Text, bei px-Werten nicht.

Ergebnis

Klicken Sie auf einen Wert, um ihn zu kopieren. vw und vh beziehen sich auf die eingetragene Viewport-Größe, pt rechnet mit 96 px pro Zoll.

Flüssige Schriftgröße

Kleinste Größe

Größte Größe

ab Breite

bis Breite

CSS-Selektor optional

Unterhalb der Startbreite bleibt die kleinste Größe stehen, oberhalb der Endbreite die größte. Dazwischen wächst die Schrift gleichmäßig mit.

Ihr Code

Ausgabe als

Typo-Skala

Jede Stufe ist die vorherige mal Verhältnis. Kleine Bildschirme vertragen ein flacheres Verhältnis als große, deshalb gibt es zwei.

Fließtext mobil

Fließtext Desktop

Verhältnis mobil

Verhältnis Desktop

Präfix der Variablen

Die Breiten für den Übergang kommen aus „Flüssige Schriftgröße“ oben.

Vorschau-Breite1440 px

Code der Skala

Ausgabe als

Barrierefreiheit im Blick

So rechnet das Tool px in rem und wieder zurück

Von px nach rem

Um px in rem umzurechnen, teilt das Tool den Pixelwert durch die Root-Schriftgröße: Bei 16 px entsprechen 24 px also 1,5 rem. Diese Root-Größe tragen Sie selbst ein, falls Ihr Stylesheet sie am html-Element ändert. Aus einem Wert berechnet dieser REM-Rechner sieben Einheiten gleichzeitig, nämlich px, rem, em, %, vw, vh und pt. Jeder Klick auf ein Ergebnis kopiert den Wert samt Einheit.

Von rem in alle Einheiten

Für den Rückweg wählen Sie rem als Einheit des Werts, und das Tool rechnet von dort in alle anderen Einheiten. Die Bezugsgrößen unterscheiden sich: em und % hängen an der Eltern-Schrift, vw und vh an der eingetragenen Breite und Höhe des Viewports. Bei pt gilt die CSS-Festlegung von 96 px auf 72 pt pro Zoll. Im Englischen heißt dieselbe Aufgabe „px to rem“, an der Formel ändert das nichts.

Warum px in rem die Schrifteinstellung der Nutzer respektiert

Größere Standardschrift im Browser

Browser setzen die Root-Schrift in der Regel auf 16 px. Wählt jemand in den Browsereinstellungen eine größere Standardschrift, wachsen alle rem-Werte mit. Feste px-Werte bleiben gleich groß. Diese Einstellung nutzen etwa Menschen mit eingeschränktem Sehvermögen, für die der vorgesehene Text sonst zu klein bleibt.

rem statt em bei Verschachtelung

Von em unterscheidet sich rem durch den Bezug. Weil em bei Schriftgrößen an der Eltern-Schrift hängt, multiplizieren sich die Werte bei verschachtelten Elementen: 1,2em innerhalb eines Elements mit 1,2em ergibt das 1,44-Fache. Mit rem bleibt jede Größe an der Root-Schrift verankert, egal wie tief ein Element im HTML steckt. Trotzdem hat px seinen Platz, etwa für Rahmen und Haarlinien von 1 px, die bei größerer Schrift nicht dicker werden sollen.

Fließende Schriftgrößen mit dem clamp() Rechner erzeugen

Für eine Überschrift, die zwischen zwei Bildschirmbreiten gleichmäßig wächst, tragen Sie kleinste und größte Größe sowie Start- und Endbreite ein. Unterhalb der Startbreite bleibt die kleinste Größe stehen, oberhalb der Endbreite die größte. Dazwischen steigt die Schrift linear an. Wie ein CSS clamp Generator baut das Tool daraus einen Wert aus Minimum, rem-Anteil plus vw-Anteil und Maximum. Aus 20 und 28 px zwischen 360 und 1280 px Breite wird so clamp(1.25rem, 1.0543rem + 0.8696vw, 1.75rem).

Mit Selektor, etwa h2, entsteht eine fertige Regel, sonst nur die Deklaration. Fünf Ausgabeformate stehen zur Wahl: CSS, CSS-Variablen, SCSS, Tailwind v3 und Tailwind v4. CSS-Variablen landen in :root und lassen sich mit var() überall wiederverwenden, auch im Theme oder Page Builder von WordPress. Bei Tailwind v3 gehören die Einträge unter theme.extend.fontSize in die Konfiguration, bei v4 in einen @theme-Block der CSS-Datei, die Tailwind importiert.

Kurve: Die Schrift bleibt unter 360 px Breite bei 20 px, steigt bis 1280 px gleichmäßig auf 28 px und bleibt darüber bei

Eine Typo-Skala mit eigenem Verhältnis für Smartphone und Desktop

Zwei Verhältnisse, acht Stufen

Jede Stufe der Skala ergibt sich aus der vorherigen mal einem festen Faktor. Kleine Bildschirme vertragen ein flacheres Verhältnis als große, weil Überschriften auf dem Smartphone sonst zu groß ausfallen, und das Tool rechnet mit zwei Werten. Ausgangspunkt ist der Fließtext, einmal für mobil und einmal für Desktop. Daraus entstehen acht Stufen von h1 bis small, jede als eigener clamp()-Wert. Für die Verhältnisse gibt es acht Vorgaben von der Kleinen Sekunde (1,067) bis zum Goldenen Schnitt (1,618).

Übergang, Präfix und Vorschau

Die Breiten für den Übergang übernimmt die Skala aus dem clamp() Rechner. Mit dem Präfix legen Sie fest, wie die Variablen heißen, etwa --fs-h1. Über einen Schieberegler von 320 bis 1920 px sehen Sie jede Stufe bei jeder Bildschirmbreite, ein Diagramm zeigt den Verlauf aller Stufen. Dieses Vorgehen ist als fluid typography bekannt. Lesbarkeit auf kleinen Bildschirmen ist ein Teil von Mobile SEO, und das Tool warnt, sobald der Fließtext mobil unter 16 px liegt.

Welche Rolle der rem-Anteil im clamp() bei 200 % Zoom spielt

WCAG 1.4.4 verlangt, dass sich Text ohne Hilfstechnik auf 200 % vergrößern lässt. Beim Zoomen wächst ein reiner vw-Wert nicht mit, weil er an der Breite des Fensters hängt. Erst der rem-Anteil im clamp() lässt die Schrift mitwachsen. Das Tool prüft jede Fensterbreite von 320 bis 2560 px und meldet einen Fehler, wenn der Text dort selbst mit 500 % Zoom nicht das Doppelte erreicht.

Liegt der Startwert im clamp() bei null oder darunter, hängt die Schrift fast nur am vw-Anteil, und auch dann erscheint ein Fehler. Ist die größte Größe mehr als 2,5-mal so groß wie die kleinste, folgt ein Hinweis. Schrift unter 12 px markiert das Tool als schwer lesbar, eine h1 über 48 px auf dem Smartphone als Kandidat für Umbrüche in langen Wörtern. Für die Zeilenhöhe empfiehlt es eine Zahl ohne Einheit wie 1.5, die sich jeder berechneten Schriftgröße anpasst. Den Zoom-Test können Sie als festen Punkt in Prüfungen für Technisches SEO aufnehmen. Steht unter dem Code der Skala „Alle Stufen lassen sich auf 200 % zoomen und bleiben gut lesbar“, übernehmen Sie die Werte, sonst ändern Sie Größen oder Verhältnis, bis keine Meldung mehr erscheint.

Meldungen der Zoom-Prüfung: Fehler bei weniger als dem Doppelten mit 500 Prozent Zoom und bei einem Startwert von null o

Philipp Nessmann

Experte für SEO, GEO, LLMO & AIO - wir machen Sie sichtbar bei Google, ChatGPT & Perplexity.

Philipp Nessmann ist SEO-Berater mit über 20 Jahren Erfahrung und Gründer der Nessmann GmbH (Marken: Contentbär und SEO Agents). Er hat mehr als 1.100 Projekte betreut und mit Jurawelt.com sowie trauringspezialisten.de eigene Plattformen aufgebaut. Sein Schwerpunkt liegt auf technischem SEO und der Sichtbarkeit in KI-Systemen wie ChatGPT, Gemini und Perplexity (GEO). Als Gastautor veröffentlicht er regelmäßig u. a. bei OMR, RTL, GoDaddy, HostEurope, Mittwald und DomainFactory.

Gastbeiträge

SEO verändert sich. Sind Sie bereit für KI?

Werden Sie in Google, ChatGPT, Perplexity und mehr gefunden. Wir kombinieren klassisches SEO mit KI-optimierten Strategien.

Sprechen Sie mit einem Experten