Типографика на сайте — это не эстетика, а инструмент коммуникации: размер и вес шрифта расставляют иерархию, межстрочный интервал влияет на читаемость, а выбор гарнитуры формирует восприятие бренда. Правильная типографика держит внимание читателя и ведёт его по странице без усилий.
Однажды нам прислали на доработку сайт юридической фирмы, набранный шрифтом Comic Sans — тем, которым подписывают детские открытки. Услуги серьёзные, цены солидные, а владелец недоумевал, почему сайт «не внушает доверия». Всё объяснение было в шрифте. Это и есть типографика как инструмент: она говорит за вас ещё до того, как клиент прочитал первое слово.
Что шрифт делает на самом деле
Шрифт — первый невербальный сигнал о вашем бренде. Раньше любого текста, раньше логотипа, раньше фото. Мозг за 50 миллисекунд считывает «серьёзно или нет», «дорого или дёшево», «современно или устарело».
Это не магия. Это десятилетия культурных ассоциаций. Times New Roman = академия. Helvetica = технологии. Serif с засечками = традиции и надёжность. Рукописный = творчество и индивидуальность.
Основные категории и когда их использовать
Четыре семейства закрывают почти все задачи веба. Коротко — кто есть кто:
| Категория | Ассоциации | Кому подходит | Где не место |
|---|---|---|---|
| Serif | традиция, авторитет | медиа, юристы, финансы, luxury | tech, молодёжь |
| Sans-serif | современность, чистота | почти везде (универсал) | — |
| Display | характер, запоминаемость | только заголовки | основной текст |
| Monospace | технологичность, код | IT, акценты, метаданные | длинный текст |
Serif (с засечками): Georgia, Playfair Display, Merriweather
Ассоциации: традиция, авторитет, надёжность, элегантность. Подходит: медиа, юридические услуги, финансы, издательства, luxury. Не подходит: IT-стартапы, молодёжные бренды, tech.
Sans-serif (без засечек): Inter, Montserrat, Roboto, Onest
Ассоциации: современность, чистота, функциональность. Самая универсальная категория для веба. Подходит почти везде. Мы сами используем Onest в большинстве наших проектов.
Display (декоративные): Bebas Neue, Druk, кастомные
Только для заголовков. Никогда — для основного текста. Создают личность и запоминаемость, но убивают читаемость в маленьких размерах.
Monospace: JetBrains Mono, Fira Code
IT, код, технологии. Работает как акцент, создаёт «хакерскую» атмосферу. Мы используем монопространственный для технических деталей и метаданных.
Пять правил типографики для веба
1. Не больше двух шрифтов. Заголовок + текст. Иногда один. Три — почти всегда перебор.
2. Размер основного текста — минимум 16px. 14px — это 2010 год. Мобильные читают в движении.
3. Межстрочный интервал (line-height) — 1.5–1.75 для текста. Плотный текст читается плохо. Воздух — это часть дизайна.
4. Контраст. Чёрный на белом, тёмный на светлом. Серый-на-сером — это ловушка для дизайнеров, но катастрофа для пользователей 40+.
5. Иерархия. H1 → H2 → H3 → текст. Пользователь должен видеть структуру, не читая содержимое.
Шрифты и Google
Google Fonts — бесплатно и просто. Но у него есть проблема: все вокруг тоже используют Roboto и Open Sans. Если хотите отличаться — смотрите на Variable Fonts (один файл, гибкие начертания) или платные шрифты от Type Foundry.
Технически: всегда загружайте шрифт с атрибутом display=optional или swap — это предотвращает FOUT (Flash of Unstyled Text) и ускоряет первую отрисовку.
Та самая юридическая фирма из примера в начале: смени она Comic Sans на Cormorant Garamond для заголовков и Inter для текста — и сайт читался бы солидно, без единого слова о «надёжности». Хорошая типографика работает молча, но ощутимо.
Как делаем мы. Шрифт подбираем под характер бренда и нишу, а не «по красоте», — это часть дизайна под бренд, а не отдельная услуга. В большинстве проектов это пара «выразительный заголовочный + спокойный читаемый текстовый» — и строгое соблюдение пяти правил выше.
Если коротко
- Шрифт — первый невербальный сигнал о бренде: мозг считывает «дорого/дёшево, серьёзно/нет» за 50 мс.
- Категории: Serif — традиция, Sans-serif — универсал, Display — только заголовки, Monospace — tech-акцент.
- Пять правил: не больше двух шрифтов, текст ≥16px, line-height 1.5–1.75, контраст, видимая иерархия.
- Google Fonts — нормальная база, но популярные делают сайт «как у всех»; подключайте с font-display: swap.
- Хорошая типографика работает молча: создаёт доверие без единого слова о «надёжности».
Частые вопросы
Сколько шрифтов можно использовать на сайте?
Максимум два: один для заголовков, один для текста. Часто хватает и одного с разными начертаниями. Три и больше — почти всегда визуальный шум.
Какой размер текста выбрать?
Минимум 16px для основного текста. Меньше — мелко и заставляет щуриться, особенно на мобильных и у аудитории 40+. Заголовки — крупнее по иерархии.
Бесплатные Google Fonts — это плохо?
Нет, это нормальная база. Минус один: популярные шрифты (Roboto, Open Sans) встречаются повсюду, и сайт выглядит «как у всех». Хотите отличаться — Variable Fonts или платные гарнитуры.
Влияет ли шрифт на скорость сайта?
Да. Каждое начертание — отдельный файл. Ограничьтесь 2–3 начертаниями и подключайте с font-display: swap или optional, чтобы текст не «прыгал» при загрузке.
Можно ли подобрать шрифт самому?
Базово — да: возьмите проверенный sans-serif для текста и контрастный заголовочный. Тонкая настройка (иерархия, интервалы, пары) — работа дизайнера, но «не сломать» по простым правилам реально и самому.
