Представьте: вы заходите в ресторан. На одном столах — хрусталь, тяжелые столовые приборы, льняные салфетки. На других — пластиковые тарелки и одноразовые вилки. Вы еще не пробовали еду, но уже понимаете, где будет дорого и вкусно, а где — столовая у вокзала.

В веб-дизайне шрифты выполняют ту же роль. Пользователь еще не прочитал ни слова, но уже составил мнение о вашем бренде — по тому, как написан заголовок.

В этой статье я расскажу, как выбирать шрифты для Tilda, чтобы сайт выглядел дорого, стильно и вызывал доверие. Без воды, с конкретными примерами и настройками.

Почему типографика решает всё

Исследования подтверждают: 95% информации на сайте — это текст. Дизайн — это не только картинки, это прежде всего то, как организован текст.

Хорошая типографика:

• Создает иерархию — глаз сразу понимает, что важно, а что второстепенно
• Формирует настроение — строгие шрифты внушают доверие, рукописные — уют и близость
• Влияет на читаемость — если текст неудобно читать, пользователь уйдет
• Работает на бренд — запоминающийся шрифт становится частью айдентики

В Tilda, где дизайн собирается из готовых блоков, именно шрифты часто становятся тем инструментом, который отличает "дорогой" сайт от шаблонного.

Поймите характер вашего бренда

Прежде чем открывать каталог шрифтов, ответьте на вопрос: кто вы?

Характер бренда

• Солидный, надежный (банки, юристы, консалтинг)
• Современный, технологичный (IT, стартапы)
• Творческий, неформальный, рукописный
• Уютный, душевный (кафе, бьюти-услуги, блоги)

Какие шрифты подходят

• Классические гротески, шрифты с засечками
• Геометрические гротески
• Акцидентные, рукописные, контрастные
• Скругленные гротески, мягкие шрифты

Примеры шрифтов

• Roboto, PT Serif, Georgia
• Montserrat, Raleway, Gilroy
• Cormorant, Playfair Display, PF Agora Slab
• Comfortaa, Nunito, Proxima Nova

Совет: Не пытайтесь быть "всем". Если ваш бренд — серьезная юридическая компания, не ставьте рукописный шрифт в заголовки. Это создаст когнитивный диссонанс у клиента.

Правило двух шрифтов (максимум трех)

Дорогие сайты редко используют больше двух-трех шрифтов. Обилие разных гарнитур — признак "самодельщины" и визуального шума.

Золотое правило:

• Один шрифт для заголовков — акцидентный, выразительный
• Один шрифт для основного текста — максимально читаемый, нейтральный
• Возможно, третий для акцентов — только если действительно нужно

Как подобрать пару:

• Контрастный метод: рубленый (гротеск) + с засечками (антиква). Это классика, которая всегда работает. Например, Montserrat (заголовки) + PT Serif (текст).
• Семейный метод: разные начертания одного семейства. Например, Open Sans Light для заголовков, Open Sans Regular для текста. Это безопасно и стильно.
• Родственный метод: разные шрифты одной эпохи или одного дизайнера. Требует опыта, но выглядит интересно.

Где смотреть готовые пары: FontPair, Typ.io

Настройте размеры и пропорции

Даже идеально подобранные шрифты будут выглядеть дешево, если у них неправильные размеры.

Что важно настроить в Tilda:

Заголовки

• Самый главный заголовок (H1) — крупный, заметный, часто с большим интерлиньяжем (1.2–1.4)
• Подзаголовки (H2) — меньше H1, но заметно больше текста
• Заголовки третьего уровня (H3) — ближе к тексту, но жирнее

Примерные размеры (в пикселях):

• H1: 48–72 px (на мобильных 32–40 px)
• H2: 36–48 px (на мобильных 24–32 px)
• H3: 24–30 px (на мобильных 18–24 px)
• Основной текст: 16–18 px (на мобильных 14–16 px)

Длина строки

Строка не должна быть слишком длинной — глаза устают. Идеально: 50–75 символов на строку (включая пробелы).

В Tilda регулируйте ширину колонки или ставьте текст в 2 колонки для длинных материалов.

Интерлиньяж (межстрочный интервал)

• Для текста: 1.4–1.6 от размера шрифта
• Для заголовков: 1.1–1.3 (заголовки могут быть плотнее)

Контраст

Самые частые ошибки:

