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

Образцы цветовых сочетаний текста и фона с примерами контрастности для доступности

Сравнение уровней контраста текст/фон — от недостаточного до оптимального

Тональный цвет шрифта

Каждая гарнитура создаёт на странице определённую текстуру — оптическую серость, плотность набранного блока. Это зависит от толщины штрихов, ширины знаков, апертуры, интерлиньяжа и трекинга. Жирный, сжатый гротеск с минимальными отступами создаёт «тёмную», плотную страницу. Светлая антиква с широким интерлиньяжем — «воздушную» и светлую.

Профессиональные типографы говорят о «серости полосы набора» — этот термин описывает воспринимаемую яркость целого абзаца, а не отдельной буквы. Для оценки серости разворачивают страницу на 90° и смотрят расфокусированным взглядом: ровный тон без тёмных пятен и светлых дыр — признак правильно настроенного набора.

Хроматический контраст: стандарты и практика

Когда речь идёт о цвете в буквальном смысле, первое и важнейшее понятие — контраст. В 2008 году Web Content Accessibility Guidelines (WCAG) 2.0 установили измеримый стандарт контраста, основанный на относительной яркости (luminance) двух цветов.

Коэффициент контраста вычисляется как отношение более яркого цвета к более тёмному:

  • AA (минимальный стандарт): не менее 4.5:1 для основного текста (до 18px) и 3:1 для крупного текста (от 18px нормального или 14px жирного);
  • AAA (расширенный стандарт): не менее 7:1 для основного текста и 4.5:1 для крупного;
  • Классическая чёрно-белая пара (#000000 на #FFFFFF) даёт коэффициент 21:1 — теоретический максимум.

Проверить контраст

Бесплатные онлайн-инструменты Contrast Checker от WebAIM (webaim.org/resources/contrastchecker/) и Accessible Colors позволяют ввести два hex-кода и мгновенно получить коэффициент контраста с оценкой соответствия WCAG AA и AAA.

Цветовая температура и читаемость

Чистый чёрный (#000000) на чисто белом (#FFFFFF) даёт максимальный контраст, но на экране это сочетание создаёт высокочастотное мерцание, вызывающее усталость при длительном чтении. Именно поэтому большинство изданий и операционных систем использует «мягкий чёрный» — тёмно-серый с лёгким тёплым или холодным оттенком — на кремовом или тёплом белом фоне.

Цветовая температура шрифта (тёплый или холодный подтон нейтрального цвета) влияет на восприятие издания в целом:

  • Тёплые нейтральные тоны (коричневато-серый текст на кремовом фоне) создают ощущение академичности, уюта и традиции — естественны для гуманитарных изданий, книг, лонгридов;
  • Холодные нейтральные тоны (серо-синий текст на холодном белом) ассоциируются с технической точностью, современностью и профессионализмом — доминируют в IT-документации и бизнес-изданиях;
  • Нейтральный серый — универсальный выбор, подходящий большинству проектов.

Цвет как инструмент иерархии

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

Стандартные роли цвета в типографической системе:

  • Первичный текстовый цвет — основная масса текста, требует максимального контраста;
  • Вторичный (muted) текстовый цвет — метаинформация, подписи, сноски; контраст может быть несколько ниже, но не ниже AA;
  • Акцентный цвет — ссылки, кикеры, заголовки разделов; должен быть узнаваемым и последовательным;
  • Инверсный текст — белый или светлый текст на тёмном фоне: используется для выделенных блоков, баннеров, футеров.

Тёмная тема: типографика в обратном порядке

Dark Mode, получивший широкое распространение после macOS Mojave (2018) и Android 9 (2018), поставил типографов перед нетривиальной задачей. Простая инверсия — белый текст на чёрном фоне — не работает так же хорошо, как чёрный на белом.

Причина — эффект ирадиации: светлые объекты на тёмном фоне кажутся немного крупнее из-за рассеивания света на сетчатке. Белый текст на чёрном выглядит жирнее, чем тот же шрифт в светлой теме. Опытные дизайнеры компенсируют это: для тёмной темы используют чуть более светлый и/или тонкий вариант гарнитуры, снижают вес заголовков с Bold до SemiBold.

Рекомендуемая практика: избегать чисто белого (#FFFFFF) на чисто чёрном (#000000) — оба крайних значения создают излишнее напряжение. Оптимальная пара для тёмной темы — около #E0DAD0 на #1A1714.

В печати цвет описывается в модели CMYK (Cyan, Magenta, Yellow, Key/Black) — субтрактивной, основанной на поглощении света. Экраны используют RGB — аддитивную модель, где цвет образуется излучением. Одно и то же значение Pantone на экране и на бумаге будет выглядеть по-разному.

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

— ✦ —

Практические выводы

Цвет в типографике — не место для экспериментов без системы. Несколько принципов, которые работают всегда:

  • Всегда проверяйте контраст инструментами, не полагайтесь на зрительную оценку — наше восприятие цвета контекстуально;
  • Не используйте более трёх хроматических цветов в одной типографической системе;
  • Последовательность важнее красоты: один и тот же акцентный цвет во всех заголовках раздела создаёт систему; хаотичная смена цветов разрушает её;
  • Тестируйте дизайн в режиме симуляции дальтонизма (Figma, Chrome DevTools) — около 8% мужчин имеют то или иное нарушение цветовосприятия.