Руководство по сочетанию шрифтов: выбор лучших сочетаний шрифтов для вашего веб-сайта

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

Однако одна из областей веб-дизайна, о которой вы, возможно, не уделяете достаточно времени, - это сочетание шрифтов.

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

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

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

Я уверен, что вы сталкивались с подобными сценариями в своих путешествиях по сети:

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

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

В нашем руководстве по лучшим шрифтам для веб-сайтов мы обобщили ключевые характеристики, на которые следует обратить внимание:

1. Разборчивость

Одна из причин, по которой засечки широко используются в литературе и газетах, заключается в их удобочитаемости. Засечки (ножки) вверху и внизу символов помогают читателям различать похожие на вид символы, такие как прописная «I» и строчная «l», поэтому нет замедления из-за проблем с пониманием.

Если вы разрабатываете страницу с более чем 600 словами, было бы неплохо использовать засечки в основном тексте именно по этой причине.

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

2. Читаемость

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

Поскольку с годами разрешение экрана значительно улучшилось, типографы смогли создавать шрифты в обоих стилях, которые одинаково удобочитаемы. Как объясняет NNG:

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

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

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

3. Комфорт

Есть некоторые веб-дизайнеры, которые не хотят использовать шрифты, такие как Helvetica или Times New Roman, из-за того, насколько они часто используются. Однако выбор и сочетание шрифтов не о том, как вы относитесь к типографике вашего сайта, а о том, насколько удобно вашим посетителям читать его.

Так что нет ничего постыдного в выборе классики, если она выполняет свою работу.

4. Стиль

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

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

Не упускайте из виду эти правила, переходя к следующему этапу проектирования с помощью типографики: