Конвертер PT в PX

Конвертер pt в px переводит пункты в пиксели и пиксели обратно в пункты — для работы с экраном и печатью. Большинство конвертеров дают одно число, основанное на фиксированном соотношении CSS 1pt = 1.3333px. Этот ответ верен в браузере, но почти везде больше не подходит, потому что пункт — физическая единица, а число пикселей в нём зависит от разрешения вывода. Этот инструмент показывает оба значения: значение CSS, которое действительно отобразит браузер, и значение в пикселях устройства при 72, 150, 300, 600 или любом пользовательском DPI, а также фактический физический размер в миллиметрах и дюймах на настоящей линейке.

Формула pt в px

Один пункт определяется как ровно одна семьдесят вторая дюйма. В одном дюйме содержится столько пикселей, сколько задаёт выходное разрешение. Если объединить эти два факта, формула получается такой:

В вебе разрешение не является переменной. Спецификация CSS по определению фиксирует 1in = 96px, поэтому браузер всегда использует 96, и формула сводится к постоянному коэффициенту:

Именно поэтому 12pt — это 16px в любом браузере и на любом устройстве, будь то панель ноутбука 1× или экран телефона 3×. Пиксель CSS — эталонная единица, а не аппаратный пиксель.

Один дюйм — три названия

Проще всего не путать единицы, помня, что все они описывают одно и то же физическое расстояние. Каждая полоса ниже имеет ширину ровно один дюйм:

Таблица преобразования pt в px

Колонка для веба нужна для CSS. Колонка 300 DPI нужна при экспорте PDF в растровое изображение, подготовке файла к печати или задании размера текста в растровом изображении, которое будет напечатано.

Почему один и тот же размер в пунктах даёт разное число пикселей

Это единственное, что чаще всего сбивает с толку, поэтому стоит сказать прямо. Физический размер никогда не меняется: 12pt — это всегда одна шестая дюйма. Меняется только то, насколько подробно вы дискретизируете этот дюйм.

• 72 DPI — историческое разрешение экрана Macintosh, выбранное именно так, чтобы 1pt = 1px. Оно всё ещё является стандартом в некоторых старых конвейерах обработки изображений, поэтому текст 12pt иногда экспортируется с разочаровывающими 12 пикселями.
• 96 DPI — стандарт Windows и эталонное разрешение, относительно которого определён CSS. Это ответ для веба и значение, которое использует браузер.
• 150 DPI — качество черновой печати или широкоформатные материалы, которые должны читаться на расстоянии.
• 300 DPI — стандарт коммерческой печати. Подпись 12pt в экспорте 300 DPI требует высоты 50 пикселей, а не 16.
• 600 DPI — тонкая штриховая графика, печать высокого качества и лазерный вывод, где важны тонкие линии.

Если вы когда-либо экспортировали иллюстрацию «в правильном размере», но текст получался мягким и пикселизированным, почти всегда причина именно в этом соотношении: макет был измерен в пунктах, а растр создан при 72 или 96 DPI вместо 300.

Что на самом деле измеряет размер в пунктах

Шрифт 12pt — это не 12 пунктов видимой буквы. Размер в пунктах описывает em-квадрат — невидимую проектную сетку, на которой нарисован шрифт. То, какую часть этого квадрата занимают буквы, полностью зависит от дизайнера шрифта, поэтому два шрифта одного размера в пунктах могут выглядеть очень по-разному.

Использовать ли pt или px в CSS?

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

Там, где pt действительно уместен, — таблица стилей печати, потому что вывод действительно измеряется в дюймах:

@media print {
  body { font-size: 11pt; line-height: 1.45; }
  h1   { font-size: 24pt; }
  h2   { font-size: 18pt; }
  .no-print { display: none; }
}

При создании задания на печать браузеры сопоставляют эти пункты с реальным размером бумаги, поэтому основной текст 11pt действительно получается на странице размером 11pt — того же размера, который создал бы текстовый редактор.

Преобразование документа Word или InDesign для веба

1. Возьмите размеры в пунктах прямо из таблицы стилей документа — обычно 11pt для основного текста, 16pt для подзаголовков и 24pt для заголовков.
2. Вставьте их все сразу в поле значений через запятые, оставив разрешение равным 96.
3. Считайте значения из колонки CSS в пикселях. 11pt превращается в 14.67px, 16pt — в 21.33px, 24pt — в 32px.
4. Перед публикацией округлите значения до аккуратной шкалы. Печатная типографика допускает необычные дроби, а веб-шкалы лучше читаются с целыми или половинными пикселями, поэтому 14.67px обычно превращается в 15px или 16px.
5. Преобразуйте итоговые значения в пикселях в rem, если ваша дизайн-система использует относительные единицы.

