Rem czy px — co lepsze? Jednostki CSS (px, em, rem) i kiedy których używać | WebMajka
Rem czy px — dlaczego to pytanie jest tak ważne
"Używać px czy rem?" — jedno z najczęstszych pytań, które słyszymy od początkujących developerów. Odpowiedź "to zależy" frustruje, ale jest prawdziwa. Od wyboru jednostek w CSS zależy, czy twoja strona będzie dostępna dla osób z wadami wzroku, skalowalna na różnych urządzeniach i łatwa w utrzymaniu. Zły wybór objawia się za kilka miesięcy: strona nie reaguje na zmianę rozmiaru czcionki w przeglądarce, rozjeżdża się na mobile, a każda zmiana layoutu wymaga edycji kilkuset wartości w CSS. Wybór między px, em i rem to nie kosmetyczna dyskusja teoretyków — to fundamentalna decyzja architektoniczna frontendu. W 2026 roku branża ma spore konsensusy (z małymi wyjątkami), ale wciąż większość polskich stron firmowych używa wyłącznie pikseli. Zobaczmy, dlaczego to błąd, kiedy ma sens inaczej i jak praktycznie łączyć te jednostki.
Co to jest 1 px — piksel w CSS
Piksel (px) to absolutna jednostka długości w CSS — font-size: 16px oznacza "16 pikseli wysoki tekst". Brzmi prosto, ale piksel CSS nie jest tym samym co piksel ekranu. Na urządzeniach o wysokiej gęstości (Retina, smartfony) 1 px CSS = 2 lub 3 piksele fizyczne. To rozwiązuje problem: gdybyśmy używali fizycznych pikseli, strona na smartfonie z 400 DPI miałaby drobny tekst, nieczytelny bez lupy. Zaleta px: przewidywalność — 20 px to zawsze 20 px, niezależnie od kontekstu. Wada: nie reaguje na preferencje użytkownika. Gdy ktoś z wadą wzroku zwiększy rozmiar tekstu w ustawieniach przeglądarki (Ctrl +), elementy w px nie zmieniają się. Dla młodego programisty bez wad wzroku ten problem jest niewidoczny — dla milionów użytkowników z różnymi niepełnosprawnościami wzrokowymi to krytyczny problem dostępności. I to jest główny powód, dla którego od 2020 roku branża przeszła na rem.
Co to jest 1 rem — root em
Rem oznacza root em — jednostka względem rozmiaru tekstu na elemencie <html> (root). Domyślnie w każdej przeglądarce <html> ma rozmiar 16 px, więc:
1rem= 16 px (domyślnie)0.5rem= 8 px1.5rem= 24 px2rem= 32 px
Kluczowa zaleta: gdy użytkownik zwiększy rozmiar czcionki w przeglądarce (Ctrl + lub ustawienia systemowe), zmienia się bazowa wartość rem — a z nią wszystkie wartości na stronie. Strona proporcjonalnie się powiększa, zachowując układ. Dla osób z wadami wzroku to różnica między "mogę używać tej strony" a "muszę ją omijać". Rem ma też drugą przewagę: łatwiejsze utrzymanie. Zamiast zmieniać 200 wartości po jednej, zmieniasz jedną wartość html { font-size: ... } i cała strona skaluje się razem. Rem jest kontekstowo niezależny — 1rem znaczy to samo wszędzie, bez względu na to, w jakim elemencie jest użyty.
Co to jest em — kontekstowy em
Em bywa mylony z rem, ale to różne jednostki. Em to jednostka względem najbliższego rodzica z określonym font-size. W elemencie z font-size: 20px, padding: 1em to 20 px. W elemencie z font-size: 12px, 1em to 12 px. Brzmi jak zaleta (kontekstowa skalowalność), ale w praktyce jest źródłem bólu. Typowy problem: zagnieżdżone listy. W <ul> ustawiasz font-size: 1.2em — lista jest 120% rodzica. W zagnieżdżonej <ul> wewnątrz <li> znowu 1.2em — teraz lista jest 144% pradziadka. Przy trzecim zagnieżdżeniu 172%, potem 207% — lawina skalowania. Em jest użyteczne w określonych scenariuszach (padding i margin względem tekstu danego elementu, line-height), ale jako główna jednostka rozmiarów — utrudnia życie. Większość nowoczesnych projektów używa em tylko dla właściwości powiązanych z tekstem elementu, a dla layoutu i globalnych rozmiarów — rem.
Porównanie px vs em vs rem — tabela decyzyjna
Praktyczne zestawienie, kiedy użyć której jednostki.
| Właściwość | Rekomendacja | Dlaczego |
|---|---|---|
| font-size (body, nagłówki) | rem | Skaluje z preferencjami użytkownika |
| font-size (kontekstowe) | em | Względem parent, np. 1.2em nagłówka |
| padding/margin (layout) | rem | Spójność, skalowalność |
| padding/margin (tekst) | em | Proporcja do rozmiaru tekstu |
| border-width | px | Drobne detale, 1px to 1px |
| border-radius | px lub rem | Zależy od efektu |
| width/height kontenery | % / rem / fr | Responsywność |
| width/height obrazków | % / rem / auto | Responsywność |
| max-width strony | rem | Np. 75rem = 1200px |
| letter-spacing | em | Proporcja do tekstu |
| line-height | liczba bez jednostki | Najlepsza praktyka |
| box-shadow, outline | px | Fizyczny efekt |
| media queries | em lub rem | Respektuje user zoom |
Uniwersalna zasada: rem dla większości, px dla detali graficznych, em dla właściwości tekstowych.
Przeliczniki — pamięciowe skróty
Przy bazowym font-size: 16px na root (domyślnym) przeliczniki są proste. 1rem = 16px. 0.5rem = 8px. 0.75rem = 12px. 1.25rem = 20px. 1.5rem = 24px. 2rem = 32px. 3rem = 48px. Wielu deweloperów stosuje trick z html { font-size: 62.5% }, co daje bazę 10px (16 × 0.625 = 10). Wtedy przeliczniki są trywialne: 1rem = 10px. 0.5rem = 5px, 2rem = 20px, 1.6rem = 16px. Wygodne, ale kontrowersyjne — łamie domyślne oczekiwania elementów i może utrudniać współpracę z bibliotekami. Bezpieczniejsza alternatywa: zostaw domyślne 16px, naucz się kilkunastu typowych wartości (zaokrąglone do 0.25rem) i używaj ich konsekwentnie. Większość nowoczesnych frameworków (Tailwind, Bootstrap 5+) ma wbudowaną skalę jednostek opartą na rem — warto się z nimi zapoznać, bo to standard branżowy.
Accessibility — dlaczego rem to nie estetyka, to etyka
Wielu programistów traktuje wybór jednostek jak preferencję estetyczną. To błąd — to kwestia dostępności. Według GUS w Polsce żyje około 2 milionów osób z wadami wzroku (krótkowzroczność wysokiego stopnia, zwyrodnienie plamki żółtej, zaćma, jaskra). Duża część z nich zwiększa rozmiar tekstu w przeglądarce. Jeśli strona zbudowana jest w px, tekst pozostaje mały mimo ustawień — wykluczasz 2 miliony klientów. Po drugie — przepisy. European Accessibility Act obowiązuje od 28 czerwca 2025, nakładając obowiązki dostępności na strony komercyjne. Kary mogą sięgać milionów euro. Po trzecie — UX starszych użytkowników 60+ domyślnie ustawia większą czcionkę. Rem nie jest trendy — jest koniecznością prawną i ludzką.
Media queries — em czy px?
Interesująca kwestia: w jakiej jednostce pisać breakpointy? Przez lata standardem były piksele — @media (min-width: 768px). Problem: gdy użytkownik zwiększy czcionkę, breakpoint pozostaje przywiązany do pikseli, a reszta strony się skaluje — rozjeżdża się layout. Nowoczesna praktyka: używaj em (lub rem) w media queries. @media (min-width: 48em) — reaguje zarówno na szerokość viewportu, jak i preferencje tekstu. W efekcie osoba z powiększoną czcionką automatycznie dostaje wersję tabletową zamiast desktopowej, co jest bardziej ergonomiczne. Bootstrap 5, Tailwind i większość nowoczesnych frameworków używa em/rem w breakpointach. Dla responsywnych stron to duża jakościowa różnica — szczególnie dla użytkowników z niepełnosprawnością wzroku. Warto zmienić ten nawyk od razu, bo refaktoryzacja breakpointów w dużej aplikacji jest bolesna.
Praktyczne przykłady — kod CSS w rem
Jak wygląda w praktyce nowoczesny CSS z rem? Oto fragment typowej karty produktu.
/* Root font-size z domyślnych 16px */
html {
font-size: 100%; /* 16px baseline */
}
body {
font-size: 1rem; /* 16px */
line-height: 1.5;
}
h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 2rem; } /* 32px */
h3 { font-size: 1.5rem; } /* 24px */
.card {
padding: 1.5rem; /* 24px */
border-radius: 0.5rem; /* 8px */
border: 1px solid #ddd; /* px dla drobnego detalu */
max-width: 22rem; /* 352px */
margin-bottom: 2rem; /* 32px */
}
.card__title {
font-size: 1.25rem; /* 20px */
margin-bottom: 0.5em; /* em — proporcja do tekstu */
}
@media (min-width: 48em) { /* 768px, reaguje na zoom */
.card { padding: 2rem; }
}Zauważ: layout i typografia w rem, detale graficzne (1px border) w px, padding pod tekstem w em (kontekst!). Taki plik jest czytelny, spójny, skalowalny i dostępny.
Inne jednostki — vh, vw, %, ch
Poza klasyczną trójką warto znać inne jednostki. Procent (%) — względem rodzica, idealny dla szerokości kontenerów. Viewport units (vh, vw, vmin, vmax) — względem okna przeglądarki: 100vh = 100% wysokości, 50vw = 50% szerokości. Nowość: dvh, svh, lvh — rozwiązują problem z paskami mobile Safari. ch — szerokość znaku "0", idealne do ograniczania szerokości tekstu: max-width: 65ch daje czytelne wiersze. fr (w gridzie) — ułamek dostępnej przestrzeni. clamp() — matematyczna kombinacja: font-size: clamp(1rem, 2vw + 1rem, 2rem) — tekst skaluje się płynnie. Nowoczesny CSS używa tych jednostek równocześnie, każda w swoim zadaniu.
Migracja z px do rem — jak to zrobić
Masz istniejącą stronę zbudowaną w px i chcesz ją zmodernizować. Kilka strategii. Global search-replace — regex zamienia 16px na 1rem, 32px na 2rem. Skuteczne, ale wymaga testów. Stopniowa migracja — zaczynasz od fontów (priorytet dostępności), potem layout, potem detale. Build tools — PostCSS plugin postcss-pxtorem automatycznie konwertuje wartości px na rem podczas buildu. Design tokens — definiujesz paletę w CSS custom properties (--size-sm: 0.875rem). Tailwind CSS — przejście na Tailwind wymusza rem domyślnie. Dla dużych projektów najlepsze efekty daje kombinacja: PostCSS + audyt dostępności. Migracja z px na rem to jedna z najbardziej opłacalnych inwestycji technicznych dla starszego kodu.
Podsumowanie — rem jako domyślny wybór
Odpowiedź na pytanie "rem czy px": w 2026 roku domyślnie rem, z px tylko do drobnych detali graficznych i em do właściwości bezpośrednio związanych z rozmiarem tekstu lokalnie. Ten prosty pattern daje dostępność, skalowalność, łatwość utrzymania i zgodność z best practices branżowymi. Wszystkie nowoczesne frameworki (Tailwind, Bootstrap 5+, Material) wymuszają ten wybór. Dla starszych projektów warto zaplanować migrację — to koszt kilku dni pracy, a zysk to lepsza dostępność dla milionów użytkowników oraz zgodność z European Accessibility Act. Jeśli tworzysz strony internetowe dla klientów, rem powinien być domyślnym wyborem, a px wyjątkiem uzasadnionym konkretną potrzebą. To nie modny trend — to minimum profesjonalizmu we frontendzie dziś. Warto też poznać gradient CSS i inne nowoczesne techniki, które razem z rem tworzą solidny warsztat współczesnego web developera.
Najczęściej zadawane pytania (FAQ)
Ile to jest 1rem w px?
html { font-size: 14px }, to 1rem = 14px. Popularny trick html { font-size: 62.5% } daje 1rem = 10px — łatwiejsze mentalne przeliczanie. Trick bywa kontrowersyjny, bo łamie domyślne wartości w bibliotekach.Rem czy px — co wybrać dla font-size?
Jaka jest różnica między em a rem?
<div style="font-size:20px">, 1em = 20px, 1rem = 16px. Problem z em: zagnieżdżenie powoduje lawinę skalowania. Rem jest kontekstowo niezależne — 1rem znaczy to samo wszędzie. Em używaj tylko dla padding/margin/line-height proporcjonalnych do tekstu.Czy px jest całkowicie złe w 2026?
border: 1px, box-shadow: 0 2px 4px, outline: 3px. To elementy dekoracyjne, nie funkcjonalne. Zasada: jeśli coś musi być dostępne, używaj rem. Jeśli coś musi być sharp, używaj px.Czy Tailwind używa rem czy px?
p-4 to padding: 1rem, text-lg to 1.125rem, w-64 to 16rem. To jeden z powodów, dla których Tailwind wygrywa — wymusza best practices. Bootstrap 5 również przeszedł z px na rem. To standard branżowy.Jak przekonwertować istniejący projekt z px na rem?
Co z jednostkami w media queries?
@media (min-width: 48em) zamiast 768px. Dlaczego? Gdy użytkownik zwiększa czcionkę, breakpointy w px pozostają przywiązane do okna, a reszta się skaluje — layout się rozjeżdża. Em/rem zapewnia, że osoba z powiększoną czcionką dostaje wcześniej wersję mobilną. Bootstrap 5 i Tailwind tak robią.
