Чем отличаются относительные единицы измерения em и rem и как их использовать

Em и rem — относительные единицы измерения в CSS, которые помогают гибко управлять размерами шрифтов, отступов и элементов интерфейса. Они особенно полезны при адаптации сайтов под разные экраны. Разберемся, чем em отличается от rem и в каких случаях лучше использовать каждую из этих единиц.

Что такое em

Em — это относительная единица, которая рассчитывается от размера шрифта текущего элемента.

Если размер шрифта у самого элемента не задан явно, он берется от ближайшего родительского элемента.

1em всегда равен текущему размеру шрифта элемента, но фактическое значение может отличаться в зависимости от родителя.

Если изменить размер шрифта у родителя, то у всех вложенных элементов, у которых размеры шрифта заданы в em, автоматически изменятся фактические размеры шрифта.

Пример:

Родительский блок (например, карточка): размер шрифта = 16px. Соответственно 1em → 16px.
Размеры элементов и шрифтов внутри блока:

картинка: ширина и высота 14em → 224px

тексты: 2em → 32px, 1.25 → 20px, 0.88em → 14px

Если увеличить размер шрифта у родителя до 18px, то размеры внутри блока тоже изменятся:

картинка: ширина и высота 14em → 252px

тексты: 2em → 36px, 1.25 → 22.5px, 0.88em → 15.84px

Вывод: em «следит» за родителем, поэтому размеры элементов в em меняются вместе с размером шрифта контейнера. Один и тот же 1em может давать разный визуальный размер в разных родительских блоках.

Что такое rem

Rem — это относительная единица, которая считается от размера шрифта корневого элемента страницы (Root).

1rem всегда равен размеру шрифта, заданному у Root.

Если изменить базовый размер шрифта, все значения на странице, заданные в rem, автоматически изменятся.

Пример:

Размер шрифта у Root = 16px

1rem → 16px

1.25rem → 20px

3rem → 48px

Если увеличить размер шрифта у Root до 18px:

1rem → 18px

1.25rem → 22.5px

3rem → 54px

Вывод: rem дает единый масштаб по всей странице — элементы с одинаковыми значениями сохраняют один и тот же визуальный размер в любом месте, не зависимо от вложенности элемента.

В Taptop единицы измерения конвертируются автоматически. Например, значение в px, можно переключить на em — и оно будет пересчитано с учетом размера шрифта родителя. Это упрощает работу и избавляет от ручных расчетов.

В чем разница между em и rem

Предсказуемость
Rem всегда дает одинаковый визуальный размер по всему сайту, em может отличаться в зависимости от родительского элемента.

Влияние вложенности
Элемент с размером в em масштабируется вместе с родителем, а в rem — нет.

Управление
Rem удобно менять централизованно через Root, em — локально, на уровне отдельных блоков.

Как использовать единицы измерения em и rem в Taptop

В Taptop можно комбинировать em и rem с абсолютными единицами (px) и viewport‑единицами (vw, vh). Это позволяет гибко управлять размерами элементов и делать «флюидную верстку» (автомасштабирование) для плавной адаптации сайта под любое разрешение экрана.

Как сделать Auto Scale для текста и других элементов?

Рекомендуемый подход:

Rem — для базовых размеров шрифтов и глобальных отступов. Тогда изменение размера шрифта у Root сразу обновит всю типографику.

Em — для внутренних масштабируемых компонентов (карточки, блоки с текстом и кнопками) — чтобы все внутри масштабировалось от родителя.

Em также можно использовать для настройки расстояния между символами в тексте:

Как задать межбуквенное расстояние в процентах, как в Figma?

Что выбрать: em или rem

Выбор зависит от задачи:

используйте rem, если размеры должны быть одинаковыми по всему сайту и легко управляться централизованно

используйте em, если элемент должен масштабироваться вместе со своим контейнером

В большинстве проектов em и rem не конкурируют, а дополняют друг друга: rem задает базовый масштаб, а em позволяет гибко управлять вложенными элементами.

Резюме

em рассчитывается от размера шрифта элемента или его родителя и меняется вместе с ним.

rem зависит от размера шрифта Root и остается одинаковым по всей странице.