Что такое Конвертер типографских единиц?
Конвертер типографических единиц переводит между пикселями (px), em, rem, пунктами (pt), процентами (%) и единицами области просмотра (vw, vh). Задайте базовый размер шрифта и размер области просмотра, затем введите значение в любое поле, чтобы увидеть обновление всех остальных единиц одновременно.
Конверсии следуют стандарту CSS: 1pt = 96/72 px, em и rem умножают на базовый размер шрифта, проценты считают базу за 100%, а vw и vh — это доли ширины и высоты области просмотра. Меняете любое поле — остальные шесть пересчитываются на лету. Базовый размер шрифта по умолчанию 16px (распространённое корневое значение), но его можно поменять на 14, 18 или любой root, который использует ваша дизайн-система, а область просмотра по умолчанию 1920×1080, чтобы vw и vh оставались точными.
Как использовать
- Шаг 1 — Задайте базовый размер шрифта в пикселях (по умолчанию 16px), который определяет расчёт относительных единиц em, rem и %.
- Шаг 2 — Введите числовое значение в любое из семи полей (px, em, rem, pt, %, vw или vh), чтобы мгновенно увидеть пересчёт во все остальные единицы.
- Шаг 3 — Скопируйте любое сконвертированное значение для использования в CSS, дизайн-спецификациях или печатных макетах.
Когда использовать
- Перевод pt-спецификаций от типографа в CSS-пиксели, которые реально применяет таблица стилей.
- Аудит дизайн-системы: правда ли заголовок 1.25rem даёт ожидаемые 20px при выбранном root.
- Выбор корректного значения em или % внутри родителя, который уже меняет наследуемый размер шрифта.
Результат
Дизайнер передаёт вам спецификацию в пунктах (основной текст 14pt). Введите 14 в поле pt при базе 16px и мгновенно получите 18.67px, 1.167em, 1.167rem и 116.7% — готовые значения для вашей таблицы стилей.
Частые вопросы
- Почему 1pt превращается в 1.333px, а не в 1px?
- CSS определяет 1pt как ровно 1/72 дюйма, а 1in как 96px, значит 1pt = 96/72 = 1.333px. Этой формулой пользуется каждый браузер. Размеры в pt на экране смотрятся больше, чем подсказывает цифра, именно из-за множителя 4/3.
- В чём разница между em и rem?
- rem всегда ссылается на размер шрифта корня (элемента <html>). em ссылается на размер шрифта ближайшего родителя. Поэтому 2em внутри родителя 20px — это 40px, а 2rem — всегда 2 × root независимо от вложенного родителя.
- Как настройка базового размера шрифта влияет на конверсии?
- Она меняет, сколько px в 1rem и 1em. По умолчанию 16px совпадает с большинством браузеров, поэтому 1rem = 16px. Если ваш root 18px, то 1rem = 18px, а заголовок 1.25rem превращается в 22.5px вместо 20px. Конверсия pt не меняется, так как pt — абсолютная единица.
- Что использовать в стилях: px, rem или em?
- rem — для размеров шрифта (пользователь может масштабировать через зум браузера или настройки доступности), px — для рамок и мелких отступов, где важна точность, em — для отступов относительно текущего размера шрифта (например, внутренний padding кнопки).
- Почему процент не равен 100%, когда px равен базе?
- На самом деле равен. Если px равен вашей базе (например, 16 при базе 16), поле % показывает 100. Если видите другое число, px не точно равен базе, возможно из-за округления в другом поле или потому что вы поменяли базу после ввода px.
Похожие инструменты
Конвертер единиц времени
Мгновенное преобразование единиц времени
Конвертер временных меток
Перевод Unix-временных меток в даты
Конвертер крутящего момента
Перевод между единицами крутящего момента
Конвертер углов
Переводите градусы, радианы, грады, обороты, угловые минуты, угловые секунды и DMS
Конвертер площади
Мгновенная конвертация площади
Конвертер размеров одежды
Перевод размеров одежды между US, UK, EU, AU, JP и CN — по бирке или по обхватам тела, с Францией, Италией и Кореей по запросу