Контекст: зачем The Washington Post менял систему

В 2023–2024 годах The Washington Post провёл масштабную работу по переосмыслению визуальной идентичности цифровой платформы. Предпосылки стандартные для крупных американских изданий этого периода: фрагментация аудитории по платформам (веб, iOS, Android, Apple News, AMP), необходимость поддерживать разные контентные форматы (новость, лонгрид, подкаст, видео, инфографика) в единой визуальной системе, а также конкуренция с нативными форматами социальных сетей.

Задача редизайна формулировалась так: создать типографическую систему, которая будет одинаково убедительна в 280px-ширине Twitter-карточки и в полноформатном десктопном лонгриде, сохраняя при этом редакционный характер и узнаваемость бренда.

Шрифтовая система: три уровня

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

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

«Наша цель — чтобы читатель не думал о шрифте. Он должен думать о статье. Типографика работает правильно, когда она невидима.»

— Из интервью арт-директора WaPo, Nieman Reports, 2024

Масштабная шкала: от 11px до 96px

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

Шкала WaPo 2024 (реконструкция по публичным материалам): caption (11px / 12px), meta (13px / 16px), body-sm (15px / 22px), body (17px / 26px), deck (19px / 26px), h4 (21px / 28px), h3 (25px / 30px), h2 (32px / 36px), h1 (44px / 48px), hero (62px / 64px), display (96px / 96px). Между каждым шагом — заметная, но не хаотичная разница.

Адаптация для мобильного: ключевые решения

На мобильных платформах WaPo принял несколько принципиальных решений. Во-первых, минимальный кегль основного текста зафиксирован на 16px — ни при каких условиях текст не уменьшается ниже этого значения (важно для доступности и для iOS). Во-вторых, заголовки получают увеличенный межстрочный интервал на мобильном — пропорция line-height/font-size выше, чем на десктопе, из-за более узких строк.

В-третьих, переключатель размера шрифта (А/А в интерфейсе) позволяет читателю настраивать базовый кегль — все остальные элементы шкалы масштабируются пропорционально. Это системный подход: не просто «увеличить текст», а масштабировать всю типографическую систему.

Что можно взять в работу

  • Трёхуровневое деление шрифтов (дисплейный / текстовый / интерфейсный) актуально для любого контентного продукта.
  • Единая типографическая шкала с именованными токенами упрощает работу команды и обеспечивает консистентность.
  • Пользовательская настройка размера шрифта — не роскошь, а признак зрелого продукта.
  • Шрифты одного суперсемейства (display + text) — надёжный способ добиться визуального единства без потери характера.
Кейс The Atlantic Все кейсы