Как подобрать шрифты для концепции сайта | Школа веб-дизайна

Как подобрать шрифты для концепции сайта

Небольшая статья, о том, как правильно подбирать шрифт для сайта или проекта в интернете. Основные характеристики шрифта, инструменты для работы со шрифтами

Как подобрать шрифты для концепции сайта

Цель сайта, и как это связано со шрифтами

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

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

Позиционирование — это то, каким потребители должны воспринимать бренд, для которого вы делаете сайт. Характер, настроение, эмоции, ощущения.

Определитесь, каким вы хотите воспринимать сайт. Он должен создавать напряжение и возбуждение или вносить ясность и спокойствие?

Пример: Банк с 100 летней репутацией. Какой характер шрифта подойдет, игривый и контрастный или строгий и лаконичный?

 

Виды шрифтов

Различают 2 основных вида шрифтов с засечками и без засечек. Каждый из них имеет свою историю возникновения. Об этом хорошо описано в книге Живая типографика. Ее кстати выложили в открытый доступ. Можете скачать по ссылке.

Шрифты с засечками

Если вы видите в названии шрифта Sans Serif, значит перед вами шрифт без засечек. Что это значит? Для таких шрифтов характерны засечки на окончаниях букв.

Вот как они выглядят.

засечки на шрифте

Шрифты без засечек

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

Вот пример шрифтов без засечек.

Шрифт без засечек

 

Так что же выбрать, шрифт без засечек или с засечками?

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

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

О читабельности, как ее проверить, и подобрать достойный вариант, мы поговорим немного позже.

 

Вдохновение по работе с типографикой

Мы с вами уже обсудили базовые понятия, теперь можно приблизиться к практике.

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

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

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

Ссылки где черпать вдохновение

 

https://www.awwwards.com/websites/typography/

готовые сайты, участвующие в конкурсе awwwards. Ссылка сразу на коллекцию с хорошей типографикой

https://www.behance.net/

Behance знает каждый дизайнер. Вдруг вы не слышали. Это сервис для дизайнеров, в котором они публикуют свои работы. Вы можете выбрать категорию Web Design или Дизайн интерфейсов. А можете смотреть работы с классными шрифтами не обращая внимания, где они используются.

http://www.agoodbook.de/static/1/index.html.gz

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

http://typoholic.ru

Создан и поддерживается Валерием Голыженковым и Ильей Рудерманом. Шрифтовыми дизайнерами. Много полезной информации по шрифтам. Тоже более полезен для дизайнеров с опытом.

https://www.typographicposters.com

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

Где искать шрифты

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

Старайтесь не брать основными шрифтами для сайта, какие-то декоративные и странные варианты. Ну и конечно забудьте о comic sans и lobster.

https://fonts.google.com/

Большая коллекция качественных, популярных шрифтов. Если хотите, проверьте какими шрифтами пользуются ваши любимые ресурсы.

https://fontstorage.com/ru/category/

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

Тестирование шрифтов для сайта

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

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

Инструменты для тестирования шрифтов

figma.com

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

https://fontstorage.com/ru/polygon/

Еще один хороший инструмент, особенно если вы будете работать с ресурсом fontstorage.

 

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

Читабельность

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

Сочетаемость шрифтов

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

Контраст

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

Отсутствие косяков

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

 

Рекомендации для начинающих при работе с типографикой

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