UX / UI Низький вплив Середнє 30–60 хв

Відносні одиниці шрифту (rem/em проти px)

Надавайте перевагу rem/em перед жорсткими px у розмірах шрифту.

Що це

Розмір шрифту можна задати жорстко в px або відносно в rem/em. Rem походить від базового розміру документа, тож реагує на користувацьке налаштування розміру шрифту в браузері.

Чому це важливо

Жорсткі px ігнорують, коли користувач у браузері збільшує стандартний шрифт (часто в людей зі слабшим зором). Rem/em поважають це налаштування, вони доступніші й легше масштабуються послідовно.

Як це зробити

1Встановіть базовий розмір на <html> (типово 100% = 16px).
2Розміри шрифту задавайте в rem (напр., 1rem, 1.25rem, 0.875rem).
3em використовуйте там, де розмір має походити від батьківського елемента.
4Жорсткі px залишайте лише для деталей, де масштабування не має сенсу (напр., лінії 1px).

Приклад

Погано

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

Правильно

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

Висновок

Відносні одиниці доступніші й легше підтримуються. Це не катастрофа на кшталт заблокованого масштабування, але на новому сайті варто робити це одразу правильно через rem. Це поважає користувачів, які збільшують собі шрифт.

Повʼязані теми