HIF / Документация / Системы чтения

Типографика HIF

1. Область действия

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

Документ применяется к операционным системам, приложениям, сайтам, документам, визуализациям данных, терминалам и любому интерфейсу, показывающему текст.

HIF различает четыре вида указаний:

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

Эвристическое число MUST NOT представляться биологической константой или порогом соответствия.

2. Типографическая система

2.1. Обязательные роли

Product Profile определяет как минимум:

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

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

2.2. Полезные классификации шрифтов

Антиква, гротеск, брусковый, моноширинный, гуманистический, неогротеск, геометрический и переходный — исторические или формальные классификации. Они помогают описать дизайн, но сами по себе не предсказывают доступность или пригодность.

Более операционны следующие различия:

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

HIF не принимает утверждения «антиква хорошо читается» или «гротеск доступен» как полный аргумент выбора.

2.3. Анатомия и метрики

Оценка SHOULD исследовать отрисованные слова и фрагменты, а не изолированные буквы из образца. Существенные свойства:

x-height и высота прописных относительно em;
открытость апертур и внутрибуквенных просветов;
различимость I, l, 1, O, 0, rn, m, пунктуации и кавычек;
контраст штрихов, соединения и окончания;
ширина символов и боковые просветы;
кернинг и позиционирование диакритики;
метрики выносных элементов и межстрочного просвета;
пространство для диакритических знаков;
изменение насыщенности и ширины;
растеризация малого кегля на целевых дисплеях.

Большой x-height может визуально увеличивать строчные при одинаковом CSS font-size, но не делает их автоматически более различимыми: взаимодействуют просветы, интервалы, плотность штрихов и форма слова. font-size-adjust и переопределения метрик MAY применяться, чтобы сохранять более сопоставимые воспринимаемый размер и компоновку между резервными шрифтами.

3. Свидетельства о чтении и их ограничения

3.1. Различимость и удобочитаемость

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

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

Обзор Legge и Bigelow связывает беглое чтение с угловым размером текста и x-height в рамках конкретных данных науки о зрении. Он поддерживает проверку размера в условиях просмотра, но не устанавливает единый универсальный кегль цифрового текста.

3.2. Гарнитура, засечки и утверждения об инвалидности

Исследования гарнитур ограничены конкретными начертаниями, размерами, интервалами, участниками и текстом. Например, Rello и Baeza-Yates сравнили двенадцать шрифтов с участием 48 людей с дислексией. Это не доказывает, что одна гарнитура оптимальна для любого языка, возраста, нарушения или задачи.

Поэтому HIF требует:

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

3.3. Длина строки, интерлиньяж и интервалы

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

Критерий успеха WCAG 2.2 1.4.8 на уровне AAA задаёт выбираемое пользователем визуальное представление, включая ширину не более 80 символов (40 для CJK), отсутствие выключки по ширине и указанные условия интервалов для текстовых блоков. Это условия соответствия на данном уровне, а не доказательство, что каждый абзац должен содержать ровно 80 символов в строке.

Отправными эвристиками для прозы MAY быть:

приблизительно 45–80 средних символов в строке для продолжительного чтения латиницы;
используемый интерлиньяж около 1,4–1,6 размера основного текста;
более короткая строка для узких аннотаций, а более длинная — только когда она полезна для сканирования или сравнения данных;
дополнительное пространство для письменностей с составными знаками либо высокими верхними и нижними выносными элементами.

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

3.4. Свидетельства об иерархии

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

Иерархия успешна, когда люди могут:

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

4. Выбор гарнитуры

4.1. Входные критерии

Кандидат переходит к эстетическому сравнению только после проверки:

прав на использование, необходимую модификацию, subsetting, встраивание и распространение во всех целевых каналах;
надёжного происхождения и воспроизводимых файлов шрифта;
полного покрытия требуемых письменностей, символов и поведения OpenType либо спроектированного плана резервных шрифтов;
нужных насыщенностей, стилей и ширин без вредных синтетических начертаний;
приемлемой различимости на худшем поддерживаемом дисплее;
приемлемой стоимости в байтах и загрузке;
совместимости с увеличением текста, пользовательскими переопределениями и платформенным шейпингом;
стабильных метрик между выпусками либо управляемой миграции.

Соответствие бренду оценивают только после этих проверок.

4.2. Гарнитура для чтения

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

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

