Введите значение — пересчёт появится здесь
Частые значения при базовом шрифте 16px
| px | rem | em | % |
|---|---|---|---|
| 8 | 0.5 | 0.5 | 50 |
| 10 | 0.625 | 0.625 | 62.5 |
| 12 | 0.75 | 0.75 | 75 |
| 14 | 0.875 | 0.875 | 87.5 |
| 16 | 1 | 1 | 100 |
| 18 | 1.125 | 1.125 | 112.5 |
| 20 | 1.25 | 1.25 | 125 |
| 24 | 1.5 | 1.5 | 150 |
| 28 | 1.75 | 1.75 | 175 |
| 32 | 2 | 2 | 200 |
| 36 | 2.25 | 2.25 | 225 |
| 40 | 2.5 | 2.5 | 250 |
| 48 | 3 | 3 | 300 |
| 56 | 3.5 | 3.5 | 350 |
| 64 | 4 | 4 | 400 |
Как перевести rem в px и обратно
Обе формулы держатся на одном числе, базовом размере шрифта корневого элемента. По умолчанию в браузерах это 16px.
px = rem × 16 /* 1.5rem × 16 = 24px */
rem = px ÷ 16 /* 24px ÷ 16 = 1.5rem */Если база другая, скажем дизайн-система живёт на 14px, подставьте её вместо шестнадцати. Конвертер выше умеет считать с любой базой.
Таблица соответствий при базе 16px
Значения, которые встречаются в вёрстке чаще всего. Держите под рукой, чтобы не считать в уме.
| px | rem | Где применяется |
|---|---|---|
| 4px | 0.25rem | Мелкий отступ, зазор между иконкой и текстом |
| 8px | 0.5rem | Внутренний отступ компактных элементов |
| 12px | 0.75rem | Подписи, вспомогательный текст |
| 14px | 0.875rem | Мелкий текст интерфейса |
| 16px | 1rem | Базовый размер текста |
| 20px | 1.25rem | Крупный текст, подзаголовок |
| 24px | 1.5rem | Заголовок третьего уровня, отступ секции |
| 32px | 2rem | Заголовок, крупный отступ |
| 48px | 3rem | Отступ между блоками страницы |
| 64px | 4rem | Крупный заголовок, отступ секции |
Чем rem отличается от em
rem всегда считается от корневого элемента, а em от размера шрифта родителя. Разница вылезает при вложенности: em накапливается.
/* em копится: каждый уровень умножает предыдущий */
.a { font-size: 0.9em; } /* 14.4px от базовых 16px */
.a .b { font-size: 0.9em; } /* 12.96px — уже не от 16px, а от 14.4px */
.a .b .c { font-size: 0.9em; } /* 11.66px */
/* rem не копится: отсчёт всегда от html */
.a, .a .b, .a .b .c { font-size: 0.9rem; } /* везде 14.4px */Поэтому для типографики и отступов берут rem, он предсказуем. em остаётся полезен там, где размер должен зависеть от текста рядом. Скажем, внутренний отступ кнопки, который сам подстраивается под кегль надписи.
Зачем вообще rem вместо px
Ради людей, которые увеличивают шрифт в настройках браузера. Размеры в rem подхватят эту настройку автоматически: текст, отступы и блоки вырастут вместе. Размеры в px останутся мелкими, и сайт для такого человека просто не читается. Это самая частая причина жалоб на «слишком мелкий шрифт», и лечится она выбором единицы.
При этом px никуда не уходит: границы в 1px, тонкие разделители и размеры иконок масштабировать не нужно. Смешивать единицы нормально, если понимаешь, почему в каждом месте выбрана своя.
Трюк с базой 10px
Чтобы деление на 16 не мешало жить, корню задают font-size: 62.5%, это как раз 10px от стандартных 16px. После этого 1rem = 10px, и перевод превращается в сдвиг запятой: 24px — это 2.4rem.
html { font-size: 62.5%; } /* 1rem = 10px */
body { font-size: 1.6rem; } /* вернули читаемые 16px тексту */Важная деталь. Базу задают в процентах, а не в пикселях. Жёсткое font-size: 10px на корне отрезало бы пользовательскую настройку шрифта, то есть убило бы ровно то, ради чего мы взяли rem. Проценты же считаются от пользовательской базы и сохраняют масштабирование.
Шрифт, который тянется за экраном
Если размер должен плавно меняться вместе с шириной окна, фиксированного rem мало, нужна функция clamp(). Она задаёт минимум, желаемое значение и максимум одной строкой, а собрать её можно в калькуляторе clamp.
Про формулу перевода, трюк с базой 10px и то, почему rem важен для доступности, написано в статье «Как перевести px в rem (и обратно)».