Переведіть пункти (pt) у пікселі (px)

Зміст востаннє перевірено:

12 pt — це 16 px. В одному дюймі 72 пункти і 96 CSS-пікселів, тому кількість пунктів достатньо помножити на 4/3. Кегль 14 pt із Word на вебсторінці відповідає 18,67 px, а заголовок 18 pt — 24 px. Введіть пункти в перше поле, і пікселі з’являться поруч.

pt
px
в

Що таке пункт (pt) і піксель (px)?

Типографський пункт — одиниця вимірювання кегля, тобто розміру шрифту[1]. Українська Вікіпедія наводить дві його величини: пункт Дідо, що дорівнює 0,3759 мм, і пункт комп’ютерного набору, що дорівнює 1/72 дюйма, або 0,3528 мм[1]. Другий іноді називають «пойнт», щоб відрізнити від пункту Дідо, і саме ним програми верстки та дизайну рахують за замовчуванням[1]. CSS визначає пункт так само, як 1/72 дюйма[2].

Піксель — найдрібніша одиниця цифрового зображення в растровій графіці[3]. У CSS піксель водночас є одиницею довжини й дорівнює 1/96 дюйма[2]. В одному дюймі вміщується 72 пункти і 96 пікселів, тому та сама довжина в пікселях дає число, у 4/3 раза більше, ніж у пунктах.

Металеві літери, складені рядками й перев’язані шнурком
Металеві літери складено рядками й перев’язано шнурком. Літери відливають у дзеркальному відображенні, щоб на папері вони читалися правильно. У металевому наборі кегль означає висоту металевого тіла, на якому відлито літеру[4]. Тіло кеглем 12 пунктів Дідо має близько 4,51 мм, а 12 пунктів сучасних програм — 4,23 мм. Фото: Hannes Wolf, Unsplash.

Скільки пікселів у 12 пунктах?

12 пунктів — це 16 пікселів. Щоб отримати пікселі, помножте пункти на 96 і поділіть на 72, тобто помножте на 4/3. 18 пунктів — це 24 пікселі, а 72 пункти, рівно один дюйм, — 96 пікселів. На папері 12 пунктів займають 4,23 мм.

Таке співвідношення задає стандарт CSS: у ньому дюйм дорівнює 96 пікселям, а пункт — 1/72 дюйма[2]. Тому текст із font-size: 12pt і текст із font-size: 16px у будь-якому браузері мають однаковий розмір. 16 пікселів — поширений типовий розмір шрифту в браузерах[5]. Коли переносите кегль із документа Word на вебсторінку, спершу переведіть пункти в пікселі.

Записуючи результат у таблицю стилів, зважайте на десятковий знак. В українському записі дробову частину відокремлює кома, і 14 пунктів — це 18,67 пікселя. CSS приймає лише крапку[2], тому в таблиці стилів має стояти 18.67px. Кнопка «Копіювати результат» копіює число саме так: із крапкою і без одиниці.

Як перевести пункти в пікселі?

Формула: px = pt × 96 ÷ 72, тобто множення на 4/3. 9 пунктів — це 12 пікселів, 24 пункти — 32 пікселі, 36 пунктів — 48 пікселів. Кратні трьом значення дають ціле число пікселів, решта — дробове: 10 пунктів — це 13,33 пікселя, 11 пунктів — 14,67 пікселя.

Та сама формула працює для товщини ліній: 0,75 пункту — рівно один піксель, 1,5 пункту — два пікселі. Для зворотного розрахунку скористайтеся конвертером px у pt, де пікселі множаться на 0,75. Піку, що дорівнює 12 пунктам, переводить конвертер пік у px, а rem, який залежить від розміру шрифту в браузері, — конвертер rem у px.

Число 96 прийшло з Windows. Microsoft виходила з того, що екран стоїть приблизно на третину далі від очей, ніж аркуш паперу в руках, і вирішила повідомляти роздільну здатність екранів близько 72 PPI як 96 PPI[6]. Стандарт CSS теж визначає еталонний піксель як піксель екрана зі щільністю 96 dpi, на який дивляться з відстані витягнутої руки[2].

