Что такое типографическая система
Типографическая система — это организованный набор правил, определяющих, как шрифты, размеры, расстояния и другие параметры взаимодействуют внутри дизайн-проекта. Это не просто выбор красивой гарнитуры — это архитектура визуальной коммуникации.
Грамотно построенная система обеспечивает три ключевых качества: читаемость (ability to read), разборчивость (legibility) и последовательность (consistency). Без системного подхода даже самые красивые шрифты создают визуальный хаос.
«Типографика — это голос страницы. Системное мышление — это партитура, по которой этот голос звучит.»
— Роберт Бринхёрст, «Основы стиля в типографике»Компоненты типографической системы
1. Шрифтовая палитра
Профессиональная система, как правило, содержит не более 2–3 гарнитур: дисплейную (для заголовков), текстовую (для основного контента) и опционально моноширинную (для кода, данных или акцентов). Расширение палитры без системной логики ведёт к фрагментации восприятия.
2. Шкала размеров
Размеры шрифтов должны следовать математической прогрессии, а не выбираться произвольно. Наиболее распространённые основания: золотое сечение (×1.618), большая терция (×1.25), малая терция (×1.2) и другие музыкальные интервалы. Инструмент Typescale.com позволяет мгновенно визуализировать любую шкалу.
3. Межстрочное расстояние
Правило большого пальца: межстрочное расстояние для основного текста должно составлять 120–145% от размера кегля. Для заголовков — 100–115%. Слишком большой интерлиньяж разрушает связность, слишком малый — создаёт визуальную тесноту.
4. Метрическая система
Все отступы, поля и пространственные отношения должны быть деривативами единого базового модуля. Популярный подход в UI — 8pt-сетка, где все метрики кратны 8 пикселям.
Примеры сильных типографических систем
| Проект | Основная гарнитура | Принцип шкалы | Контекст |
|---|---|---|---|
| IBM Design Language | IBM Plex | Модульная 8pt | Enterprise UI |
| NYT Digital | NYT Cheltenham | Редакционная | Онлайн-медиа |
| Apple HIG | SF Pro / SF Compact | Dynamic Type | Мобильные ОС |
| Material Design 3 | Roboto | Typescale | Android UI |
| Stripe Docs | Sohne | Золотое сечение | Документация |
Как построить собственную систему
Начните с определения контекста: где будет существовать ваш текст — на экране, в печати, или в обеих средах? Это определит требования к размерам, интерлиньяжу и гарнитурам.
Затем выберите основную гарнитуру, исходя из её технических характеристик: x-height, counter shapes, weight contrast. Для длинных текстов на экране предпочтительны шрифты с большим x-height и открытыми встречными штрихами.
Практические руководства