В чём измерять шрифт: всё про пиксели и пункты

Размер шрифта в Word, Figma, Photoshop и CSS может обозначаться по-разному: где-то используются пункты, где-то — пиксели. Из-за этого возникает путаница: почему в документе стоит 12 pt, а в интерфейсе — 16 px, и можно ли вообще сравнивать эти значения между собой. На практике выбор единиц зависит от задачи: для печати и документов важны одни параметры, для экранов и интерфейсов — другие. Разберём, в чём измеряется размер шрифта, чем отличаются pt и px и когда использовать каждую из этих единиц.

Что такое размер шрифта

При работе с макетом размер влияет вообще на всё: сколько слов помещается в строке, как выглядит заголовок, не начинает ли текст спорить с остальными элементами.

При этом одинаковые значения не означают одинаковый результат. У одних гарнитур буквы узкие и компактные, у других — широкие, с крупными строчными символами, и два шрифта с размером 14 pt рядом могут выглядеть так, будто один больше другого на пару пунктов. Вот пример заголовка, а также текста 14 и 16 px Roboto и PT Serif:

Как видите, шрифт без засечек смотрится крупнее, чем с засечками в одних и тех же размерах.

На восприятие влияют:

• пропорции букв;
• высота строчных символов;
• толщина линий;
• межстрочный интервал;
• расстояние до экрана или печатного носителя.

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

Например:

• в Word размер текста по умолчанию часто указывается как 11 pt или 12 pt;
• при работе CSS можно встретить `font-size: 16px`;
• в Figma дизайнер может работать и с px, и с pt — в зависимости от типа проекта.

Из-за этого одинаковые числа в разных программах не всегда означают одинаковый визуальный результат.

Что такое пункты (pt)

Пункты, или pt, — это типографская единица измерения размера шрифта. Именно её чаще всего используют в печатной продукции и текстовых редакторах вроде Microsoft Word или Google Документах.

В типографике размер букв исторически измеряли не в сантиметрах и миллиметрах, а в пунктах. Один пункт равен 1/72 дюйма. На практике эту величину почти никогда не считают вручную — важно скорее понимать сам принцип: pt привязан не к экрану, а к физическому размеру текста.

Поэтому пункты удобны там, где важен предсказуемый результат при печати. Например:

• текст договора;
• книга или журнал;
• диплом;
• PDF-файл для печати;
• презентация, которую будут показывать на большом экране.

Большинство людей сталкиваются с pt именно в Word. Когда пользователь выбирает шрифт 12 pt, это означает размер текста в типографских пунктах. Для обычных документов такой размер считается стандартным: его часто используют в рефератах, отчётах и деловой переписке.

Популярные размеры обычно выглядят так:

• 10–11 pt — компактный текст;
• 12 pt — основной текст документов;
• 14–16 pt — подзаголовки;
• от 18 pt и больше — заголовки.

При этом 12 pt — не универсальная визуальная величина. У разных шрифтов текст одного размера может выглядеть крупнее или мельче. Например, Times New Roman и Arial при одинаковых значениях воспринимаются немного по-разному из-за пропорций букв.

Что такое пиксели (px)

Если открыть настройки текста в Figma или посмотреть стили сайта, почти везде будут пиксели — px. Для цифровых интерфейсов это основная единица измерения шрифта.

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

Так выглядит запись в CSS: `font-size: 16px;`. Это размер текста, который браузер должен показать на экране.

Пиксели используют в основном для цифровых продуктов:

• сайтов;
• приложений;
• онлайн-сервисов;
• интерфейсов;
• рекламных баннеров;
• макетов для экранов.

У такого подхода есть практический плюс: проще управлять композицией. Можно быстро понять, насколько высоким получится заголовок, поместится ли текст в кнопку и как он будет выглядеть рядом с другими элементами.

При этом одинаковое значение px не всегда выглядит одинаково на разных устройствах. На ноутбуке, смартфоне и большом мониторе текст может ощущаться чуть иначе из-за размера экрана и плотности пикселей. Но для веба и интерфейсов px всё равно остаётся стандартом.

Чем отличаются pt и px

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

Главное различие в том, к чему привязана единица измерения:

• pt ориентируется на физический размер текста;
• px — на отображение на экране.

Из-за этого один и тот же текст может выглядеть по-разному в Word и, например, в браузере.

Иногда пользователи пытаются перевести pt в px напрямую, но универсального соотношения нет. На отображение влияют настройки экрана, масштаб интерфейса и сама гарнитура.

В большинстве случаев ориентируются на среду: если текст будут печатать — используют pt; если читать с экрана — px.

Какие ещё единицы бывают

Кроме pt и px, в дизайне и вёрстке используют и другие единицы измерения. Чаще всего они встречаются в CSS и адаптивных интерфейсах.

Em зависит от размера родительского элемента. Если у блока установлен текст 16 px, то `1em` тоже будет равен 16 px. Если размер родителя изменится, em автоматически пересчитается вместе с ним. Такую единицу используют, когда нужно сохранить пропорции внутри интерфейса.

Rem работает похоже на em, но привязывается не к родительскому элементу, а к базовому размеру шрифта на всей странице. Обычно это удобнее в больших проектах: дизайнеру и разработчику проще масштабировать интерфейс целиком.

Проценты тоже могут использоваться для размера текста. Например, `font-size: 120%` увеличит шрифт относительно базового значения. Сейчас такой подход встречается реже, но его всё ещё используют в старой вёрстке и некоторых CMS.

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

Как выбрать размер шрифта

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

Для документов

В текстовых документах чаще всего используют 11–12 pt. Такой размер считается комфортным для чтения на бумаге и с экрана ноутбука.

Пример:

• 10 pt — компактный текст, сноски, таблицы;
• 11–12 pt — основной текст;
• 14 pt и больше — заголовки и подзаголовки.

Если документ будут печатать, лучше заранее проверить, как текст выглядит на листе, а не только на экране.

Для презентаций

В презентациях текст обычно делают крупнее, потому что его читают с расстояния. Размер зависит от формата выступления и размера экрана.

Часто используют: от 18–24 pt для основного текста и 28–40 pt для заголовков.

Слишком мелкий текст в презентациях почти всегда выглядит хуже, чем короткий, но крупный.

Для сайтов и интерфейсов

В вебе базовым размером текста долгое время считались 16 px. Многие сайты и приложения до сих пор используют это значение как стандарт для основного контента.

При этом:

• мелкий текст в 12–13 px часто ухудшает читаемость;
• слишком крупный усложняет восприятие длинных абзацев;
• на мобильных устройствах текст обычно делают чуть больше.

Размер заголовков, кнопок и подписей подбирают уже относительно основного текста.

Для соцсетей и графики

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

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

Повторим, чтобы не забыть:

• pt — для документов, печати и полиграфии;
• px — для сайтов, приложений и интерфейсов.

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

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