4.3. Интерфейсная гарнитура

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

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

4.4. Моноширинная гарнитура

Фиксированный шаг оправдан там, где колонки или идентичность символа несут значение: исходный код, вывод терминала, хеши, выровненные логи и некоторые идентификаторы. Моноширинная гарнитура SHOULD различать неоднозначные символы и содержать нужные символы программирования. Она SHOULD NOT применяться ко всей технической прозе.

Интерфейс MUST NOT полагаться только на моноширинность для сохранения связи данных, которую должны выражать семантика или структура таблицы.

4.5. Сочетание гарнитур

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

x-height и визуальный размер;
контраст штрихов и цвет набора;
пропорции и ритм;
совместимость насыщенностей;
языковое покрытие и переходы между резервными шрифтами;
совместимость цифр, пунктуации и символов.

«Контраст при совместимости» — дизайн-эвристика, а не приёмочный тест.

5. Иерархия и композиция

5.1. Типографическая шкала

Сначала определяют семантические, затем числовые ступени. Число ступеней задаётся архитектурой контента. Соседние роли MUST различаться в контексте, в том числе при zoom, высоком контрасте и без цвета.

Шкала SHOULD:

избегать почти одинаковых ролей;
использовать fluid sizing только в ограниченных проверенных пределах;
не позволять крупному тексту занимать рабочий viewport;
сохранять удобочитаемый основной текст независимо от ширины viewport;
включать адаптации для компактного и увеличенного контента.

5.2. Насыщенность, ширина и стиль

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

Узкие начертания MAY применяться в заголовках или плотных данных, но MUST NOT скрывать переполнение локализации или сохранять произвольный layout. Курсив и наклон уместны для ограниченного выделения, терминов или правил цитирования; длинные фрагменты требуют непосредственной проверки удобочитаемости.

Синтетические жирное, курсив и капитель SHOULD быть отключены, если они искажают формы или снижают различимость. Используйте спроектированные начертания или функции.

5.3. Регистр и оформление

Верхний регистр изменяет форму слов и часто требует коррекции трекинга. Он MAY применяться для коротких привычных подписей после тестирования, но SHOULD NOT быть стандартом для прозы или длинных подписей контролов. Letterspacing MUST NOT использоваться для имитации выключки по ширине или исправления принципиально неподходящей гарнитуры.

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

5.4. Обрезка и перенос

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

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

Многоточие — визуальное состояние, а не полная стратегия accessible name.

6. Оптические размеры и вариативные шрифты

Вариативные OpenType-шрифты могут представлять непрерывные или именованные экземпляры по зарегистрированным осям: насыщенности (wght), ширины (wdth), наклона (slnt), курсива (ital), оптического размера (opsz) и собственным осям гарнитуры.

По возможности используйте высокоуровневые CSS-свойства для зарегистрированных осей: они участвуют в сопоставлении и независимо каскадируются. font-variation-settings применяйте для осей без подходящего высокоуровневого свойства.

Оптический размер меняет дизайн глифа для целевого размера отрисовки, а не геометрически масштабирует его. Если у гарнитуры есть корректная ось opsz, font-optical-sizing: auto MAY улучшить малые и крупные экземпляры. Проверяйте поведение браузеров, поддерживаемый диапазон и каждую критичную роль. Не имитируйте оптические размеры трекингом или эффектами штриха.

Вариативный файл не обязательно меньше каждого набора статических subset. Сравнивайте сжатые файлы и нужные оси для фактического набора символов. Точно задавайте диапазоны осей в @font-face и тестируйте промежуточные значения, не предполагая, что интерполяция сохранит качество.

7. Числа, данные и код

7.1. Числа

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

Числовые функции OpenType MAY выбирать:

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

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

7.2. Код и идентификаторы

Типографика кода SHOULD поддерживать:

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

Лигатуры, заменяющие несколько программных символов, MAY предлагаться как настройка пользователя, но MUST NOT скрывать исходную последовательность или мешать точному размещению курсора.

8. Многоязычная и многописьменная типографика

8.1. Поддержка языка и письменности

«Поддерживает Unicode» — не приёмочное утверждение. Зафиксируйте:

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

Тестируйте текст на родном языке, а не транслитерированные заполнители. Проводите проверку с читателями и специалистами соответствующих письменностей.

8.2. Формирование глифов и резервные шрифты

