Интерактивная таблица соотношений px, pt, em %

Онлайн калькулятор переводит размеры шрифта между px, pt, em и %. Калькулятор использует стандартное браузерное соотношение 16 px = 12 pt = 1 em = 100% и показывает не только целевой перевод, но и полную таблицу эквивалентов для всех четырех единиц.

Pixels (px) - фиксированные единицы для экранов. Points (pt) пришли из печатной типографики, где 1 pt = 1/72 дюйма. Обе единицы удобны для точного задания размера, но хуже масштабируются при изменении пользовательских настроек отображения.

Ems (em) - относительная единица, равная текущему размеру шрифта. Если базовый размер равен 12 pt, то 1 em = 12 pt, 2 em = 24 pt, 0.5 em = 6 pt. Проценты (%) работают похоже: 100% = 1 em, поэтому такие единицы удобнее для адаптивной типографики и режимов accessibility.

Для перевода калькулятор сначала приводит введенное значение к опорной величине \[ S_{pt} = S \cdot k_u \], а затем пересчитывает его в целевую единицу по формуле \[ S_{to} = \dfrac{S_{pt}}{k_t} \].

Калькулятор перевода px, pt, em и процентов использует стандартное браузерное допущение 16 px = 12 pt = 1 em = 100%. Это означает, что любое введенное значение сначала приводится к общей базе в pt, а затем пересчитывается во все остальные единицы. Такой подход повторяет логику старой интерактивной таблицы, но делает результат нагляднее и удобнее для повторных расчетов.

Математически метод сводится к двум шагам: сначала находится базовое значение \[ S_{pt} = S \cdot k_u \], затем итог для нужной единицы \[ S_{to} = \dfrac{S_{pt}}{k_t} \]. Для стандартной связки браузера используются коэффициенты \[ 1\,em = 12\,pt \], \[ 1\,em = 16\,px \] и \[ 1\,em = 100\,\% \].

Px и pt удобны там, где нужен предсказуемый фиксированный размер в макете, а em и % чаще применяются в адаптивной веб-типографике. Калькулятор полезен при переносе стилей из печатного макета в CSS, при пересчете старых таблиц размеров шрифта и при проверке соответствия между абсолютными и относительными единицами.

Интересный факт: историческая связка 16 px = 12 pt не является обязательным законом CSS, а выросла из типичного браузерного размера текста по умолчанию. Поэтому на практике это удобный ориентир для разработки интерфейсов, но реальный результат всегда зависит от пользовательских настроек браузера, системы и масштабирования страницы.