Конвертер CSS-единиц
В макете 24 px, в коде хочется rem: при базовом размере 16 px это 1,5rem, а если пользователь увеличил шрифт в настройках браузера до 20 px — уже 30 px на экране, ради чего rem и нужен.
Как пользоваться
Конвертер переводит значение между px, rem, em, pt, процентами, vw и vh при вашем базовом размере, размере шрифта родителя и ширине вьюпорта, показывает таблицу типовых размеров и собирает формулу clamp() для плавного шрифта: минимальный и максимальный размер, ширины экранов — и готовая строка для font-size. Проверено 04.09.2026.
- Например, 24 px или 1,5 rem. Базовый размер шрифта html — 16 px по умолчанию, размер родителя нужен для em и процентов.
- Ширина и высота экрана в px нужны только для vw и vh; по умолчанию 1440 × 900.
- Справа значение во всех единицах, ниже — типовые размеры от 10 до 96 px в rem и em.
- Минимальный и максимальный размер шрифта и ширины экрана, между которыми он растёт, — формула копируется в CSS как есть.
Частые вопросы
Чем rem отличается от em
rem считается от размера шрифта корневого элемента html, обычно 16 px; em — от размера шрифта родителя, поэтому вложенные em умножаются. Для размеров шрифта и отступов берут rem, для внутренних отступов кнопок и иконок, которые должны расти вместе со своим текстом, — em.
Почему нельзя задать html { font-size: 62.5% }
Приём делает 1rem = 10 px для удобного счёта, но ломает сайты, где пользователь поставил свой размер шрифта: браузерные 20 px превратятся в 12,5. Проще считать в конвертере и оставить 100 %.
Как переводятся pt, in, cm
CSS фиксирует 1in = 96px, 1pt = 1/72 дюйма = 1,333px, 1pc = 12pt = 16px, 1cm = 37,8px, 1mm = 3,78px. На экране это условные единицы, точные они только при печати.
Как работает clamp() для плавного шрифта
clamp(min, предпочтительное, max): между двумя ширинами экрана шрифт растёт линейно. Предпочтительное значение — прямая через две точки: наклон = (max − min) ÷ (ширина max − ширина min), в vw это наклон × 100, свободный член = min − наклон × ширина min. Калькулятор пишет его в rem + vw, чтобы масштабирование шрифта пользователем сохранялось.
Что с vw на мобильных и полосой прокрутки
100vw — ширина окна вместе с вертикальной полосой прокрутки, поэтому на десктопе блок в 100vw шире видимой области на 15–17 px. На мобильных высота 100vh скачет вместе с адресной строкой; для неё есть dvh, svh и lvh.
Данные куда-то отправляются
Нет, всё считается в браузере.
Похожие инструменты
Тень блока со слоями: смещение, размытие, растяжение, цвет и прозрачность. Внутренняя тень, готовые пресеты и разбор чужого значения.
ОткрытьГенератор clip-pathОбрезка блока по фигуре: многоугольник с перетаскиванием точек, круг, эллипс и рамка. Скосы, шестиугольники и звёзды из пресетов.
ОткрытьГенератор FlexboxВизуальный конструктор flex-раскладки: направление, перенос, выравнивание по обеим осям. Отдельно настраиваются grow, shrink, basis и order каждого элемента.
ОткрытьГенератор CSS GridКолонки и строки в fr, px и auto, объединение ячеек мышью и именованные области. Выдаёт готовый grid-template с областями.
ОткрытьГенератор CSS-градиентовЛинейный, радиальный и конический градиент с живым предпросмотром. Любое число цветовых точек, угол и позиции, разбор чужого кода обратно в точки.
ОткрытьГенератор border-radiusСкругление каждого угла отдельно, эллиптические радиусы через слэш, проценты и пиксели. Собирает самую короткую запись из возможных.
ОткрытьЕщё инструменты для SEO и маркетинга
Кластеризатор запросов, генераторы sitemap и robots.txt, минус-слова, разметка Schema.org и калькуляторы — в разделе инструментов.