I'm available for business trips to other cities for projects lasting a month or longer.
Как подобрать шрифты для сайта
Этот вопрос задал пользователь Tilda. Объясняем, как выбирать, настраивать и сочетать шрифты в дизайне веб-сайтов. А ещё показываем удачные примеры.
Спрашивает Максим Ивашкин
Привет! Я маркетолог, делаю сайт для небольшого онлайн-сервиса. По контенту всё ок, но залип на шрифтах: не понимаю, как подобрать пару для заголовков и основного текста, чтобы сайт выглядел цельно и читался легко и на компе, и на телефоне. Сейчас пробовал стандартные варианты из Гугл Фонтс, но заголовки то слишком «кричат», то теряются.
С чего лучше начать и на что смотреть, когда выбираешь пару? Например, подойдёт ли вариант «один шрифт для заголовков, другой — для текста»? Или лучше одним шрифтом обойтись разными начертаниями? Было бы классно увидеть 2−3 конкретных сочетания с кириллицей и какие-то простые настройки по размерам и межстрочным для десктопа и мобилки, чтобы сразу применить.
Отвечает Таня Струбалина
Дизайнер Tilda
Привет! Чтобы заголовки и основной текст выглядели гармонично, важно соблюдать между ними контраст в размере и насыщенности шрифта. Если заголовок слишком мелкий и тонкий относительного основного текста, он потеряется на его фоне.
Также стоит уделить внимание интерлиньяжу (межстрочному интервалу): чем крупнее шрифт и короче строка, тем меньше должен быть интерлиньяж. Ниже приведены примерные значения, от которых можно отталкиваться. Эти параметры — ориентировочные. Их можно корректировать в зависимости от шрифта, объёма текста и устройства, на котором отображается контент.
Основной текст: 16 px, интерлиньяж — 120–160%
Заголовок H3: 32–42 px, интерлиньяж — 110–120%
Заголовок H2: 48–60 px, интерлиньяж — 100–120%
Заголовок H1: 64–92 px, интерлиньяж— 90–105%
Теперь о сочетании шрифтов
Можно использовать один для всего текста — это безопасный и универсальный вариант. Если хочется разнообразия, допустимо сочетать до трёх разных шрифтов. Хороший приём — использовать варианты из одной гарнитуры, например Manrope Bold для заголовков и Manrope Regular для основного текста.
Можно использовать один для всего текста — это безопасный и универсальный вариант. Если хочется разнообразия, допустимо сочетать до трёх разных шрифтов. Хороший приём — использовать варианты из одной гарнитуры, например Manrope Bold для заголовков и Manrope Regular для основного текста.
Если хочется выбрать разные гарнитуры, то важно следовать правилу: шрифты должны отличаться, создавая контраст, но при этом иметь общие визуальные черты.
Вот несколько примеров:
Нужен совет эксперта?
Спрашивайте! Поможем разобраться с любыми задачами, если они касаются веб-сайтов, дизайна, маркетинга, фриланса или предпринимательства.
Tilda Education
