🔤 Три шрифта на сайте: где грань между стилем и хаосом ❓❓❓

В команде новенький дизайнер и без опыта. Открываю макет, а там… пять разных шрифтов. В заголовке один, в подзаголовке другой, в тексте третий, в кнопках четвертый, в подписях пятый.

Так точно не надо. Сейчас объясню, почему.

📏 Золотое правило: лучше использовать не больше двух-трех шрифтов в проекте. Один шрифт — для заголовков. Один — для основного текста. Третий — опционально, для акцентов или декоративных элементов. Всё. Точка.

Почему не больше? Потому что каждый новый шрифт — это:

- Дополнительный визуальный шум - Нагрузка на страницу

Когда шрифтов пять, глаз не понимает, что важно, а что нет. Сайт превращается в набор из независимых друг от друга блоков.

☑️ Зачем вообще несколько шрифтов?

Один шрифт может всё, но два дают контраст. Контраст — это то, что направляет внимание пользователя:

- Заголовок + текст. Жирный, характерный шрифт для заголовка и спокойный, читаемый — для текста. - Акценты. Курсив или другой шрифт для цитат, выделений, цифр. - Характер бренда. Геометричный гротеск говорит «мы технологичные». Рукописный акцент — «мы душевные и ламповые».

Один шрифт — это как говорить монотонно. Два — это интонация. Пять — это неразборчивый бред сумасшедшего.

⚔️ Как сочетать: контраст, а не конфликт

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

💎 Рабочие схемы:

- Гротеск + антиква. Заголовок без засечек, текст с засечками или можно наоборот. Классика, которая работает всегда. - Жирный + легкий. Один шрифт в разных начертаниях. Например, Bold для заголовка, Regular для текста. - Декоративный + нейтральный. Рукописный  шрифт для одной детали, спокойный гротеск для всего остального.

Главный принцип: шрифты должны быть из разных «миров», но с общей логикой — одинаковые пропорции, похожий ритм, совместимые засечки.

Типикл ошибки:

1. Слишком много шрифтов Пят гарнитур на странице — это не дизайн, это тест на эпилепсию. 2. Шрифты-конкуренты Два похожих гротеска рядом. Глаз не понимает, кто из них главный. 3. Декоративный шрифт в тексте Рукописный шрифт в заголовке — ок. Рукописный шрифт в абзаце на 200 слов — преступление против читаемости. 4. Разные шрифты без системы В одном блоке один шрифт, в другом другой, в третьем третий. Нет логики — нет доверия. 5. Игнорирование кириллицы Красивый латинский шрифт без кириллицы — боль. Не все шрифты поддерживают русский. Проверяйте до верстки, а не после.

💁‍♂️Что делаю я:

- Использую WOFF2 — самый современный и легкий формат. - Подключаю только нужные начертания. - Ставлю  font-display: swap , чтобы текст не исчезал, пока грузится шрифт. - Для системных шрифтов не загружаю ничего вообще.

Если шрифтов три, а начертаний по два на каждый — это уже 6 файлов по 100 КБ. Полмегабайта только на шрифты 🥲

🎯 Итог

Два шрифта — это стандарт. Три — максимум, если третий используется точечно. Пять — это диагноз. Шрифт — это не украшение. Это инструмент. Он направляет внимание, задает тон, помогает читать. Когда шрифтов слишком много, они перестают помогать и начинают мешать.