Німецький аркуш-зразок, на якому той самий шрифт набрано кеглями від 4 до 20 Punkte
На німецькому аркуші-зразку той самий шрифт набрано кеглями від 4 до 20 Punkte. У Німеччині стандартом став пункт Дідо близько 0,376 мм[4]. Якщо 12 Punkte на зразку — це пункти Дідо, кегль має близько 4,51 мм, тобто трохи більше, ніж 12 пунктів цього конвертера (4,23 мм). Фото: суспільне надбання.

Скільки пікселів у кожному кеглі?

У таблиці 30 кеглів від 6 до 96 пунктів: розмір у пікселях при 96 DPI і в міліметрах на папері. Виділено 12 пунктів; 18 пунктів, найменший кегль великого тексту за настановами WCAG[7]; і 72 пункти, рівно один дюйм.
КегльПікселі (96 DPI)Міліметри
6 pt8 px2,117 мм
7 pt9,33 px2,469 мм
8 pt10,67 px2,822 мм
9 pt12 px3,175 мм
10 pt13,33 px3,528 мм
10,5 pt14 px3,704 мм
11 pt14,67 px3,881 мм
12 pt16 px4,233 мм
13 pt17,33 px4,586 мм
14 pt18,67 px4,939 мм
15 pt20 px5,292 мм
16 pt21,33 px5,644 мм
18 pt24 px6,350 мм
20 pt26,67 px7,056 мм
21 pt28 px7,408 мм
22 pt29,33 px7,761 мм
24 pt32 px8,467 мм
26 pt34,67 px9,172 мм
28 pt37,33 px9,878 мм
30 pt40 px10,583 мм
32 pt42,67 px11,289 мм
34 pt45,33 px11,994 мм
36 pt48 px12,700 мм
40 pt53,33 px14,111 мм
44 pt58,67 px15,522 мм
48 pt64 px16,933 мм
54 pt72 px19,050 мм
60 pt80 px21,167 мм
72 pt96 px25,400 мм
96 pt128 px33,867 мм
Стовпець пікселів обчислено так само, як у конвертері, з точністю до двох знаків після коми. Міліметри обчислено за формулою 1 пункт = 25,4/72 мм.

Скільки пікселів у товщині ліній?

У програмах верстки товщину ліній і контурів теж задають у пунктах. Цей діапазон значно вужчий, ніж у кеглів, тому ми винесли його в окрему таблицю. Лінія 0,75 пункту — рівно один піксель, тобто те саме, що border: 1px у таблиці стилів.
Товщина лініїПікселі (96 DPI)Міліметри
0,25 pt0,33 px0,088 мм
0,5 pt0,67 px0,176 мм
0,75 pt1 px0,265 мм
1 pt1,33 px0,353 мм
1,5 pt2 px0,529 мм
2 pt2,67 px0,706 мм
3 pt4 px1,058 мм
4 pt5,33 px1,411 мм
5 pt6,67 px1,764 мм
6 pt8 px2,117 мм
8 pt10,67 px2,822 мм
10 pt13,33 px3,528 мм
12 pt16 px4,233 мм
На екрані лінії завтовшки 0,5 пункту і менше не досягають навіть одного пікселя. Стовпець пікселів показано з точністю до двох знаків після коми.

Пункт Дідо і пункт у Word — це одне й те саме?