Связанные абсолютные единицы CSS

Пункты входят в небольшое семейство абсолютных единиц, которые CSS определяет относительно того же дюйма в 96 пикселей. Знание всего семейства делает преобразования простыми:

• 1in = 96px = 72pt = 6pc = 25.4mm
• 1pc (пика) = 12pt = 16px
• 1cm = 37.795px ≈ 28.35pt
• 1mm = 3.7795px ≈ 2.835pt
• 1Q (четверть миллиметра) = 0.945px

Как пользоваться этим конвертером

1. Выберите направление: pt → px или px → pt.
2. Введите значения: одно число или целую типографическую шкалу, разделённую запятыми или пробелами (до 20 значений за раз). Дополнительные единицы, например 12pt, принимаются и игнорируются.
3. Задайте выходное разрешение: оставьте 96 DPI для CSS и веба или выберите кнопку 72, 150, 300 или 600 DPI.
4. Нажмите «Преобразовать»: изучите результат, сравнение DPI, предпросмотр текста в реальном размере, миллиметровую линейку и справочную шкалу.
5. Скопируйте CSS: одна кнопка копирует все объявления font-size, сохраняя исходное значение в пунктах в комментарии.

Часто задаваемые вопросы

Как преобразовать pt в px?

Умножьте значение в пунктах на выходное разрешение и разделите на 72, поскольку один пункт равен одной семьдесят второй дюйма. В вебе разрешение фиксировано на 96 DPI, поэтому px = pt × 1.3333. Например, 12pt — это 16px.

Сколько пикселей в 12pt?

В CSS и любом браузере 12pt — это ровно 16px. В печатном или графическом файле с разрешением 300 DPI тот же текст 12pt имеет высоту 50 пикселей, а при 600 DPI — 100 пикселей, потому что число пикселей меняется вместе с разрешением, а физический размер остаётся прежним.

Всегда ли 1pt равен 1.3333px?

В CSS он всегда равен 1.3333px, потому что спецификация CSS фиксирует один дюйм ровно как 96 пикселей. Для растрового вывода это неверно: при 300 DPI один пункт равен 4.1667 пикселя устройства, а при 72 DPI один пункт — ровно один пиксель.

В чём разница между pt и px?

Пункт — это физическая типографическая единица, равная одной семьдесят второй дюйма, используемая в печати, текстовых редакторах и настольной издательской системе. Пиксель — единица отображения. В CSS пиксель также привязан к физическому эталону — одной девяносто шестой дюйма, поэтому в вебе эти единицы преобразуются по фиксированному соотношению, а в файлах изображений — нет.

Использовать ли pt или px в CSS?

Используйте px или rem для экранных стилей, а pt оставьте для таблиц стилей печати. Пункты — абсолютная физическая единица, поэтому текст, заданный в pt, игнорирует предпочтительный размер шрифта в браузере посетителя. В блоке @media print pt является естественной единицей, поскольку вывод действительно измеряется в дюймах.

Какое DPI использовать для печати?

300 DPI — стандарт коммерческой печати и вывода фотографического качества, 150 DPI подходит для черновиков и широкоформатных материалов, которые читают на расстоянии, а 600 DPI используют для тонкой штриховой графики и печати высокого качества. Укажите в поле разрешения значение, которого ожидает ваш принтер или диалог экспорта.

Почему текст 12pt на экране не имеет высоту 12 пунктов?

Размер в пунктах описывает em-квадрат шрифта — проектную сетку, на которой нарисованы буквы, — а не высоту отдельного символа. Высота прописных обычно составляет около 70% размера em, а x-высота строчных — около 50%, поэтому прописные 12pt имеют высоту примерно 8.4pt.

Меняет ли коэффициент плотности пикселей устройства преобразование pt в px?

Нет. На дисплее 2× или 3× браузер по-прежнему сообщает 12pt как 16 пикселей CSS, а затем отображает эти 16 пикселей CSS с помощью 32 или 48 аппаратных пикселей. Пиксель CSS — эталонная единица, поэтому числа в таблице стилей не меняются — дополнительные аппаратные пиксели лишь делают тот же размер более чётким.

Дополнительные ресурсы

• Единицы длины CSS — MDN
• Абсолютные длины — значения CSS W3C