UX / UI Niski wpływ Średnie 30–60 min

Względne jednostki czcionki (rem/em vs px)

Preferuj rem/em zamiast sztywnych px przy wielkościach czcionki.

Co to jest

Wielkość czcionki można podać sztywno w px lub względnie w rem/em. Rem wychodzi z podstawowej wielkości dokumentu, więc reaguje na ustawienie wielkości czcionki przez użytkownika w przeglądarce.

Dlaczego warto to rozwiązać

Sztywne px ignorują sytuację, gdy użytkownik powiększy domyślną czcionkę w przeglądarce (częste u osób ze słabszym wzrokiem). Rem/em respektują to ustawienie, są bardziej dostępne i łatwiej skalują się spójnie.

Jak to zrobić

1Ustaw podstawową wielkość na <html> (zwykle 100% = 16px).
2Wielkości czcionki podawaj w rem (np. 1rem, 1.25rem, 0.875rem).
3em używaj tam, gdzie wielkość ma wychodzić od rodzica.
4Sztywne px pozostaw tylko dla detali, gdzie skalowanie nie ma sensu (np. linie 1px).

Przykład

Źle

h1 { font-size: 32px; }
p  { font-size: 14px; }

Dobrze

html { font-size: 100%; }
h1 { font-size: 2rem; }
p  { font-size: 0.95rem; }

Podsumowanie

Jednostki względne są bardziej dostępne i łatwiejsze w utrzymaniu. To nie awaria jak zablokowane powiększanie, ale przy nowej witrynie warto od razu robić to poprawnie przez rem. Respektuje to użytkowników, którzy powiększają sobie czcionkę.

Powiązane tematy