Шрифты
Разработчику
Аналитику
Тестировщику
Архитектору
Инженеру
Шрифты
Что такое шрифт с технической точки зрения
Шрифт (font) — это программно-дизайнерская реализация гарнитуры (typeface), представленная в виде набора символов, каждый из которых имеет строго определённые геометрические параметры:
- контур (outline), задаваемый в векторном виде (обычно через кривые Безье второго или третьего порядка),
- метрики (ширину, высоту, расстояния между базовыми линиями, выносами ascender/descender),
- инструкции растеризации (hinting), оптимизирующие отображение на экранах с низким DPI,
- дополнительные метаданные (имя шрифта, автор, лицензия, поддерживаемые языки, OpenType-функции и пр.).
В отличие от гарнитуры — абстрактного дизайнерского замысла (например, "Helvetica"), — шрифт — это конкретный цифровой файл, реализующий гарнитуру в определённом начертании (Regular, Bold, Italic и т.д.). Одна гарнитура может иметь сотни шрифтов (всевозможные веса, ширины, варианты для капительного набора, моноширинные версии и т.п.).
Форматы шрифтов
| Формат | Год появления | Технологическая основа | Поддержка | Особенности |
|---|---|---|---|---|
| Bitmap Fonts (.FON, .FNT) | 1980-е | Растровые изображения символов для фиксированных размеров | Устаревший, частично в Windows 3.x и DOS | Высокая производительность на слабых системах, но отсутствие масштабируемости. При увеличении — пикселизация. Использовались в ранних операционных системах и терминалах. |
| PostScript Type 1 (.PFB/.PFM) | 1984 (Adobe) | Векторные контуры на основе кубических кривых Безье + отдельный файл метрик | Поддержка в старых версиях macOS, UNIX, LaTeX, частично в современных DTP-системах | Один из первых масштабируемых форматов. Требует двух файлов (бинарный + метрика). Замещён OpenType. Adobe прекратила поддержку с 2023 г. |
| TrueType (.TTF) | 1991 (Apple, затем Microsoft) | Векторные контуры на основе квадратичных кривых Безье, встроенные инструкции hinting внутри единого файла | Повсеместно: Windows, macOS, Linux, Android, iOS, веб | Самый массовый формат на протяжении 1990–2010-х. Отличается точным контролем растеризации на низких разрешениях благодаря байткоду hinting, но сложен в реализации. Поддерживает подмножества глифов (subset embedding). |
| OpenType (.OTF / .TTF) | 1996 (Microsoft & Adobe), стандартизирован ISO/IEC 14496-22 | Могут содержать как квадратичные (TrueType outline), так и кубические (CFF/PostScript outline) контуры. | Повсеместно: все современные ОС, браузеры, редакторы | Универсальный, расширяемый контейнер. Может включать: |
- до 65 535 глифов (включая лигатуры, альтернативные формы, символы расширенных языков),
- OpenType Layout Features (например, contextual alternates, stylistic sets, small caps),
- цветные шрифты (через COLR/CPAL, SVG-in-OT, CBDT),
- переменные шрифты (с 2016 г.).
.OTF— традиционно означает CFF-контур;.TTFв OpenType-контексте — TrueType-контур. Оба — валидные OpenType-файлы. | | WOFF / WOFF2 | 2009 / 2014 (W3C) | Сжатая обёртка над OpenType (.TTF/.OTF) с метаданными и таблицами оптимизации | Все современные браузеры (Chrome, Firefox, Safari ≥10, Edge) | - WOFF — сжатие zlib, +10–15% к размеру исходного OTF/TTF.
- WOFF2 — сжатие Brotli, экономия до 30–50% по сравнению с WOFF.
Используются исключительно в вебе; не предназначены для установки в систему. Включают механизмы лицензирования и проверки целостности (metadata block, private data). |
Примечание: Современные шрифты практически всегда поставляются в OpenType-формате, даже если расширение
.ttf. Это не ошибка —.ttfможет быть и TrueType, и OpenType с TrueType outline.
Технические компоненты шрифта
Любой OpenType-шрифт состоит из табличной структуры — набора именованных блоков ("tables"), описанных в спецификации ISO/IEC 14496-22. Ключевые таблицы:
head— заголовок шрифта — версия, флаги, метрики шрифта в целом (units per em, даты создания/модификации, направление письма).hhea,vhea— горизонтальная и вертикальная метрическая информация (макс. высоты ascender/descender, line gap).hmtx,vmtx— ширины и позиции сдвига (left side bearing) для каждого глифа по горизонтали/вертикали.maxp— макс. параметры: число глифов, вложенность компонентов и пр.cmap— таблица сопоставления кодовых точек Unicode → идентификаторам глифов. Критически важна для корректного отображения текста. Может содержать несколько подтаблиц под разные кодировки (UCS-2, UTF-16, Mac Roman и т.д.).glyf(для TTF-outline) илиCFF(для CFF-outline) — векторные контуры глифов.loca— таблица локаторов глифов, указывает смещение каждого глифа вglyf.name— текстовые метаданные — имя шрифта, автор, лицензия, названия стилей ("Bold", "Italic"), локализованные имена.OS/2— расширенные метрики Windows/macOS — вес (usWeightClass — 100–900), ширина (usWidthClass), капительный размер, Unicode-блоки, лицензионные флаги (embedding permissions).post— информация для PostScript-вывода: имена глифов в формате Adobe (.notdef,A,uni0410и т.д.), поддержка Italic angle.GSUB,GPOS— OpenType Layout — замены глифов (ligatures, contextual alternates) и позиционирование (кернинг, диакритики).STAT— (для переменных шрифтов) метаданные осей вариаций (weight, width, italic, custom).fvar— описание осей вариаций и именованных экземпляров ("Bold", "Condensed").gvar(TTF) /CFF2(CFF) — вариационные данные глифов.
Без cmap, glyf/CFF, head, hhea, hmtx и maxp шрифт не может быть корректно отображён. Остальные таблицы опциональны, но критичны для профессионального типографского контроля.
Шрифтовые метрики и терминология
- Em-square (units per em) — виртуальный квадрат, в котором проектируется глиф (обычно 1000 или 2048 единиц). Не соответствует физической высоте символа — просто система координат.
- Baseline — воображаемая горизонтальная линия, на которую "ставятся" символы латиницы/кириллицы.
- Ascender — часть символа, выступающая выше baseline (например, в "h", "л").
- Descender — часть, опускающаяся ниже baseline ("p", "у").
- Cap height — высота прописных букв ("H", "М").
- X-height — высота строчных букв без выносных элементов ("x", "о", "а"). Ключевой параметр читаемости.
- Leading — межстрочный интервал (в типографике — расстояние между baseline соседних строк). В CSS —
line-height. - Kerning — коррекция расстояния между конкретными парами символов ("AV", "То", "Лю") для визуального баланса. Реализуется в
GPOS. - Tracking / Letter-spacing — равномерное изменение расстояния между всеми символами в блоке.
- Weight — насыщенность: 100 Thin — 900 Black (по спецификации CSS и OS/2.usWeightClass).
- Width — ширина: 1 Ultra-condensed — 9 Ultra-expanded.
Установка и управление шрифтами в операционных системах
Windows
- Механизм установки:
- Через Проводник: копирование
.ttf/.otfвC:\Windows\Fonts(или двойной клик → "Установить"). - Через PowerShell:
Add-AppxPackage -Path font.otf(для пользовательских шрифтов в режиме per-user). - Через API
AddFontResourceExW()(для программной установки без перезагрузки).
- Через Проводник: копирование
- Хранение:
- Системные шрифты —
C:\Windows\Fonts\(запись требует прав администратора). - Пользовательские —
%LOCALAPPDATA%\Microsoft\Windows\Fonts\(доступно с Windows 10 1709).
- Системные шрифты —
- Кэширование:
Служба Windows Font Cache Service (FontCache) создаёт индексы в%SystemRoot%\ServiceProfiles\LocalService\AppData\Local\FontCache\. При повреждении — сброс кэша:
net stop fontcache
net start fontcache
- Особенности:
- Поддержка OpenType с 2007 (Windows Vista).
- Переменные шрифты — с Windows 10 1703 (частично), полноценно — с 1809.
- Цветные шрифты (COLR/CPAL, CBDT) — с Windows 8.1 (через DirectWrite).
- Не обновляет список шрифтов в приложениях "на лету": требуется перезапуск редактора (кроме UWP-приложений, использующих DirectWrite).
macOS
- Механизм установки:
Font Book.app: перетаскивание файла → "Установить шрифт" (валидация, проверка дубликатов).- Через терминал: копирование в
~/Library/Fonts/(пользовательский) или/Library/Fonts/(системный).
- Хранение:
- Пользователь:
~/Library/Fonts/ - Системный:
/Library/Fonts/ - Системные Apple-шрифты:
/System/Library/Fonts/(только для чтения).
- Пользователь:
- Кэширование:
Кэши (com.apple.fonts) хранятся в~/Library/Caches/и/System/Library/Caches/. Сброс:
# пользовательский кэш
atsutil databases -removeUser
atsutil server -shutdown
atsutil server -ping
# системный кэш
sudo atsutil databases -remove
sudo atsutil server -shutdown
sudo atsutil server -ping
- Особенности:
- Поддержка OpenType с macOS X 10.0 (2001).
- Переменные шрифты — с macOS 10.13.4 (High Sierra).
- Цветные шрифты (sbix, COLR) — с macOS 10.7 (Lion).
- Автоматическая деактивация дубликатов в Font Book.
Linux (на примере Ubuntu / GNOME)
- Механизм установки:
- Пользовательский: копирование в
~/.fonts/или~/.local/share/fonts/, затем обновление кэша. - Системный: копирование в
/usr/share/fonts/иfc-cacheот root.
- Пользовательский: копирование в
mkdir -p ~/.local/share/fonts
cp MyFont-Regular.otf ~/.local/share/fonts/
fc-cache -fv
sudo cp MyFont-Regular.otf /usr/share/fonts/truetype/
sudo fc-cache -fv
fc-list | grep -i myfont
- Система управления:
Используетсяfontconfig— конфигурация через XML-файлы в/etc/fonts/и~/.config/fontconfig/.- fc-list — список установленных шрифтов.
fc-match "Arial"— какой шрифт будет использован вместо Arial.fc-query font.otf— анализ метаданных шрифта.
- Особенности:
- Поддержка OpenType — через FreeType (библиотека рендеринга).
- Переменные шрифты — с FreeType 2.8 (2017), требует HarfBuzz ≥2.0 для layout.
- Цветные шрифты — поддержка COLR/CPAL в FreeType ≥2.10.0 (2019), SVG-in-OT — экспериментально.
- По умолчанию не включён hinting для TTF; настраивается в
fonts.conf.
Android
- Системные шрифты: находятся в
/system/fonts/, только для чтения (требуется root для замены). - Прикладная установка:
- Приложения могут включать шрифты в
res/font/(XML-дескрипторы) илиassets/fonts/. - Начиная с Android 8.0 (API 26), поддержка
FontRequestчерез Google Fonts (Downloadable Fonts).
- Приложения могут включать шрифты в
- Особенности:
- Используется
Skia(графическая библиотека Chrome/Flutter) +Minikin(layout/rasterization). - Переменные шрифты — с Android 10 (API 29).
- Цветные шрифты — COLR/CPAL с Android 8.1, CBDT (bitmap color) — с Android 5.0.
- Шрифты по умолчанию: Roboto (латиница/кириллица), Noto Sans (многоязычность).
- Используется
iOS / iPadOS
- Системные шрифты:
/System/Library/Fonts/, недоступны для модификации. - Прикладная установка:
- Только через
UIAppFontsвInfo.plist— указать путь к.ttf/.otfв bundle. - Начиная с iOS 13 — поддержка SF Pro Rounded и переменных шрифтов через
UIFontDescriptor.
- Только через
- Особенности:
- Используется Core Text + Core Graphics.
- Переменные шрифты — с iOS 11 (частично), полноценно — с iOS 13.
- Цветные шрифты — sbix и COLR с iOS 9.
- Системный стек — San Francisco (SF Pro, SF Compact), New York (для печати), Noto (иероглифы).
Переменные шрифты (Variable Fonts)
Техническая суть
Переменный шрифт — это один файл, содержащий непрерывный диапазон вариаций одного дизайна, задаваемых через оси (axes). Каждая ось — числовая величина в пределах [min, max], для которой определены контрольные точки (masters). Интерполяция между ними происходит в реальном времени.
Стандартные оси (по спецификации OpenType 1.8)
| Тег | Название | Диапазон по умолчанию | Примеры |
|---|---|---|---|
wght | Weight | 1–1000 | Thin (100) → Black (900) |
wdth | Width | 50–200% | Ultra-condensed (50) → Ultra-expanded (200) |
ital | Italic | 0–1 | Прямой (0) → Курсив (1) — без наклона, т.е. true italic (отдельный дизайн) |
slnt | Slant | −90° — 0° | Обычный (0) → Наклонный (−12°) — наклон без изменения формы (oblique) |
Пользовательские (custom) оси
Могут быть любыми:
opsz— Optical Size (оптический размер — от 6pt для мелкого текста до 72pt для заголовков — меняются пропорции, контраст, засечки),GRAD— Grade (визуальная насыщенность без изменения ширины/габаритов — для компенсации восприятия на разных фонах),YOPQ/XOPQ— толщина вертикальных/горизонтальных штрихов (в Recursive),CASL— Casual (в Amstelvar — степень неформальности начертания).
Преимущества
- Экономия трафика — один файл вместо 10–20 статичных (
Bold,BoldItalic,Condensed,Lightи т.д.). - Адаптивность: динамическая подстройка под контекст (например, утолщение при низком DPI или слабом освещении).
- Креативный контроль: плавные переходы в анимациях (например,
font-variation-settings: "wght" 400 → 700в CSS).
Поддержка в вебе
@font-face {
font-family: 'Inter VF';
src: url('Inter.var.woff2') format('woff2-variations');
font-weight: 100 900; /* диапазон */
font-style: normal;
}
.text {
font-variation-settings: "wght" 650, "wdth" 95;
}
Поддерживаются в Chrome ≥62, Firefox ≥60, Safari ≥11, Edge ≥79.
Цветные шрифты (Color Fonts)
Форматы реализации
| Формат | База | Особенности | Поддержка |
|---|---|---|---|
| COLR/CPAL | OpenType | Векторные слои (до 255) с плоской заливкой. Каждый слой — обычный глиф + цвет из палитры (CPAL). | Windows 8.1+, Chrome 91+, Firefox 103+, Android 8.1+ |
| SVG-in-OT | OpenType + SVG | Внедрение SVG-фрагментов (градиенты, маски, фильтры). | Firefox 26+, iOS 7+, частично в Windows (только в EdgeHTML) |
| CBDT/CBLC | Растровые изображения (PNG) для каждого глифа и размера. | Android 5.0+, Chrome/Chromium | |
| sbix | Apple | Растровые изображения (PNG, JPEG) с DPI-зависимыми слоями. | macOS 10.7+, iOS 9+ |
Применение
- Эмодзи (все современные эмодзи — цветные шрифты).
- Иконки в интерфейсах (например, Twemoji Mozilla, Noto Color Emoji).
- Брендированные символы (логотипы в тексте).
- Педагогические материалы (цветные буквы для детей).
Пример — font-palette в CSS
@font-palette-values --warm {
font-family: 'Noto Color Emoji';
base-palette: 2; /* выбор палитры из CPAL */
override-colors:
1 #ffe0b2, /* оранжевый вместо жёлтого */
2 #ff5722; /* красный вместо чёрного */
}
.warm-text { font-palette: --warm; }
Поддержка: Firefox ≥103, Canary Chrome (экспериментально).
Лицензирование шрифтов
Типы лицензий
- SIL Open Font License (OFL) — наиболее распространённая открытая лицензия. Разрешает модификацию, коммерческое использование, встраивание в ПО. Запрещает продажу самого шрифта как продукта. Обязательно сохранение файла
OFL.txt. - Apache 2.0 / MIT — редко для шрифтов, но встречается (например, Roboto — Apache 2.0).
- Proprietary (Commercial) — требует покупки лицензии. Различают:
- Desktop — установка на рабочие станции,
- Web — embedding via
@font-face(часто по числу просмотров или доменов), - App — встраивание в мобильное/десктопное ПО,
- Server — использование на сервере для генерации изображений/PDF.
- Freeware — бесплатно, но без права модификации/перераспространения (например, Calibri — только для Windows).
Критически важные вопросы при использовании
- Разрешено ли встраивание в PDF? В PDF есть флаги:
- No Embedding — нельзя.
- Preview & Print — можно, но только для просмотра/печати (не для редактирования).
- Editable — можно редактировать.
(Контролируется битами в таблицеOS/2.fsType.)
- Можно ли использовать в логотипе? Некоторые коммерческие лицензии требуют отдельного разрешения.
- Можно ли модифицировать (например, сузить буквы)? OFL разрешает, проприетарные — почти нет.
⚠️ Важно: Microsoft Core Fonts (Arial, Times New Roman, Courier New) — распространяются под EULA, запрещающей веб-встраивание и модификацию. Использование через
@font-face— нарушение.
Типографские категории (классификация гарнитур)
| Категория | Характерные черты | Примеры | Применение |
|---|---|---|---|
| Serif (с засечками) | Засечки (serifs) на концах штрихов; высокий контраст или низкий; вертикальный или наклонный строй. | Times New Roman, Georgia, PT Serif, Baskerville, Garamond | Длинные тексты (книги, статьи), печать, официальные документы — за счёт лучшей связности строк. |
| Sans-serif (без засечек) | Чистые формы, минимум контраста, открытые пропорции. | Arial, Helvetica, Roboto, Open Sans, PT Sans | Интерфейсы, экранное чтение, заголовки, современный дизайн. |
| Monospace | Все символы — одинаковой ширины. | Courier New, Consolas, Fira Code, JetBrains Mono | Код, терминалы, таблицы, ASCII-арт. Обязательно поддержка ASCII-диаграмм и блоков Unicode. |
| Display / Decorative | Выразительный дизайн, часто узкоспециализированный. | Lobster, Pacifico, Bebas Neue, Dancing Script | Логотипы, баннеры, краткие заголовки. Непригодны для основного текста. |
| Script | Имитация рукописного или каллиграфического письма. | Brush Script, Allura, Great Vibes | Приглашения, сертификаты, бренды (luxury, beauty). Часто включают лигатуры. |
| Slab Serif | Массивные прямоугольные засечки, низкий контраст. | Courier (также моноширинный), Rockwell, Roboto Slab | Заголовки, технические документы, "технический" или "ретро" стиль. |
| Humanist | Беззасечковые с неравномерными пропорциями, отсылками к каллиграфии. | Calibri, Frutiger, Segoe UI, Noto Sans | UI-дизайн, экранное чтение (лучшая различимость при низком DPI). |
Примечание: Современные гарнитуры часто смешивают категории (например, Inter — humanist sans-serif с моноширинными цифрами в tabular form).
Практические рекомендации по выбору шрифтов
Для веб-интерфейсов
- Основной текст — Inter, Roboto, Open Sans, Noto Sans — проверены на читаемость, поддерживают кириллицу, переменные версии доступны.
- Код — JetBrains Mono, Fira Code (с лигатурами для
=>,!=,===), Cascadia Code. - Заголовки — Manrope, Montserrat, Raleway — сжатые, высококонтрастные.
- Универсальная пара: Inter (текст) + JetBrains Mono (код).
Для печати и PDF
- Текст — PT Serif, Linux Libertine, Charter — высокая x-height, оптимизированы под 300+ DPI.
- Таблицы — PT Mono, IBM Plex Mono — чёткие цифры, tabular lining.
- Избегайте шрифтов без embedded hinting для малых кеглей (
<10 pt).
Для мобильных приложений
- Используйте системные шрифты по умолчанию (
-apple-system,BlinkMacSystemFont,system-ui) — они адаптированы под DPI и accessibility-настройки. - При подключении кастомных — отдавайте предпочтение WOFF2 + переменным шрифтам (экономия трафика).