Ні. Пункт Дідо запровадив 1770 року паризький друкар Франсуа-Амбруаз Дідо: за основу він узяв королівську стопу 32,48 см, і 1/72 її дюйма дала 0,3759 мм[1]. Word та інші програми рахують 1/72 англійського дюйма, тобто 0,3528 мм[1]. На 12 пунктах різниця становить 0,28 мм, а на екрані — близько одного пікселя. У 1930-х роках у Радянському Союзі намагалися замінити пункт Дідо метричним пунктом 0,375 мм, щоб 12 пунктів дорівнювали 4,5 мм, але реформа не вдалася[1].
Пункт1 пункт12 пунктів12 пунктів у пікселяхДе трапляється
Пункт DTP (PostScript)0,3528 мм4,233 мм16 pxWord, InDesign, PDF, CSS; пункт, яким рахує цей конвертер
Пункт Дідо0,3760 мм4,512 мм17,05 pxметалевий набір; 0,3759 мм в українській Вікіпедії
Пункт TeX0,3515 мм4,218 мм15,94 px«pt» у TeX і LaTeX
Українська Вікіпедія подає пункт Дідо як 0,3759 мм, англійська — як 0,375972 мм[4]; у таблиці це значення округлено до 0,3760 мм. У TeX і LaTeX «pt» означає 1/72,27 дюйма, а 1/72 дюйма позначають «bp»[4]. Конвертер рахує пунктом із першого рядка.

Які записи приймає поле пунктів цього конвертера?

Поле пунктів приймає й обчислює всі записи з цієї таблиці, тож виправляти значення перед вставленням не потрібно. Значення з Word чи таблиці стилів можна вводити з одиницею, з комою або з пробілом між тисячами. Значення в іншій одиниці, наприклад у пікселях, поле спершу переводить у пункти й пише під собою рядок на кшталт «Вставлене значення 16px у цьому полі дорівнює 12 pt.». Середній стовпець — результат, який обчислив сам конвертер.
Що ви вводите або вставляєтеРезультат конвертераЯк поле читає цей запис
1216 pxЯкщо ввести лише число, поле читає його як пункти.
10,514 pxЯк і в українському записі, кома відокремлює дробову частину; поле обчислює 10,5 пункту.
10.514 pxКрапку поле теж вважає десятковим знаком.
1 0001333,33 pxПробіл між тисячами, як в українському записі, поле пропускає й обчислює 1000 пунктів.
12 пт16 pxСкорочення «пт» кирилицею — одиниця поля, тому значення не змінюється.
14 пунктів18,67 pxСлово «пунктів» поле теж розпізнає й обчислює 14 пунктів.
10,5 пункту14 pxПісля дробового числа в українській мові стоїть «пункту», і поле читає цю форму.
12pt16 pxСкорочення з Word чи таблиці стилів — одиниця поля, значення не змінюється.
font-size: 16px;16 pxРядок із таблиці стилів записано в пікселях: значення спершу переводиться в пункти, і в поле потрапляє 12. Назву властивості й крапку з комою поле пропускає.
16 пкс16 pxСкорочення «пкс» поле читає як пікселі, і в поле потрапляє 12.
0,5 см18,9 pxДовжину в сантиметрах поле спершу переводить у пункти, і в поле потрапляє 14,173228.
3/41 pxДріб поле теж приймає: 0,75 пункту — це рівно один піксель.
Перш ніж писати цю таблицю, ми перевірили кожен запис у справжньому полі. Записи, які приймає поле пікселів, наведено в таблиці на сторінці конвертера px у pt.

Як перемкнути одиниці між пунктами й пікселями в програмах?

  1. Adobe InDesign

    У Windows відкрийте Редагування › Параметри › Одиниці виміру й приріст, у macOS — InDesign › Параметри › Одиниці виміру й приріст, і в одиницях вимірювання лінійки виберіть пікселі по горизонталі й по вертикалі[8]. Незалежно від вибраної одиниці, у будь-яке поле можна ввести значення з одиницею, наприклад «6 пт», «6ap» або «5px», і InDesign перерахує його в одиниці документа[8].

  2. Adobe Photoshop

    У Windows виберіть Редагувати › Параметри › Одиниці та лінійки, у macOS — Photoshop › Параметри › Одиниці та лінійки; те саме вікно відкривається подвійним клацанням по лінійці[9]. Якщо для параметра «Розмір, точок/дюйм» вибрати «PostScript (72 точок/дюйм)», Photoshop рахує тим самим пунктом, що й цей конвертер; варіант «Традиційний» використовує 72,27 точки на дюйм[9].

  3. Microsoft Word

    Word показує кегль у пунктах у полі «Розмір шрифту» на вкладці «Основне»[10]. Щоб у документі був той самий розмір, що й у тексту 16 пікселів на вебсторінці, введіть 12, для 14 пікселів — 10,5; інші значення переведе конвертер px у pt.

