Как пользоваться
- Задайте базовый font-size (по умолчанию 16px), размер родителя для em и % и размеры вьюпорта для vw/vh — кнопка мой экран подставит текущее окно.
- Введите значение с единицей:
24px,1.5rem,50vw,12pt. Справа появится таблица во всех единицах с копированием; кнопка ↺ делает любую строку исходной. - Шкала px → rem и таблица типографики пересчитываются под вашу базу — клик по значению копирует его.
- В генераторе clamp() укажите минимальный размер при узком экране и максимальный при широком — получите готовое
clamp(1rem, 0.7407vw + 0.8333rem, 1.5rem)в rem и в px с разбором формулы.
Как связаны px, rem, em и остальные единицы
Пиксель — единственная «абсолютная» единица экрана, все прочие считаются относительно чего-то. rem — от font-size корневого элемента html (обычно 16px, поэтому 24px = 1.5rem, а 1rem = 16px); em и % — от размера родителя, из-за чего вложенные em накапливаются; vw и vh — проценты от ширины и высоты вьюпорта, vmin/vmax — от меньшей и большей стороны. Типографские pt, pc, in, cm, mm привязаны к CSS-дюйму в 96px: 1px = 0.75pt, то есть 12pt = 16px.
Конвертер держит все параметры в настройках, поэтому результат честный для вашего проекта: поменяйте базу на 10px (популярный трюк html{font-size:62.5%}) — и вся таблица, шкала и clamp() пересчитаются.
Зачем верстальщику и арбитражнику
- Макет в Figma в пикселях, а в CSS нужны rem — иначе пользователь с увеличенным системным шрифтом получит сломанную страницу. Шкала 8…96px в rem закрывает 90% типовых значений: отступы, радиусы, размеры шрифта.
- Лендинг под оффер смотрят с телефона 360px и с монитора 1920px. Плавный заголовок через
clamp()избавляет от пачки медиа-запросов, а генератор считает наклон и свободный член за вас. - Проверка чужой вёрстки:
2.5vwв баннере — это сколько на 1080px? Ответ появляется на лету при смене ширины вьюпорта.
Как устроен clamp()
Плавный размер — прямая между двумя точками: минимальный размер при минимальной ширине экрана и максимальный при максимальной. Наклон = Δразмер / Δширина, умноженный на 100 даёт коэффициент при vw; свободный член = мин. размер − наклон × мин. ширина, его переводим в rem. Для 16px@360 → 24px@1440 получаем clamp(1rem, 0.7407vw + 0.8333rem, 1.5rem). Инструмент отдаёт и rem-версию (уважает системный масштаб шрифта), и px-версию, а формулу показывает целиком, чтобы можно было проверить руками.
Частые вопросы
Сколько px в 1 rem?
Столько, сколько стоит в font-size корневого элемента html. По умолчанию во всех браузерах 16px, значит 1rem = 16px, 1.5rem = 24px, 0.875rem = 14px. Если проект переопределяет базу, укажите её в настройках конвертера.
Чем rem отличается от em?
rem считается от корня и одинаков во всём документе; em — от размера родителя и накапливается при вложенности: 1.2em внутри 1.2em даст 1.44 от базы. Для размеров шрифта и отступов обычно надёжнее rem, em удобен для компонентов, которые должны масштабироваться вместе со своим текстом.
Как перевести px в vw?
vw = px ÷ ширина вьюпорта × 100. Например, 24px при ширине 1440px = 1.6667vw, а при 360px — уже 6.6667vw. Поэтому чистые vw для текста опасны: на узком экране шрифт схлопывается, на широком раздувается — используйте clamp().
Что такое clamp() и как его считать?
clamp(min, предпочтительное, max) — значение зажимается между минимумом и максимумом, а между ними растёт по формуле с vw. Генератор ниже считает коэффициенты по двум точкам (размер при мин. и макс. ширине) и отдаёт готовую строку.
Почему pt в конвертере не совпадает с Word?
Совпадает: в CSS 1pt = 1/72 дюйма и 1px = 1/96 дюйма, поэтому 12pt = 16px, 9pt = 12px. Разница возникает только из-за масштаба страницы в текстовом редакторе или DPI экрана — CSS-пиксель от них не зависит.
