Конвертер типографских
единиц
История типографских единиц
Типографские единицы измерения прошли долгий путь от ручного набора до цифровой вёрстки. Понимание их происхождения помогает правильно выбирать единицы для разных задач.
Пункт (point)
Пункт как единица измерения появился в XVIII веке благодаря французскому типографу Пьеру-Симону Фурнье. Позже Фирмен Дидо стандартизировал его размер. В 1886 году Американская ассоциация типографов приняла пункт равным 1/72 дюйма, и этот стандарт используется в PostScript и CSS по сей день.
Em и типометрия
Единица em изначально соответствовала ширине заглавной буквы M в текущем шрифте. В цифровой типографике em равен текущему размеру шрифта: при font-size 16px один em равен 16px. Единица rem (root em) всегда привязана к корневому элементу, что делает её предсказуемой для адаптивного дизайна.
Цицеро и дидо-пункт
Цицеро (cicero) — единица, используемая в континентальной Европе, особенно в немецкой и французской полиграфии. Одно цицеро равно 12 дидо-пунктам (примерно 4.512 мм). Дидо-пункт немного крупнее PostScript-пункта: 0.376 мм против 0.353 мм. Эту систему до сих пор можно встретить в европейских типографиях.
Возможности конвертера
Всё необходимое для работы с типографскими единицами в одном инструменте.
Конвертация any-to-any
Введите значение в любое поле — все остальные единицы обновятся мгновенно. Поддерживаются пункты, миллиметры, пиксели, em, rem, дюймы, пики и цицеро.
Типографская шкала
Генерируйте гармоничную систему размеров шрифтов на основе музыкальных интервалов: от малой секунды (1.067) до золотого сечения (1.618). Готовый CSS-код одним кликом.
Настраиваемый PPI
Точная конвертация пикселей с учётом реального разрешения экрана. Стандартный 96 PPI, Retina 144/192 PPI или любое пользовательское значение.
Базовый размер шрифта
Настройте базовый размер для вычисления em и rem. Стандартные 16px браузера или любое значение из вашего проекта.
Полиграфические единицы
Поддержка пики (pica) и цицеро — единиц, используемых в профессиональной полиграфии и издательском деле. Точный пересчёт по международным стандартам.
Визуальный предпросмотр
Мгновенный предпросмотр текста в заданном размере шрифта. Оцените результат прямо в браузере, не переключаясь в графический редактор или код.
Справочник единиц/ полное руководство
Каждая единица имеет свою область применения. Пункты — стандарт полиграфии, пиксели — экранного дизайна, em/rem — адаптивной веб-вёрстки. Выбор зависит от носителя и задачи.
Пункт (pt) — 1/72 дюйма = 0.3528 мм
Основная единица в полиграфии и настольных издательских системах. Используется в Word, InDesign, Illustrator для задания размеров шрифтов. PostScript-пункт (1/72 дюйма) — международный стандарт с 1985 года.
font-size: 12pt; /* классический размер основного текста в печати */Пиксель (px) — 1/96 дюйма (CSS reference pixel)
В CSS пиксель — это не физическая точка экрана, а абстрактная единица (reference pixel), равная 1/96 дюйма. На экранах Retina (2x) один CSS-пиксель занимает 4 физических пикселя. Для веб-дизайна px обеспечивает предсказуемый результат.
font-size: 16px; /* стандартный размер текста в браузерах */em — относительно родительского элемента
1em равен текущему font-size родительского элемента. Каскадируется: если родитель 20px и ребёнок 1.5em, то ребёнок будет 30px. Удобен для компонентного дизайна, где размеры должны масштабироваться вместе.
padding: 1.5em; /* отступ пропорционален размеру текста */rem — относительно корневого элемента
1rem всегда равен font-size элемента html (по умолчанию 16px). В отличие от em, не каскадируется: 1.5rem всегда будет одинаковым размером в любом месте документа. Идеален для создания консистентной дизайн-системы.
font-size: 1.125rem; /* 18px при базе 16px — для основного текста */Пика (pc) — 12 pt = 1/6 дюйма = 4.233 мм
Пика (pica) используется в англо-американской полиграфии для измерения длин строк, полей и колонок. Одна пика равна 12 пунктам. В газетной вёрстке ширина колонки часто задаётся именно в пиках.
/* ширина колонки: 21 пика (252pt = 89мм) — типично для газет */Цицеро — 12 дидо-пунктов = 4.512 мм
Цицеро — европейский аналог пики. Используется во французской, немецкой, итальянской полиграфии. Базируется на дидо-пункте (0.376 мм), который крупнее PostScript-пункта. Название происходит от издания писем Цицерона XV века.
/* 1 цицеро = 12 дидо-пт = 4.512 мм (> 1 пики = 4.233 мм) */Типографские шкалы
Типографская шкала (type scale) — это набор размеров шрифта, построенный по математической формуле. Каждый следующий размер получается умножением базового на определённый коэффициент, создавая визуальную гармонию.
Малая терция (Minor Third)
Коэффициент 1.2Компактная шкала с небольшим контрастом между уровнями. Идеальна для мобильных интерфейсов, где пространство ограничено. Размеры: 16, 19.2, 23.04, 27.65px. Разница между уровнями заметна, но не создаёт чрезмерного контраста.
Большая терция (Major Third)
Коэффициент 1.25Универсальная шкала, которую рекомендуют для большинства проектов. Используется в Material Design и многих дизайн-системах. Размеры: 16, 20, 25, 31.25px. Хороший баланс между экономией пространства и выразительностью заголовков.
Чистая квинта (Perfect Fifth)
Коэффициент 1.5Выразительная шкала с большим контрастом. Подходит для десктопных сайтов с крупными заголовками и длинными текстами. Размеры: 16, 24, 36, 54px. Создаёт чёткую визуальную иерархию, но требует достаточного экранного пространства.
Золотое сечение (Golden Ratio)
Коэффициент 1.618Максимально контрастная шкала, основанная на пропорции золотого сечения. Размеры: 16, 25.9, 41.9, 67.8px. Используется для лендингов, презентаций и плакатной типографики. Требует больших экранов и редко подходит для мобильных.
Советы по выбору единиц
Каждая единица измерения имеет свою область применения. Выбирайте правильную единицу в зависимости от контекста.
1Для веба используйте rem
Задавайте font-size в rem для адаптивности: при изменении базового размера (html) все шрифты масштабируются пропорционально. Это основа современного адаптивного дизайна. Отступы (margin, padding) тоже хорошо задавать в rem для консистентности.
2Для печати используйте pt
В полиграфии пункты — стандарт де-факто. InDesign, Word, Illustrator работают с пунктами. Минимальный читаемый размер основного текста: 9-10pt для книг, 7-8pt для сносок. Заголовки газет — от 24pt до 72pt.
3Избегайте px для font-size
Пиксели не масштабируются при изменении настроек доступности браузера. Пользователи со слабым зрением увеличивают базовый размер шрифта, но px игнорирует эту настройку. Используйте rem или em для доступности.
4em — для компонентов, rem — для системы
Используйте em внутри изолированных компонентов, где размеры должны масштабироваться относительно друг друга (кнопки, бейджи). Для глобальной системы размеров используйте rem — он не каскадируется и предсказуем.
5Учитывайте PPI устройства
На экранах Retina (192 PPI) физический размер CSS-пикселя вдвое меньше, чем на стандартном мониторе (96 PPI). При подготовке макетов для печати конвертируйте пиксели в pt или мм с учётом реального PPI дисплея.
6Типографская шкала для порядка
Не подбирайте размеры шрифтов произвольно. Используйте типографскую шкалу: выберите базовый размер и коэффициент, получите гармоничный набор. Зафиксируйте его в CSS Custom Properties и используйте во всём проекте.
Как пользоваться конвертером
Простая инструкция для мгновенной конвертации типографских единиц.
Настройте параметры
Укажите базовый размер шрифта (по умолчанию 16px) и PPI экрана (по умолчанию 96). Это влияет на конвертацию em, rem и px.
Введите значение
Введите число в любое поле: пункты, миллиметры, пиксели, em, rem, дюймы, пики или цицеро. Все остальные поля обновятся автоматически.
Скопируйте результат
Нажмите иконку копирования рядом с нужным значением. Оно будет скопировано в буфер обмена. Или используйте генератор шкалы для набора размеров.
Экспортируйте CSS
В генераторе шкалы нажмите «Копировать CSS» — получите готовые CSS Custom Properties с размерами в rem и комментариями в px.
Часто задаваемые вопросы
Был ли этот калькулятор полезен?
Инструмент справочный — не заменяет эксперта
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Профессиональные решения — медицинские, финансовые, инженерные — должны приниматься только после консультации с квалифицированным специалистом. Не используйте автоматический расчёт как единственное основание для важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут ответственности за прямой или косвенный ущерб, возникший из-за использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию результатов.
Похожие калькуляторы
Калькулятор CSS единиц (PX, REM, EM, %)
Конвертер пикселей в rem/em и генератор calc(). Удобный инструмент для верстки и адаптивного дизайна.
/css-unit-converterКалькулятор типографики: Type Scale, межстрочный, Fluid Typography
Комплексный типографический калькулятор. Модульная шкала (Type Scale), расчёт межстрочного интервала (line-height), оптимальная длина строки, вертикальный ритм (baseline grid), подбор пар шрифтов и Fluid Typography с CSS clamp().
/typography-calculatorКонвертер цветовых пространств
Конвертация цветов между CMYK, RGB, HEX, HSL, HSV с визуальным предпросмотром. Цветовые гармонии и контрастность WCAG.
/konverter-cvetov-cmyk-rgb-hexКалькулятор DPI и размера печати
Пересчёт пикселей в размер печати при заданном DPI. Форматы A4-A0, фотопечать, полиграфия.
/kalkulyator-dpi-pechatГенератор Cubic Bezier (CSS transition)
Интерактивный генератор кривых Безье для CSS анимаций. Визуальная настройка плавности переходов, пресеты (ease, linear) и копирование кода.
/cubic-bezierКалькулятор теории цвета: гармония, конвертер, палитры, смешивание, дальтонизм
Комплексный инструмент для работы с цветом: цветовые гармонии (комплементарная, аналогичная, триадная, тетрадная), конвертер HEX/RGB/HSL/HSV/CMYK, генератор палитр (монохроматическая, shades, tints, tones), смешивание цветов (аддитивное/субтрактивное), симулятор дальтонизма и анализ цветовой температуры.
/color-theory-calculatorКалькулятор пропорций золотого сечения
Расчёт пропорций по золотому сечению (φ = 1.618). Визуализация золотого прямоугольника и спирали Фибоначчи.
/zolotoe-sechenieКалькулятор градиентов и интерполяции цветов
Генератор плавных переходов между цветами. Создайте CSS градиент онлайн, получите коды цветов (HEX/RGB) и настройте количество шагов.
/color-gradientКалькулятор контрастности (WCAG), шрифтов и сетки
Инструменты UI/UX дизайнера. Проверка контрастности цветов (WCAG AA/AAA), расчет модульной сетки и подбор типографической шкалы.
/contrast-gridКалькулятор Responsive Margin/Padding (Clamp generator)
Генератор CSS функции clamp() для адаптивных отступов и шрифтов. Создайте отзывчивый дизайн (fluid spacing) от мобильных до десктопа онлайн.
/responsive-helperКалькулятор PPI и DPI (плотность пикселей)
Рассчитайте PPI экрана, размер пикселя и физические размеры монитора/телефона. Конвертер пикселей в сантиметры.
/ppi-calculatorКалькулятор UX-метрик: SUS, NPS, HEART, A/B-тест, эвристики Нильсена
Комплексный калькулятор UX-метрик: System Usability Scale (SUS), Net Promoter Score (NPS), HEART framework Google, статистическая значимость A/B-тестов, эвристическая оценка Нильсена (10 эвристик), метрики выполнения задач (Task Success Rate, Efficiency).
/ux-metrics-calculatorКалькулятор соотношения сторон
Расчёт и пересчёт соотношения сторон изображения/видео. Определение ratio, пересчёт размеров, кроп.
/sootnoshenie-storonГенератор цветовых палитр
Подбор гармоничных цветовых сочетаний: комплементарные, аналогичные, триадные. Экспорт в CSS, Tailwind, SCSS.
/generator-cvetovyh-palitrКалькулятор размера баннера
Размеры баннеров для VK, Telegram, YouTube, Яндекс Директ, Google Ads. Все форматы с рекомендациями по файлу.
/razmer-bannera