Пікселі: переведення з інших одиниць

rem у pxсм у pxмм у pxдюйми в px

Джерела

  1. Типографський пункт — Вікіпедія
  2. CSS Values and Units Module Level 4 — W3C (англійською)
  3. Піксель — Вікіпедія
  4. Point (typography) — Wikipedia (англійською)
  5. <length> - CSS — MDN Web Docs (англійською)
  6. Where does 96 DPI come from in Windows? — Microsoft Learn (англійською)
  7. Настанови з доступності вебвмісту (WCAG) 2.1 — W3C, переклад ПРООН в Україні
  8. Вирівнювання та розповсюдження об’єктів за допомогою лінійок — Довідка Adobe InDesign
  9. Лінійки — Довідка Adobe Photoshop
  10. Змінення розміру шрифту — Підтримка Microsoft

Усі значення в таблицях ми обчислили з визначень одиниць і перед публікацією перевірили розрахунком. Історичні дані та назви місцевих одиниць спираються на джерела, наведені вище.

Зміст востаннє перевірено: · підготувала й перевірила команда Arteon

Поширені запитання про переведення пунктів у пікселі

Скільки пікселів у 14 пунктах?

Приблизно 18,67 пікселя. 14 × 4/3 = 18,666…, тож у таблицю стилів можна записати 18.67px.

Скільки міліметрів в одному пункті?

Пункт у Word і CSS дорівнює 1/72 дюйма, тобто приблизно 0,3528 мм. Пункт Дідо — близько 0,3759 мм[1]. Отже, 12 пунктів у Word — це 4,23 мм, а 12 пунктів Дідо — 4,51 мм.

Що таке кегль?

Кегль — це розмір шрифту, виміряний у пунктах[1]. У металевому наборі він означав висоту тіла літери. У цифрових шрифтах кегль задає розмір уявного квадрата, у який вписано літери, тому висота самих літер від кегля напряму не залежить[4].

12 px і 12 pt — це однаковий розмір?

Ні. 12 пунктів — це 16 пікселів, а 12 пікселів — 9 пунктів. Пункти використовують у Word та InDesign, пікселі — у таблицях стилів, тому однакове число там і там означає різний розмір.

Скільки пікселів у 10 пунктах?

13,33 пікселя. 10 не ділиться на 3 без остачі, тому результат дробовий; CSS приймає і дробові значення.

Скільки пікселів у 72 пунктах?

Рівно 96 пікселів, тобто один дюйм, або 25,4 мм. Стандарт CSS так само визначає дюйм як 96 пікселів, а пункт — як 1/72 дюйма[2].

Чи однаковий pt у LaTeX і в цьому конвертері?

Ні. У TeX і LaTeX «pt» дорівнює 1/72,27 дюйма, а пункт 1/72 дюйма там позначають «bp»[4]. Різниця становить близько 0,4%, на 12 пунктах — 0,016 мм. Конвертер рахує пунктом DTP, який відповідає «bp».

Скільки пікселів у лінії завтовшки 0,5 пункту?

Приблизно 0,67 пікселя. Лінія 0,75 пункту — рівно один піксель, 1,5 пункту — два пікселі.

Знімок екрана безкоштовного інструмента Arteon: Переведіть пункти (pt) у пікселі (px)

Допоможіть нам покращити конвертер

Знайшли значення, для якого ваша програма дає інший результат, або маєте ідею? Напишіть нам.