Конвертер px, rem и em

Поле пустое: вставьте сюда стили, и справа появится пересчитанный кусок.

• 1–2 px — толщина границы и обводка фокуса. Их в rem не переводят: линия не должна толстеть вместе с текстом.
• 4 px — мелкий радиус, отбивка иконки от подписи, шаг тонкой настройки отступов.
• 8 px — базовый шаг сетки отступов у большинства макетов; 4, 12, 16, 24 — его же кратные.
• 12–14 px — подписи, сноски, служебный текст. Ниже 12 px не опускайтесь: это уже нечитаемо на телефоне.
• 16 px — основной текст. Ровно столько браузер ставит по умолчанию, и ровно это будет 1rem.
• 24–32 px — заголовки третьего и второго уровня, отступ между блоками внутри секции.
• 40–64 px — заголовок первого уровня на десктопе и отбивка между секциями.
• 72–96 px — воздух между крупными экранами лендинга; на телефоне такие отступы обычно режут вдвое.

Как пользоваться

1. Выберите базовый кегль кнопкой или впишите свой. Если вы не переопределяли font-size у html, оставьте 16 px — именно столько ставят браузеры.

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

3. Строку «столько увидит читатель» читайте как проверку на доступность: там весь ряд настроек шрифта в браузере, а не одна ступень. Раздел «Как это выглядит» показывает то же самое глазами.

4. Нужен не один размер, а весь файл — вставьте кусок CSS в раздел «Пересчитать целый кусок CSS». Галка про границы и тени оставит в пикселях то, что в rem переводить вредно.

5. Таблица частых размеров пересчитывается под выбранную базу. Нажатие на значение копирует его; кнопка рядом отдаёт всю таблицу переменными --size-* или файлом.

6. Кнопка «Скопировать ссылку» кладёт все поля в адрес — ссылку можно отправить в чат, и коллега увидит тот же расчёт. Настройки заодно запоминаются в браузере до следующего раза.

Формула и что в неё входит

• Базовый кегль — font-size элемента html; от него и только от него считается rem
• Кегль родителя — font-size ближайшего родителя; от него считаются em и проценты
• Проценты — то же, что em, только умноженное на сто: 1.2em и 120% дают один результат
• Пункты — в CSS один дюйм равен 96 px и 72 pt, поэтому один пиксель — это ровно 0,75 pt
• vw и vh — процент ширины и высоты окна; vmin берёт меньшую из двух сторон
• clamp — нижняя граница, прямая между двумя ширинами и верхняя граница — три аргумента вместо трёх медиазапросов

Разбор примера: 24 px при базе 16 px

Исходные данные — те же, что стоят в полях по умолчанию: их можно пересчитать в уме и убедиться, что инструмент не врёт.

• Размер из макета 24 px
• Базовый кегль страницы 16 px
• Кегль родителя 20 px
• Ширина экрана 1440 px, узкий экран 375 px

1. В rem: 24 ÷ 16 = 1.5.

2. В em: 24 ÷ 20 = 1.2. В процентах то же самое: 1.2 × 100 = 120 %.

3. В пунктах: 24 × 0,75 = 18 pt. В vw при ширине 1440: 24 ÷ 1440 × 100 = 1.66667.

4. Если читатель поднимет базовый кегль до 20 px, элемент, заданный в rem, станет 1.5 × 20 = 30 px, а при 24 px — 36 px.

5. Обратно: чтобы узнать, сколько пикселей в 1.375rem, впишите это число в поле rem — получится 22 px.

24 px при базе 16 px — это 1.5 rem. В стилях: font-size: 1.5rem.

Частые вопросы

• Как посчитать в обратную сторону: сколько пикселей в 1.375rem?

  Впишите 1.375 в поле «rem» — поле «Пиксели» пересчитается само. Поля здесь равноправные: источником может быть любое из пяти, включая em, проценты и пункты.

• Почему разделитель точка, а не запятая?

  Потому что результат отсюда переносят в стили, а CSS понимает только точку. Запись 1,5rem — синтаксическая ошибка, и правило целиком будет отброшено. Во вводе запятая, наоборот, разрешена: её снимут за вас.

• Чем rem отличается от em?

  Точкой отсчёта. rem всегда считается от font-size элемента html, em — от font-size ближайшего родителя. Поэтому em накапливается при вложенности: три вложенных блока по 1.2em дают 1,728 от исходного размера, а три вложенных по 1.2rem — ровно 1,2 каждый.

• Что не так с приёмом font-size: 62.5%?

  Он ставит базовый кегль в 10 px, чтобы 1.6rem читалось как 16 px. Но человек, который поднял размер шрифта в настройках браузера, получит те же 62,5 % от своего значения — то есть текст всё равно окажется мельче, чем он попросил. Считать в уме удобнее, читать сайт труднее. Пресет здесь есть, но с предупреждением прямо на кнопке.

• Что именно меняется при пересчёте куска CSS?

  Только числа с единицей px внутри объявлений: padding, font-size, gap и прочее. Ширины в @media и @container остаются в пикселях — там px означает ширину окна, а не размер шрифта, и перевод в rem поменял бы смысл условия. Текст в кавычках и адреса в url() тоже не трогаются. Галка «оставлять в px границы, обводки, тени и радиусы меньше 4 px» действует на свойства border*, outline*, box-shadow и text-shadow.

• Где пиксели уместнее rem?

  Там, где величина не должна расти вместе с текстом: толщина границы, смещение и размытие тени, мелкий радиус скругления. Граница в 1 px при увеличенном кегле должна остаться границей, а не превратиться в рамку.

• Зачем в вебе пункты?

  Почти незачем: pt нужен для печатных стилей, где физический размер имеет смысл. На экране браузер всё равно переведёт pt в пиксели по формуле 1 pt = 96 ÷ 72 px, поэтому выигрыша нет, а привычные размеры перестают читаться с первого взгляда.

• Можно ли задавать кегль в vw?

  Одним vw — нет. Размер, заданный только во вьюпортных единицах, не отзывается на настройку шрифта в браузере, и человек с плохим зрением не сможет увеличить текст. Рабочий вариант — clamp() со слагаемым в rem: строка отсюда так и собрана, а разложить её на шкалу и проверить по WCAG можно в генераторе clamp().

• Данные куда-нибудь отправляются?

  Нет. Всё считает браузер: после загрузки страница не делает ни одного запроса, вставленный CSS остаётся на вашем устройстве, файлы собираются там же. Настройки (базовый кегль, кегль родителя, размеры экрана, галки) хранятся в localStorage вашего браузера, чтобы не набирать их каждый раз.