Типографика: шрифты и их характер

Шрифт — это голос текста. Он говорит ещё до того, как вы прочитали слова.

«Типографика существует, чтобы чтить содержание». — Роберт Брингхерст

Шрифты делятся на крупные семьи. Гротески (sans-serif, без засечек) — чистые и нейтральные, по умолчанию для экранов и приложений. Антиквы (serif, с засечками) — классические, «книжные», добавляют солидности. Есть ещё моноширинные (для кода) и акцидентные (декоративные, только для крупных заголовков).

Характер шрифта

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

  СЕМЬИ ШРИФТОВ

  Гротеск (sans)   Aa Bb  — чисто, экранно
  Антиква (serif)  Aa Bb  — классично, книжно
  Моно             Aa Bb  — код, цифры
  Акцидентный      Aa Bb  — только крупно

Правило двух шрифтов

Новичков тянет смешать пять шрифтов «для разнообразия» — выходит хаос. Опытные берут один-два: например, антикву для заголовков и гротеск для текста, либо вовсе один шрифт с разными начертаниями (regular, bold, light). Разнообразие создаётся начертаниями и размером, а не количеством гарнитур.

  ИЕРАРХИЯ ОДНИМ ШРИФТОМ

  Заголовок      bold,  крупно
  Подзаголовок   medium, средне
  Основной текст regular, базово
  Подпись        regular, мелко, серее

Как делают ПЛОХО

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

Как делают ХОРОШО

Один качественный гротеск во всех начертаниях. Заголовки крупные и жирные, текст обычный, подписи мельче и чуть светлее. Чисто, спокойно, профессионально.

В CSS базовый набор задают так:

body {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
h1 { font-weight: 700; }
.caption { font-size: 13px; color: #6b7280; }

Чек-лист

• На странице не больше двух гарнитур.
• Иерархия строится начертанием и размером.
• Характер шрифта подходит задаче продукта.
• Декоративные шрифты только в крупных заголовках.

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

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

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

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

Итог

Шрифт задаёт голос интерфейса. Возьмите один-два, играйте начертаниями — и текст зазвучит ровно и профессионально.

Шрифт задаёт голос интерфейса ещё до первого прочитанного слова. Возьмите один-два, играйте начертаниями и размером — и текст зазвучит ровно, спокойно и профессионально.