Pixele na rem
Przelicz wartości pikseli na rem w nowoczesnym CSS. rem skaluje się z rozmiarem czcionki root użytkownika — lepsze dla dostępności niż sztywne px.
Jak przeliczyć px na rem
1. Wpisz wartość px z projektu (np. 32 px).
2. Ustaw rozmiar czcionki root (domyślnie 16 px, jeśli nie zmieniono).
3. Skopiuj wynik rem do arkusza stylów.
4. Używaj rem dla font-size, odstępów i skali komponentów; px zostaw dla cienkich obramowań, jeśli trzeba.
Przykłady px → rem
Tekst podstawowy i nagłówki
16 px = 1 rem (domyślnie). 24 px = 1,5 rem nagłówka. 14 px = 0,875 rem małego tekstu.
Root 10 px (design systemy)
Zespoły ustawiają html { font-size: 62,5% }, by 1 rem = 10 px. Wtedy token 32 px z projektu = 3,2 rem.
Skala odstępów
Siatka 8 px → 0,5 rem przy root 16 px. Padding 16 px = 1 rem — spójny rytm jak w Tailwind.
Kiedy przeliczać px na rem
• Gdy implementujesz specyfikacje Figma w responsywnym CSS z dostępnym zoomem.
• Gdy trzymasz się tokenów design systemu w rem.
• Gdy użytkownicy zmieniają domyślny rozmiar czcionki — layout w rem się dostosowuje.
rem vs em w CSS komponentów
em kumuluje się w zagnieżdżonych elementach z różnym font-size — padding w em rośnie z lokalnym tekstem. rem trzyma się root, dając przewidywalne odstępy w komponentach. Wiele zespołów używa rem do skali layoutu, em tylko do letter-spacing lub drobnych korekt przy lokalnej typografii.
Najczęstsze pytania
Czym jest rem?
rem = „root em”. 1 rem równa się font-size elementu html, nie rodzica.
Dlaczego nie px wszędzie?
Sztywne px ignorują preferencje użytkownika. rem respektuje skalowanie root (WCAG).
Domyślny rozmiar root?
Większość przeglądarek domyślnie 16 px na html. Użytkownik może to zmienić w ustawieniach.
Wzór?
rem = px ÷ rootFontSizePx. Przykład: 20 px ÷ 16 = 1,25 rem.
Czy rem działa dla margin i padding?
Tak — rem dotyczy każdej właściwości CSS length, nie tylko font-size.