Przejdź do treści

Konwerter px ↔ rem, em i pt (CSS)

Przelicz piksele na rem (i odwrotnie) dla dowolnego rozmiaru bazowego czcionki, a także na punkty — z tabelą najczęstszych rozmiarów i gotowym kodem CSS.

Umieść to narzędzie na swojej stronie

Bezpłatnie, bez rejestracji. Widżet pokazuje na dole napis „Narzędzie udostępnia AMKBIT.pl”.

Strona demonstracyjna

Wzory

rem = px ÷ rozmiar bazowy px = rem × rozmiar bazowy pt = px × 0,75

Rozmiar bazowy to rozmiar czcionki elementu html. W przeglądarkach domyślnie wynosi 16 px, więc 1 rem = 16 px, 24 px = 1,5 rem, a 14 px = 0,875 rem.

rem czy em?

  • rem liczy się zawsze od rozmiaru czcionki elementu html — wynik jest przewidywalny w całej stronie.
  • em liczy się od rozmiaru czcionki rodzica (dla font-size) lub samego elementu (dla innych właściwości) — zagnieżdżone elementy mogą „rosnąć” lub „maleć” kaskadowo. Przydaje się np. do odstępów w przycisku, które mają skalować się z jego tekstem.

Dlaczego warto używać rem

Gdy użytkownik zwiększy domyślny rozmiar czcionki w ustawieniach przeglądarki (częste u osób słabowidzących), rozmiary w rem rosną razem z nim, a w px — nie. To jedno z wymagań dostępności WCAG: tekst powinien dać się powiększyć do 200%.

Nie ustawiaj html { font-size: 62.5% } tylko po to, by łatwiej liczyć (1 rem = 10 px) — to działa, ale wymaga przestawienia wszystkich rozmiarów tekstu na stronie. Prościej użyć konwertera.

Przykłady

Nagłówek

32 px przy bazie 16 px = 2 rem = 24 pt.

Lista CSS

margin: 8px 16px → margin: 0.5rem 1rem.

Najczęstsze pytania

Czy 1px obramowania też zamieniać na rem?

Zwykle nie — cienkie linie (1–2 px) zostawia się w pikselach, żeby zawsze były ostre. Konwerter zamienia wszystkie wartości z listy, więc takie miejsca popraw ręcznie.

Poradniki

Programowanie i tworzenie stronSzybka makieta strony — rem, gradienty, placeholdery i Lorem ipsumZestaw prostych narzędzi do budowania prototypu strony: jednostki rem zamiast pikseli, gradienty CSS bez grafik, obrazki zastępcze i tekst testowy…Programowanie i tworzenie stronCSS Grid — podstawy i gotowe układy stronCzym jest siatka, jak działa jednostka fr i jak bez media queries zbudować responsywną galerię kart.Programowanie i tworzenie stronFlexbox w CSS — podstawy i gotowe układyJak działają osie, kiedy użyć justify-content i align-items oraz jak szybko zrobić menu, karty i wyśrodkowanie.

Wynik ma charakter pomocniczy. Przy ważnych decyzjach (finansowych, technicznych, zdrowotnych) sprawdź go niezależnie. Zasady korzystania.