🔤 Три шрифта на сайте: где грань между стилем и хаосом ❓❓❓
В команде новенький дизайнер и без опыта. Открываю макет, а там… пять разных шрифтов. В заголовке один, в подзаголовке другой, в тексте третий, в кнопках четвертый, в подписях пятый.
Так точно не надо. Сейчас объясню, почему.
📏 Золотое правило: лучше использовать не больше двух-трех шрифтов в проекте. Один шрифт — для заголовков. Один — для основного текста. Третий — опционально, для акцентов или декоративных элементов. Всё. Точка.
Почему не больше? Потому что каждый новый шрифт — это:
- Дополнительный визуальный шум - Нагрузка на страницу
Когда шрифтов пять, глаз не понимает, что важно, а что нет. Сайт превращается в набор из независимых друг от друга блоков.
☑️ Зачем вообще несколько шрифтов?
Один шрифт может всё, но два дают контраст. Контраст — это то, что направляет внимание пользователя:
- Заголовок + текст. Жирный, характерный шрифт для заголовка и спокойный, читаемый — для текста. - Акценты. Курсив или другой шрифт для цитат, выделений, цифр. - Характер бренда. Геометричный гротеск говорит «мы технологичные». Рукописный акцент — «мы душевные и ламповые».
Один шрифт — это как говорить монотонно. Два — это интонация. Пять — это неразборчивый бред сумасшедшего.
⚔️ Как сочетать: контраст, а не конфликт
Главная ошибка — брать два похожих шрифта. Например, два гротеска с почти одинаковыми пропорциями. Они не контрастируют, а конкурируют. Выглядит как будто дизайнер не смог выбрать один.
💎 Рабочие схемы:
- Гротеск + антиква. Заголовок без засечек, текст с засечками или можно наоборот. Классика, которая работает всегда. - Жирный + легкий. Один шрифт в разных начертаниях. Например, Bold для заголовка, Regular для текста. - Декоративный + нейтральный. Рукописный шрифт для одной детали, спокойный гротеск для всего остального.
Главный принцип: шрифты должны быть из разных «миров», но с общей логикой — одинаковые пропорции, похожий ритм, совместимые засечки.
❌ Типикл ошибки:
1. Слишком много шрифтов Пят гарнитур на странице — это не дизайн, это тест на эпилепсию. 2. Шрифты-конкуренты Два похожих гротеска рядом. Глаз не понимает, кто из них главный. 3. Декоративный шрифт в тексте Рукописный шрифт в заголовке — ок. Рукописный шрифт в абзаце на 200 слов — преступление против читаемости. 4. Разные шрифты без системы В одном блоке один шрифт, в другом другой, в третьем третий. Нет логики — нет доверия. 5. Игнорирование кириллицы Красивый латинский шрифт без кириллицы — боль. Не все шрифты поддерживают русский. Проверяйте до верстки, а не после.
💁♂️Что делаю я:
- Использую WOFF2 — самый современный и легкий формат. - Подключаю только нужные начертания. - Ставлю font-display: swap , чтобы текст не исчезал, пока грузится шрифт. - Для системных шрифтов не загружаю ничего вообще.
Если шрифтов три, а начертаний по два на каждый — это уже 6 файлов по 100 КБ. Полмегабайта только на шрифты 🥲
🎯 Итог
Два шрифта — это стандарт. Три — максимум, если третий используется точечно. Пять — это диагноз. Шрифт — это не украшение. Это инструмент. Он направляет внимание, задает тон, помогает читать. Когда шрифтов слишком много, они перестают помогать и начинают мешать.