Как выбрать шрифт для сайта если ты не дизайнер

Введение

Изучением шрифтов занимается наука, которая носит название типографика. Выбор шрифта для будущего сайта — один из самых важных этапов в проектировании дизайна. От того, как Вы подадите текстовую информацию на сайте, насколько она будет наглядна, во в многом зависит её восприятие. Даже, если на Вашей странице только один заголовок, Вы все равно будете иметь дело со шрифтами. 
Для того, было проще ориентироваться в шрифтах при прочтении данного материала, рекомендуем в параллельной вкладке открыть ресурс https://fonts.google.com/. Это очень полезный сервис от  Google, где Вы сможете увидеть, как выглядят все шрифты, которые упоминаются в этой статье.

Что такое шрифты и зачем их нужно сочетать?

Шрифт представляет собой набор букв с начертанием в едином стиле. Шрифт может быть создан на бумаге или в электронном виде, например, в иллюстраторе. Электронные шрифты оптимизируют и после этого они проходят многократные тестирования на разных носителях.Для придания сайту креативного вида необходимо правильно подобрать шрифтовые композиции (сочетания используемых шрифтов). Определенных жестких правил сочетания шрифтов различных типов не существует. Однако стоит придерживаться некоторых рекомендаций, чтобы избежать распространенных ошибок и сделать процесс выбора удачных сочетаний менее утомительным. Одним из самых популярных приемов является комбинирование шрифта с засечками и без них. Например, можно создать такую классическую комбинацию: использовать для заголовка прямой, строгий шрифт, при этом, для основного текста применить шрифтом с засечками. Важно понимать, что рубленые шрифты могут отличаться друг от друга характером, это стоит учитывать при выборе. Использовать для написания легкого или творческого заголовка строгий стиль, например, Trade Gothic вполне уместно. Важное информационное объявление написанное легким и колоритным шрифтом Bell Gothic может потерять свою весомость. Сочетание на одной странице таких разнообразных по характеру шрифтов будет вызывать подсознательный диссонанс у читателя. В качестве удачного примера обратите внимание на сочетание шрифтов Sabon и Trade Gothic вместе они смотрятся очень органично.

Сочетание шрифтов Sabon и Trade Gothic
Сочетание шрифтов Sabon и Trade Gothic

Одной из самых распространенных ошибок, является неправильный выбор или смешивание настроения шрифтов, поскольку это отвлекает от содержания текста. Примером неудачного сочетания можно считать комбинацию шрифтов Franklin Gothic Bold и Souvenir. Наиболее интересно и гармонично воспринимается сочетание ярких, динамичных шрифтов с нейтральными, в качестве примера можно привести: Caslon и Old style. Также следует избегать сочетаний слишком контрастных шрифтов, таких как Antique Olive Nord и Garamond Narrow. Получится диссонанс, который может испортить весь дизайн и не донесет до пользователя суть текста.

Не самое удачное сочетание шрифтов Franklin Gothic Bold и Souveni
Не самое удачное сочетание шрифтов Franklin Gothic Bold и Souveni


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

Структурируйте текст

Еще одним приемом, который поможет скомбинировать шрифты, является присвоение им определенных ролей, не забывая, при этом, про сочетание рубленых шрифтов и с засечками. Элементы текста (заголовки, подзаголовки, абзацы) должны быть распределены по их иерархии.  Шрифты разной жирности помогут Вам создать создать порядок и контраст. Текст написанный шрифтами с различной тональностью воспринимается гораздо легче, в нем проще расставить смысловые акценты. Попробуйте посмотреть на страницу текста боковым зрением. При таком взгляде прочитать текст не удастся, но можно заметить части, которые формируют визуальную иерархию на странице. Т.е. какие то куски текста будут видны в первую очередь, а что-то уходить на второй план. Это способ очень полезен при оценке наглядности главной страницы сайта. Очень часто из-за обилия графики, заголовков и текста главные элементы просто теряются из вида.Тональность текста во многом определяет очередность передачи мысли повествования. Чтобы установить иерархию и  разнообразить тональность в типографике рекомендуется применять шрифты разных размеров и цветов. Этот же прием поможет контрасту между используемыми шрифтами. Используя эти приемы, можно легко управлять взглядом и вниманием читателя, фокусируя его сначала на заголовке, а потом на основном тексте.

На что обращать внимание при выборе шрифтов?

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

  • Цели сайта или страницы;
  • Аудиторию;
  • Виды шрифтов;
  • Размеры шрифтов;
  • Создание типографического стайлгайда (список различных шрифтов их размер и жирность для каждого элемента страницы).


С помощью шрифтов происходит коммуникация дизайнера и посетителя сайта. Важно понять цель дизайна и определить характер  информации, которую необходимо донести. Типографика поможет создать нужное настроение  и подчеркнуть стиль.Если речь идет о приветственной иллюстрированной страничке с обилием графики, то при выборе шрифта лучше выбирать тот, который будет гармонировать со стилем иллюстрации. Если в лендинге основную роль играют иллюстрации, то лучше использовать простые шрифты, которые не будут отвлекать от изображений и подчеркнут их ключевой смысл. Если главное — это содержание заголовка, то шрифт должен доминировать над картинкой. Здесь Вам поможет прищуренный боковой взгляд, о котором говорилось выше. После определения цели дизайна, следует обратить внимание на аудиторию и попробовать составить её обобщенный портрет, возможно стоит выделить несколько групп. Культурный уровень и возраст предполагаемой аудитории, очень важный показатель при выборе группы шрифтов. Наглядный пример —  текст предназначенный для детей младших классов. Для этой задачи лучше всего обратить внимание на крупны шрифты с хорошо различимыми буквами, например, Sassoon Primary.

Используйте сервис Google Fonts

Google Fonts — великолепный инструмент для проработки комбинации шрифтов для Вашего сайта. Библиотека сервиса насчитывает около 800 различных шрифтов, которые есть в свободном доступе. Интерфейс прост в использовании и помогает оценить визуально сочетаемость шрифтов в различных условиях при заданном размере, тональности и цвете.

Интерфейс сервиса Google Fonts
Интерфейс сервиса Google Fonts

Сервис Google Fonts был запущен в 2010 году и постоянно обновляется, дорабатывается. Многие шрифты из коллекции Google Fonts выпускаются под лицензией SIL Open Font License. Если Вы хотите понять, какие шрифты используются на понравившемся сайте, можно использовать расширение для Chrome — WhatTheFont. На сайте сервиса можно найти много готовых дизайнерских сочетаний шрифтов. Они размещаются в библиотеках Google Fonts Combinations и Google Fonts Combinations Volume 2. Выбирая типографику, в первую очередь, обратите внимание на разборчивость, насколько хорошо будет читаться текст. Всегда более выгодно будет смотреться простой и практичный шрифт, подходящий цели по общепринятым меркам, чем слишком вычурный. Хорошие сборники веб-шрифтов содержат бесплатные сервисы Google Fonts, а также Typekit, и Font Squirrel.Следующим немаловажным шагом при выборе шрифта является его размеры. За основу можно взять уже готовый метод соотношения размеров шрифтов Modular Scale. Также подогнать размеры по своему вкусу поможет шкала соотношений, основанная на золотом сечении.

Рейтинг
( 1 оценка, среднее 5 из 5 )
Дмитрий/ автор статьи
Добавить комментарий

BAFL