Руководство по сочетанию шрифтов для веб-дизайнеров + 30 потрясающих примеров!

Опубликовано: 2021-01-27

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

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

Тем не менее, сочетание шрифтов может быть сложным. В конце концов, вы добавите в микс еще один уровень сложности. Но, если все сделано успешно, это может вывести ваши проекты на совершенно новый уровень.

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

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

Так что, как и в отношениях, речь идет не о поиске двух одинаковых шрифтов или двух противоположных. Все дело в балансе и дополнении друг друга. Чтобы «шрифтовая пара» добилась успеха, им нужно работать как одна команда, чтобы представлять ваш бренд и создавать ощущение гармонии, текучести и, самое главное, согласованности.

Как соединить шрифты

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

1. Создайте желаемое ощущение

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

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

2. Назначьте роли

Каждый выбранный вами шрифт будет играть определенную роль на вашем веб-сайте, и вы отвечаете за процесс кастинга. Скорее всего, шрифт, который отлично смотрится на больших заголовках, не будет работать так же хорошо на мелком тексте. Итак, вы должны подумать о «ролях» (стилях типографики), которые вам понадобятся (такие как: основной текст, текст подписи, большие заголовки, подзаголовки и т. д.) и выбрать шрифты с учетом этого.

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

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

3. Читабельность и разборчивость

Независимо от того, какой стиль и настроение вы выберете для своего бренда, наличие читаемого и разборчивого текста на вашем сайте является обязательным.

Удобочитаемость — это расположение шрифтов и слов, позволяющее сделать письменный контент простым и легко читаемым. Это особенно важно для больших блоков текста. Шрифты с засечками и без засечек, несомненно, являются лучшим вариантом в этом случае. С другой стороны, курсивные или плоские шрифты могут оказаться слишком трудными для чтения. Для заголовков вы можете уделить немного больше внимания элементу красоты вашего предполагаемого шрифта. Но для абзацев с большими кусками текста удобочитаемость всегда на первом месте.

Разборчивость относится к тому, насколько легко отличить буквы друг от друга (например, буквы «я» и «я»). Это важно как для большого текста, такого как заголовки, так и для более мелкого. Итак, убедитесь, что шрифты, которые вы выбираете, легко читаются и разборчивы во всех размерах, которые вы будете их использовать, а также в заглавных буквах, если вы планируете использовать заголовки на своем веб-сайте.

4. Не бойтесь классики

Многие веб-дизайнеры (в том числе и я, должен признаться) неохотно используют классические шрифты, такие как Helvetica или Baskerville, из-за их чрезмерного использования. Однако выбор шрифта и его сочетание не зависят от того, как вы относитесь к типографике вашего веб-сайта. Речь идет о том, что чувствуют пользователи, и об их опыте чтения.

Так что нет ничего постыдного в выборе одного из классиков, если они справятся со своей задачей!

Правила сочетания шрифтов

Вот несколько простых, но важных правил, которым нужно следовать при сочетании шрифтов:

Правило №1: Не используйте более трех шрифтов на своем сайте.

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

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

Правило № 2: Контраст — это хорошо, конфликт — это плохо

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

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

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

Правило № 3: совершенно нормально объединяться в пары внутри суперсемьи.

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

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

Правило № 4: Убедитесь, что ваши шрифты имеют правильный размер и форму

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

Fontjoy — это полезный инструмент, который поможет вам проверить, какой контраст вы хотите между стилями типографики. Это также дает вам быстрый способ предварительного просмотра того, как ваши шрифты будут выглядеть в разных размерах.