Przelicz rem na piksele z dowolną bazą

Rem zamienia się na piksele przez jedno mnożenie: wartość w rem razy bazowy font-size. Przy domyślnym ustawieniu przeglądarki baza wynosi 16 px, więc 1 rem to 16 pikseli, a 1,5 rem to 24 piksele. Jednostka odnosi się do rozmiaru tekstu elementu html, czyli korzenia dokumentu – stąd jej nazwa, root em [1].

Przeliczenie przydaje się przy pracy z makietą. Projektant podaje wymiary w pikselach, arkusz stylów zapisuje je w rem, a Ty potrzebujesz jednej liczby, żeby sprawdzić, czy nagłówek 1,875 rem ma faktycznie te 30 pikseli z projektu.

Baza nie musi wynosić 16 px. Technika 62,5% ustawia ją na 10 px, a użytkownik może ją podnieść we własnych ustawieniach przeglądarki – dlatego pole bazowego font-size przyjmuje dowolną wartość od 1 do 100.

Dalej znajdziesz tabelę 26 wartości przy trzech bazach, pełną skalę stopni pisma Tailwind CSS oraz wyjaśnienie, dlaczego liczba 16 jest tylko domyślna. Drogę w przeciwną stronę obsługuje konwerter pikseli na rem.

Wzór ma jedno działanie: piksele = rem × bazowy font-size. Bazowy font-size to rozmiar tekstu ustawiony na elemencie html, a jeśli nikt go nie zmienił, przeglądarka przyjmuje 16 px.

Przykład dla odstępu 1,25 rem: przy bazie 16 px wychodzi 1,25 × 16 = 20 pikseli. Ta sama wartość przy bazie 10 px daje 12,5 piksela, a u czytelnika, który ustawił w przeglądarce 20 px, urośnie do 25 pikseli.

Technika 62,5% polega na zapisaniu html { font-size: 62.5% }, co daje bazę 10 px, bo 62,5% z 16 to dokładnie 10. Rachunek robi się wtedy pamięciowy: 2,4 rem to 24 piksele. Warunek jest jeden – tekstowi w body trzeba przywrócić czytelny rozmiar, zwykle 1.6rem, inaczej cała strona zostanie złożona dziesiątką.

Jednostka em liczy się tak samo, tylko odnosi się do rodzica, a nie do korzenia dokumentu – ten rachunek wykonuje konwerter em na piksele. Te same 16 px to w składzie tekstu 12 punktów typograficznych, co przelicza konwerter punktów na piksele.

Liczba 16 nie pochodzi ze specyfikacji CSS. To domyślny rozmiar tekstu, jaki przeglądarka nadaje dokumentowi, i czytelnik może go zmienić w ustawieniach swojego programu. Kto ma słabszy wzrok, ustawia tam 20 albo 24 px i oczekuje, że strona się dostosuje.

Tu leży cała różnica między rem a pikselem. Element opisany jako font-size: 24px pozostanie 24-pikselowy niezależnie od tego, co ustawił czytelnik. Ten sam element zapisany jako 1.5rem urośnie razem z bazą: przy 20 px da 30 pikseli, przy 24 px – 36.

Wytyczna WCAG 1.4.4 wymaga, żeby tekst dało się powiększyć do 200% bez utraty treści i bez utraty funkcji strony [2]. Układ zbudowany na rem spełnia ten warunek sam z siebie, bo skaluje się razem z ustawieniem czytelnika.

W Polsce ten warunek ma umocowanie w prawie. Ustawa z 4 kwietnia 2019 roku o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych wskazuje jako standard wytyczne WCAG 2.1 [3]. Arkusz stylów zapisany w rem pokrywa wytyczną 1.4.4, zanim audyt w ogóle się zacznie.

Stąd praktyczny podział: stopnie pisma, odstępy i szerokości kolumn zapisuj w rem, a piksel zostaw tam, gdzie wymiar ma pozostać stały niezależnie od tekstu – obramowania, cienie i grubości linii.