Типографика как визуальная идентичность
Мы разобрали фундаментальные принципы построения гарнитур. Узнайте, как кегль, трекинг и кривые Безье влияют на восприятие вашего бренда и читабельность интерфейсов.
Метрика текста: кегль, трекинг и интерлиньяж
Типографика — это не только выбор гарнитуры. Это математика воздуха и пространства. Три ключевых параметра определяют, будет ли текст «дышать» или превратится в визуальный шум.
Кегль (Size)
Размер шрифта в пунктах (pt) или пикселях (px). Для основного текста в вебе золотой стандарт — 16px. Для заголовков мы используем модульную шкалу (например, Minor Third), чтобы сохранить визуальную иерархию.
Интерлиньяж (Line-height)
Межстрочный интервал. Идеальное значение для чтения — 1.4–1.6 от размера кегля. Слишком плотный текст утомляет глаза, слишком разреженный заставляет взгляд «прыгать» при поиске начала следующей строки.
Трекинг (Tracking)
Общее расстояние между группами символов. Для заголовков часто используется отрицательный трекинг (-0.02em) для создания плотности и характера. Для основного текста — нейтральный или слегка положительный.
Важность деталей
Магия кривых Безье
Почему один шрифт выглядит как «люкс», а другой — как «дешевка»? Ответ кроется в математике векторов.
Каждый глиф в цифровом шрифте строится из кривых Безье. Качество этих кривых определяет, как шрифт рендерится на экране. Плохо выстроенные узлы создают артефакты при масштабировании и смазывают контуры при печати.
В студии «Глифли» мы вручную выверяем каждый узел (node). Мы следим за:
- — Симметрии осей: чтобы вертикальные и горизонтальные линии не «уезжали».
- — Оптической коррекции: кривые должны казаться прямыми глазу, даже если математически они изогнуты.
- — Хинтинга (Hinting): инструкций для рендеринга на низких разрешениях (особенно важно для Windows).
Советы по выбору шрифта для веба
Системные шрифты (Arial, Roboto, San Francisco) нейтральны и функциональны, но они не несут смысловой нагрузки. Кастомный шрифт или уникальная комбинация коммерческих гарнитур создает узнаваемость и эмоциональную связь с аудиторией.
Используйте формат WOFF2, который обеспечивает лучшее сжатие. Применяйте свойство `font-display: swap`, чтобы текст оставался видимым во время загрузки шрифта (используя фолбэк). Избегайте загрузки всех начертаний сразу — подключайте только те, которые используются на странице.
Мы рекомендуем не более двух семейств: одно для заголовков (с характером, например, антиква) и одно для основного текста (читаемый гротеск). Это создает контраст иерархии, не перегружая визуальный ритм.
Нужна помощь с типографикой?
Мы поможем выбрать идеальную пару шрифтов или разработаем уникальную гарнитуру для вашего бренда с нуля.
Связаться с нами