ПаветтаКонвертер CSS-единиц
В макете 24 px, в коде хочется rem: при базовом размере 16 px это 1,5rem, а если пользователь увеличил шрифт в настройках браузера до 20 px — уже 30 px на экране, ради чего rem и нужен.
Почему перевод требует контекста
В макете двадцать четыре пикселя, в коде хочется rem: при базовом размере шестнадцать это полтора rem. Инструмент переводит между пикселями, rem, em, процентами и единицами окна, спрашивая нужный контекст — размер корневого шрифта, шрифта родителя и родительского блока.
Смысл относительных единиц в том, что вёрстка подстраивается. Если человек увеличил шрифт в настройках браузера, размеры в rem вырастут вместе с ним, а размеры в пикселях останутся прежними, и текст полезет из кнопок. Поэтому кегли и отступы обычно задают относительно, а тонкие детали вроде рамок — в пикселях.
Единицы окна vw и vh считаются от его ширины и высоты и удобны для крупных блоков. На телефонах у них есть подвох: появление и исчезновение адресной строки меняет высоту окна, и блок в 100vh дёргается при прокрутке. Для таких случаев появились единицы svh, lvh и dvh.
| Из чего | Во что | Условие |
|---|---|---|
| 24px | 1,5rem | База 16px |
| 14px | 0,875rem | База 16px |
| 18px | 1,125em | Родитель 16px |
| 50% | половина родителя | Ширина блока |
Условный пиксель и квадрат кегля
Пиксель в вебе давно перестал быть физической точкой экрана. С появлением экранов высокой плотности один CSS-пиксель стал условной единицей, которой на устройстве соответствуют два, три и больше настоящих. Спецификация привязывает его к углу зрения, оторвав от физической матрицы.
Единица em пришла из типографского набора: так называли квадрат со стороной в кегль шрифта, примерно ширину прописной M. Им наборщик отбивал абзацный отступ, и размер отступа менялся вместе с кеглем автоматически.
Единицу rem добавили в CSS3 именно потому, что em наследуется и умножается: вложенные элементы с относительным кеглем уменьшаются на каждом уровне, и к третьему тексту становится нечитаемым. Отсчёт от корня снял эту проблему, оставив em для случаев, где масштабирование внутри компонента нужно специально. Отдельно стандарт описывает единицы, привязанные к самому шрифту: ch равен ширине нуля, ex — высоте строчной x. Ими удобно ограничивать длину строки текста в знаках.
Какую базу держать и как строить шкалу
Укажите базовый размер шрифта и переводите в обе стороны. Стандартная база в браузерах — шестнадцать пикселей, и менять её не стоит: приём с базой в десять пикселей ради удобного счёта ломает масштабирование текста у людей, которые увеличили шрифт в настройках.
Держите шкалу отступов. Набор из шести-восьми значений, вынесенный в переменные, избавляет от вопроса «двенадцать здесь или четырнадцать» и делает вёрстку предсказуемой. То же с кеглями: две-три ступени крупнее базовой и одна мельче обычно закрывают всё.
Для плавного изменения размера пригодится функция clamp: она связывает минимум, желаемое значение и максимум, и шрифт растёт вместе с окном, оставаясь в разумных границах. Собрать раскладку в относительных величинах поможет генератор Grid.
Проверьте вёрстку при увеличенном шрифте. Браузер позволяет поднять базовый размер до двадцати четырёх пикселей, и на этом значении сразу видно, где в макете жёстко зашиты пиксели: текст вылезает из кнопок и наезжает на соседние блоки.
Отдельно проверьте поля ввода. На мобильных системах браузер увеличивает страницу при фокусе в поле, если его шрифт меньше шестнадцати пикселей: страница дёргается, и человек теряет место. Шестнадцать пикселей или один rem в полях снимают этот эффект.
| База в браузерах | 16px |
| 1rem при базе 16 | 16px |
| em | от шрифта родителя |
| rem | от шрифта корня |
| vw | 1 % ширины окна |
| dvh | учитывает адресную строку |
| Происхождение em | квадрат кегля |
| Плавный размер | функция clamp |
Как пользоваться
Конвертер переводит значение между 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.
Спросите нейросети об инструменте
Больше возможностей: Нейросеть для кода, написать, найти ошибку, объяснить.
Похожие инструменты
Колонки и строки в fr, px и auto, объединение ячеек мышью и именованные области. Выдаёт готовый grid-template с областями.
ОткрытьГенератор text-shadowТень текста со слоями и готовыми эффектами: обводка, неон, объём, гравировка. Предпросмотр на своём фоне и шрифте.
ОткрытьГенератор FlexboxВизуальный конструктор flex-раскладки: направление, перенос, выравнивание по обеим осям. Отдельно настраиваются grow, shrink, basis и order каждого элемента.
ОткрытьГенератор CSS-анимацииБольше двадцати эффектов появления, внимания и движения. Выдаёт и правило keyframes, и свойство animation целиком.
ОткрытьГенератор CSS filterРазмытие, яркость, контраст, насыщенность, оттенок, сепия и тень по контуру. Предпросмотр на своей картинке, файл остаётся в браузере.
ОткрытьГенератор clip-pathОбрезка блока по фигуре: многоугольник с перетаскиванием точек, круг, эллипс и рамка. Скосы, шестиугольники и звёзды из пресетов.
ОткрытьЕщё инструменты для кода и данных
Base64 и URL, форматтер и сравнение JSON, хеши, регулярные выражения, cron, подсети, UUID, QR-код и Unix-время — в разделе 42 инструмента.