Сложные письменности требуют правильной подстановки глифов, перестановки, прикрепления знаков и языковых форм. Сохраняйте языковые метаданные и позволяйте шейпинг-движку применять обязательные функции OpenType.

Стек резервных шрифтов — спроектированная составная система. На каждой границе перехода проверяйте:

покрытие без tofu и пропущенных знаков;
совместимые визуальный размер и метрики строк;
сопоставление насыщенности и стиля;
принадлежность пунктуации и цифр;
выравнивание базовых линий;
текстовое и цветное представление emoji;
отсутствие разрыва внутри графемы или иного некорректного разделения.

unicode-range MAY разделять ресурсы, но нужно тестировать сопоставление браузера и фактический текстовый корпус. Subsetting MUST сохранять таблицы шейпинга и обязательные символы.

8.3. Двунаправленность

Храните текст в логическом порядке и реализуйте Unicode Bidirectional Algorithm. В вебе применяйте метаданные языка и направления, логические CSS-свойства и семантику HTML dir, bdi или bdo. Не исправляйте смешанное направление ручным разворотом строк или вставкой визуальных пробелов.

Тестируйте смешанные имена, числа, пунктуацию, пути, телефоны и пользовательский текст внутри LTR- и RTL-интерфейсов. Отражайте направленные иконки только когда их смысл пространственный или текстовый; не отражайте автоматически универсальные смыслы и физические объекты.

9. Доступность и управление пользователем

Типографика MUST выдерживать применимую основу доступности. Для веб-содержания WCAG 2.2 это включает, соответственно выбранному уровню и области:

увеличение текста до 200% без потери контента или функции;
reflow при указанном эквивалентном viewport;
отсутствие потерь при применении значений текстовых интервалов из критерия 1.4.12;
необходимый контраст текста и нетекстовых элементов;
отказ от изображений текста, кроме заданных исключений;
сохранение контента и контролов при пользовательских стилях и платформенных настройках доступности.

Дополнительно продукты SHOULD тестировать:

browser zoom до 400%;
системное масштабирование текста и настройки крупного текста;
минимальный и максимальный поддерживаемый viewport;
пользовательское переопределение шрифта;
увеличенные интервалы строк, абзацев, букв и слов;
жирный текст, высокий контраст и forced-colour;
низкое разрешение, увеличение и удалённый дисплей.

Не блокируйте размер текста или zoom, не кодируйте прозу контурами и не обрезайте контейнер только ради сохранения композиции. Настройки пользователя важнее идеальных для бренда переносов.

10. Инженерия веб-шрифтов

10.1. Форматы и ресурсы

WOFF2 — формат W3C для современной доставки веб-шрифтов. При разрешении лицензии храните исходные артефакты отдельно: WOFF2 — ресурс доставки, а не дизайн-исходник.

Создавайте минимальный обоснованный набор ресурсов:

создавайте подмножества по измеренному языковому корпусу и поддерживаемым функциям;
разделяйте по письменности, только если загрузка и резервные шрифты остаются корректными;
удаляйте неиспользуемые оси и экземпляры, если позволяют лицензия и инструменты;
правильно объявляйте насыщенность, стиль, ширину и диапазоны вариации;
отдавайте правильные MIME type, caching и cross-origin policy.

Каждый subset требует регрессионного теста пропущенных глифов и шейпинга.

10.2. Политика загрузки

План загрузки шрифтов фиксирует:

какой текст полезен до прихода custom fonts;
какие шрифты критичны для первого рендера;
приемлемый flash незастилизованного или невидимого текста;
политику font-display по ролям;
обоснование preload;
поведение при timeout и отказе;
бюджет layout shift;
результаты в медленной сети и при повторном посещении.

Основной текст SHOULD обычно оставаться доступным при отказе шрифта. Preload только тех ресурсов, раннее использование которых определено; лишние preload конкурируют с более важной работой.

Метрики резервного шрифта можно скорректировать через size-adjust, ascent-override, descent-override и line-gap-override, чтобы снизить изменение компоновки. Значения MUST выводиться из измеренных метрик и тестироваться на обрезку. Не скрывайте уже читаемый текст лишь ради ожидания брендовой гарнитуры.

10.3. Свидетельства производительности

Для каждого route и locale фиксируйте:

запрошенные и использованные сжатые байты шрифтов;
начало, завершение запроса и поведение cache;
время рендера текста;
layout shift из-за замены шрифта;
стоимость неиспользуемых глифов, функций и осей;
результат отказа при заблокированных запросах.

Производительность — приёмочное свойство всей типографической системы, а не утверждение, выводимое из слов «variable» или «subset».

11. Лицензирование, происхождение и безопасность

Для каждого файла шрифта храните:

идентификатор ассета и криптографический хеш
гарнитура, словолитня и дизайнер
URL источника и дата получения
название лицензии и точный файл лицензии/EULA
разрешённые продукты, платформы и территории
права на web embedding, app embedding и document embedding
права на изменение, конверсию и subsetting
права на распространение и сервер/CDN
требования атрибуции и наименования
версия и история изменений
внутренний ответственный и дата пересмотра

Ярлыка «open» без самой лицензии недостаточно. Desktop-лицензия не подразумевает права для веба, приложений или распространения. Не загружайте production fonts с неофициальных зеркал и не копируйте их из другого продукта.

Font binaries — исполняемый ввод для сложных парсеров. Используйте поддерживаемые инструменты, проверяйте файлы, сохраняйте хеши и доставляйте только необходимые таблицы и функции.

12. Типографические токены

Рекомендуемые поля семантического токена:

роль
гарнитура и резервные шрифты
размер или ограниченная fluid function
интерлиньяж
насыщенность
ширина
стиль
межбуквенный интервал
межсловный интервал
функции OpenType
оси вариации
преобразование регистра
оформление
политика переноса и overflow
переопределения языка/письменности
переопределение платформы

Пример:

type.body.default
type.body.compact
type.heading.page
type.label.control
type.data.tabular
type.code.default

Примитивные токены вроде font-size-300 MAY поддерживать реализацию, но компоненты потребляют семантические роли. Переопределение темы или бренда MUST сохранять контракт роли по доступности, покрытию письменностей, layout и производительности.

13. Алгоритм выбора

Используйте воспроизводимый процесс:

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

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

14. Матрица приёмки

Измерение	Обязательное свидетельство	Причина отклонения
Права	Точная лицензия и проверка распространения	Нет права на целевое использование, подмножество, встраивание или распространение
Происхождение	Авторитетные файлы, версия и хеши	Источник или история изменений неизвестны
Покрытие	Скан корпуса и образцы носителей письменности	Не работает обязательный глиф, знак, функция или шейпинг
Различимость	Задачи на символы, слова и фрагменты на целевых дисплеях	При поддерживаемом условии возникает существенная неоднозначность или потеря
Удобочитаемость	Репрезентативная задача длительного чтения	Понимание, скорость или усталость не достигают объявленного порога
Иерархия	Тест сканирования и понимания в реальных layout	Роли нельзя надёжно различить
Доступность	Тесты zoom, reflow, интервалов, контраста и user override	Теряется контент или функция
Данные/код	Корпус чисел, идентификаторов и кода	Выравнивание создаёт ложный смысл или символы неоднозначны
Локализация	Длинный, короткий, двунаправленный и многописьменный текст	Возникают обрезка, неверный порядок или разрыв резервного шрифта
Производительность	Измерения холодной/тёплой загрузки и отказа	Не выполнен порог бюджета или доступности рендера
Стабильность	Визуальная регрессия браузеров/платформ	Метрики или переносы меняются вне допуска
Эксплуатация	Токены, ответственный, источник и проверка	Гарнитуру невозможно воспроизводимо поддерживать

Product Profile MUST задавать пороги, устройства и samples до финального сравнения.

15. Чек-лист выпуска

Весь видимый текст остаётся настоящим выделяемым текстом, если исключение не документировано.
Заголовки и роли следуют семантической структуре, а не только визуальному размеру.
Каждая поставляемая насыщенность и стиль — спроектированный или явно принятый экземпляр.
Все поддерживаемые письменности проверены с текстом на родном языке.
Резервные шрифты и состояние заблокированного шрифта протестированы.
Масштабирование, перекомпоновка и переопределение интервалов не теряют обязательный текст или действие.
Числовые точность, locale и выравнивание корректны.
Код и идентификаторы сохраняют точные последовательности символов.
Запросы, байты и layout shift шрифтов соответствуют Product Profile.
Лицензии, хеши, атрибуция и исходные файлы записаны.
Регрессионные образцы покрывают критические строки, письменности и границы layout.