• Серый текст на сером фоне
• Тонкий шрифт на пестром фоне
• Белый текст на яркой картинке без затемнения

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

Используйте контраст начертаний

В дорогом дизайне заголовки не пишут просто "жирным" шрифтом. Играйте с контрастом:

• Тонкий (Light/Thin) + Жирный (Bold/ExtraBold)
• Прямой + Курсив
• Прописные + Строчные

Пример удачного приема:

Заголовок написан тонким светлым шрифтом, а ключевое слово — жирным и крупным. Это создает динамику и сразу привлекает внимание к главному.

В Tilda это легко настроить через стилизацию отдельных слов в текстовом редакторе. Или почитать нашу статью о психологии цвета в дизайне.

Адаптируйте под мобильные

На телефоне все шрифты должны быть крупнее и воздушнее, чем вы думаете.

Проверьте на мобильных:

• Заголовки не должны ломаться — проверьте, чтобы длинные слова переносились нормально
• Кнопки должны быть крупными — текст внутри кнопок не менее 16 px
• Интерлиньяж на мобильных увеличьте — читать мелкий текст с большим межстрочным расстоянием легче

В Tilda для мобильных можно отдельно настраивать размер шрифта в каждом блоке (вкладка "Настройки отображения" → "Мобильные").

Создайте иерархию на странице

Глаз пользователя должен скользить по странице в правильном порядке. Типографика — главный инструмент для создания этого пути.

Как строится иерархия:

• Самый крупный элемент — заголовок. Он привлекает внимание первым
• Чуть меньше — подзаголовок или ключевое преимущество
• Основной текст — читается, если заинтересовал заголовок
• Микро-текст — подписи, кнопки, мелкий шрифт

Визуальный прием: сделайте заголовок очень крупным, первый абзац выделите увеличенным кеглем (intro-text), а основной текст оставьте стандартным. Это выглядит современно и дорого.

Какие шрифты использовать в Tilda

Tilda предлагает несколько категорий шрифтов. Вот проверенные варианты, которые всегда выглядят хорошо:

Для заголовков (акцидентные)

• Cormorant Garamond — благородный, с засечками, идеален для премиум-проектов
• Playfair Display — контрастный, элегантный
• PF Agora Slab — брутальный, но стильный, с засечками-брусками
• Raleway — геометричный, тонкий, современный
• Montserrat Alternates — необычные формы, для творческих проектов

Для текста (читаемые)

• PT Sans / PT Serif — идеальная русская пара, создана специально для кириллицы
• Roboto — нейтральный, очень читаемый, техничный
• Open Sans — классика, подходит почти для всего
• Proxima Nova — платный, но очень красивый и профессиональный
• Graphik — еще один платный фаворит среди дизайнеров

Бесплатные кириллические (которые реально работают)

• Golos Text — современный, от дизайнеров Яндекса
• Montserrat — есть отличная кириллица
• Cormorant — роскошная кириллическая версия
• PT Root UI — чистый, техничный, отличный для интерфейсов

Тонкие настройки в Tilda

В Tilda есть несколько функций, которые помогают сделать типографику дороже:

Кернинг и трекинг

В настройках текстового блока можно менять расстояние между буквами. Для заголовков часто делают разреженный трекинг (буквы чуть дальше друг от друга) — это выглядит премиально. Для текста трекинг лучше оставить стандартным.

Цветовые акценты

Выделяйте ключевые слова цветом. Но не кричащим, а связанным с вашей палитрой. Один-два акцента на страницу — достаточно.

Капс и маленькие заглавные

Заголовок, написанный капсом, выглядит строже и значимее. Но не злоупотребляйте — текст КАПСОМ читается медленнее.

Линейки и разделители

Тонкие линии между смысловыми блоками помогают структурировать информацию и создают "воздух".

Ошибки, которые выдают дешевый сайт

• Слишком много шрифтов — если у вас на странице 5+ гарнитур, это хаос
• Нечитаемый текст на фоне — особенно модно сейчас ставить текст на движущееся видео
• Слишком мелкий шрифт — экономия на размере = потеря клиентов
• Отсутствие иерархии — когда все заголовки одного размера и веса
• Использование системных шрифтов по умолчанию — Arial и Times New Romn выглядят как "сайт 2005 года"
• Слишком длинные строки — читать такой текст физически тяжело

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