В чём разница между px, em и rem в контексте размера шрифта?

Question

Accepted Answer

## Ядро темы
Единицы задают, **от чего** считается размер.

## Сравнение
- **`px`** — CSS-пиксель; предсказуемо, но хуже масштабируется от корня типографики.
- **`em`** — относительно **font-size родителя** (для `font-size` — родителя; для других свойств — font-size самого элемента). Легко словить «лестницу» вложенности.
- **`rem`** — относительно **font-size корневого** `html`.

```css
html { font-size: 16px; }
.title { font-size: 1.5rem; } /* 24px */
.note { font-size: 0.875em; } /* от родителя */
```

## Итог
Для модульной шкалы шрифтов чаще `rem`; локальные пропорции внутри компонента — иногда `em`. `px` — для границ/теней и точечных исключений.