Шрифты в печати vs вебе: разница в подходах

Печать и веб — две среды с разными правилами типографики. Шрифт, который отлично работает в буклете, может плохо смотреться на сайте. И наоборот. Разница — не в эстетике, а в технических условиях: разрешение, рендер, форматы, цвета. В этой статье — сравнение двух сред и объяснение, почему «хороший печатный шрифт» не всегда «хороший веб-шрифт».

Печать: 300 DPI (точек на дюйм) — стандарт для офсетной печати, 600 DPI — для качественной лазерной, 1200 DPI — для типографского качества. На таком разрешении каждая деталь шрифта — засечки, тонкие штрихи, кернинг — передаётся идеально. Шрифт выглядит точно так, как его нарисовал дизайнер.

Веб: 96 DPI — стандартное разрешение для десктопных мониторов, 192 DPI — для retina (2×), 288 DPI — для 3×. На 96 DPI детализация ниже, и засечки могут «плавать». На retina — лучше, но не у всех пользователей retina-экраны. Шрифт должен быть отрисованным с учётом того, что он будет рендериться на разных разрешениях. Это означает: более крупная x-height, утолщённые тонкие штрихи, активный hinting.

Шрифты, разработанные для печати (например, старые serif-шрифты из 1990-х), могут плохо смотреться на вебе. Их засечки и тонкие штрихи, рассчитанные на печать 300 DPI, на экране 96 DPI «размываются». Современные шрифты (Inter, Roboto, Manrope) разработаны с учётом экранных разрешений и хорошо рендерятся на любом экране. В каталоге FontHub все шрифты проверены на разных разрешениях и оптимизированы для веба.

Печать: основной формат — PostScript Type 1 (старый, поддерживается до 2023 года), OpenType (современный стандарт, поддержка расширенных типографических функций). Для печати важны: встраивание шрифта в PDF (subset или full), лицензия на встраивание, поддержка CMYK-цветов для шрифтов с цветными глифами. Размер файла не критичен — даже 1 МБ шрифт нормально «весит» в PDF-документе.

Веб: основные форматы — WOFF2 (современный стандарт, сжатие Brotli), WOFF (fallback для старых браузеров), TTF/OTF (для десктопных приложений). Размер файла критичен — каждые 10 КБ добавляют миллисекунды к загрузке. Используется subsetting (удаление неиспользуемых глифов), чтобы уменьшить размер. Кириллическое подмножество типичного шрифта в WOFF2 — 30–40 КБ (против 200+ КБ TTF с полным набором языков).

Шрифты для печати часто распространяются в форматах PostScript или OpenType с полным набором глифов (нет сжатия). Их нельзя использовать в вебе напрямую — нужно конвертировать в WOFF2/WOFF с subsetting. В каталоге FontHub мы автоматически генерируем WOFF2 и WOFF для всех шрифтов, с поддержкой subsetting. Но если у вас есть собственный шрифт для печати, который вы хотите использовать в вебе, конвертировать его придётся отдельно (через fonttools, FontForge или аналогичные инструменты).

Печать: основной текст — 10–12 pt (≈ 13–16 px), заголовки — 14–24 pt (≈ 18–32 px), крупные акценты — 36+ pt (≈ 48+ px). Размеры в печати — стандартизированы и стабильны. Если вы печатаете буклет с кеглем 10 pt, вы можете быть уверены, что читатель увидит именно 10 pt.

Веб: основной текст — 16–18 px (базовый размер для большинства браузеров), заголовки — 24–48 px, крупные акценты — 48+ px. Но «увидит именно 16 px» — не гарантировано: пользователь может увеличить масштаб браузера до 200%, может быть включена системная настройка «крупный шрифт», может использоваться экран с другой плотностью пикселей. Хороший веб-дизайн — это дизайн, который работает при разных масштабах и плотностях.

Иерархия в печати строится на тонких различиях: 10 pt для основного текста, 11 pt для подзаголовков, 14 pt для заголовков — это рабочая иерархия. В вебе такие тонкие различия неразличимы из-за разного рендера: 16 px и 17 px на разных браузерах могут выглядеть одинаково. Поэтому веб-иерархия строится на более крупных скачках: 16 px для текста, 24 px для подзаголовков, 36 px для заголовков. Меньшие скачки — теряются.

Печать: основной режим — CMYK (cyan, magenta, yellow, key/black), для офсетной печати. RGB (red, green, blue) — для цифровой печати. Цвета в печати — насыщенные, плотные, не «светятся». Контраст текста с фоном: чёрный на белом — стандарт, но возможны и другие комбинации (тёмно-серый на светло-сером, чёрный на бежевом).

Веб: основной режим — RGB, для экранов. Цвета «светятся» (текст на чёрном фоне ярче, чем чёрный текст на белом). Поддержка тёмных тем (dark mode) — обязательна для современных сайтов. В тёмной теме нельзя просто «инвертировать» цвета: белый текст на чёрном фоне — слишком яркий, нужен тёмно-серый (#E0E0E0) на тёмно-чёрном (#1A1A1A). Это вопрос эргономики: чистый белый на чистом чёрном утомляет глаз.

Шрифт в тёмной теме может выглядеть иначе, чем в светлой: тонкие штрихи кажутся «толще» (оптическая иллюзия), засечки — «ярче». При дизайне тёмной темы иногда рекомендуют увеличивать вес шрифта на 100 (например, использовать 500 вместо 400). Это особенно заметно для шрифтов с высоким контрастом штрихов (Playfair Display): в тёмной теме их «тонкие» штрихи могут стать невидимыми.

Печать: лицензия на шрифт для печати обычно покрывает «установку на N компьютеров» и «встраивание в документы». Один и тот же шрифт можно использовать в буклете, в книге, в рекламном макете — в пределах купленной лицензии. Лицензия не зависит от количества напечатанных экземпляров (если только не оговорено отдельно).

Веб: лицензия на веб-шрифт — отдельная. Она покрывает «использование на N доменах» и «N просмотров в месяц». Один и тот же шрифт может иметь разные лицензии для печати и для веба: например, лицензия на печать разрешает 5 компьютеров, а лицензия на веб — 1 домен с 100 000 просмотров в месяц. Для проектов, где шрифт используется и в печати, и в вебе, нужно покупать обе лицензии (или найти шрифт, который разрешает оба использования — большинство бесплатных шрифтов под SIL OFL это делают).

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

«Хороший шрифт — это контекстуальный выбор. Что работает в печати, не всегда работает на экране.» — Карен Ченг

Печать и веб — две разные среды, и подходы к типографике в них различаются. Шрифт, разработанный для печати, может плохо смотреться на вебе из-за разницы в разрешении, рендере и форматах. Шрифт, разработанный для веба, может не дать нужного «типографского качества» в печати из-за ограничений форматов. Выбирайте шрифт под среду: для печати — OpenType с полным набором глифов и поддержкой типографских функций; для веба — WOFF2 с subsetting и поддержкой variable fonts. В каталоге FontHub все шрифты доступны в обоих форматах, и вы можете использовать их в любой среде, в зависимости от задачи.