Инструкция по созданию продающего сайта

Часть 8. Правила типографики и подбор шрифта для сайта

Типографика — это то, как умело оформлены тексты. Текст важнее графики, поэтому графика - дополнение к тексту, а не наоборот.
Типографика это ключевая основа на которой строится современный веб.
Оливер Райхенштейн (основатель компании Information Architect) сказал «Веб-дизайн - это 95% типографики» и я с ним полностью согласен.

Какие задачи несет типографика на сайте:

  • Удобство чтения. Ну нужно вчитываться.
  • Показывает где главное, а где второстепенное
  • Приятно глазу, гармонично и естественно
  • Передает эмоции от продукта
В вебе существует правило, что нужно использовать не более 1-2 шрифтов в одном проекте. Соответственно шрифты должны быть сочетаемы друг с другом и гармонично смотреться вместе. Именно для этого придумано понятие - шрифтовая пара. Как правило шрифтовая пара подбирается для связки заголовка и основного текста.

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

  • Какую эмоцию вы хотите передать текстом о продукте? Больше это относится к заголовкам.
  • Шрифты должны быть Удобны для чтения на любых экранах, на высоких разрешениях и на самых старых. Очень многие дизайнеры работают на макбуках, с хорошими ретина экранами. На их экранах например какой-нибудь легкий шрифт смотрится просто замечательно, а у какого-нибудь Василия Александровича, который возможный клиент, будет дома стоять старенький монитор с разрешением 1024х800 пикселей. В котором не сможет увидеть без очков что там пытался написать дизайнер, а если наденет очки то увидит пиксельное крошево. Он долго думать не будет, уйдет к тем где можно всё прочитать. Поэтому подбирая шрифт проверяйте как они смотрятся на плохих мониторах
  • Не должно быть старых заезженных старых шрифтов которые используются в редакторах (Arial, Times New Roman, Comic Sans итд). Всем они просто приелись.
  • Подбирайте сразу несколько вариантов шрифтовых пар а потом выбирайте лучший.

Практические рекомендации по подбору шрифтовой пары:

  • Не перемудрите. Для большинства сфер бизнеса подходят устоявшиеся шрифтовые пары. Любую работу можно выполнять часами, но у вас время ограничено. Делайте быстро. Посвятите подбору шрифтовой пары не более получаса. Например, платформа Тильда изначально создавалась с упором на типографику. В большинстве случаев достаточно использовать шрифтовые пары встроенные в Тильду. Там уже подобрано около 25 шрифтовых пар. Также в Тильду можно загрузить свои шрифтовые пары.
  • Если есть фирменный стиль компании сформированный дизайнером, есть брендбук, то берите шрифтовую пару из него. На сайте будет подчеркнут общий стиль компании, а вам не придется думать и ломать голову.
  • Удобство читаемости важнее эмоции. Об этом я говорил на прошлых слайдах. Если ваш шрифт супер атмосферный, передает эмоции, но не читаемый нет смысла использовать его.
  • Используйте для подбора пары сервисы подбора шрифтовых пар или готовые подборки.
  • С опытом создайте свой топ шрифтовых пар которые вы используете. Их будет хватать в 90% случаев для сайтов.
  • Проверяйте по возможности как выглядит шрифт на хороших и плохих мониторах. Везде должно выглядеть читабельно. Опять же про это говорили.

Размеры типографики, которые я использую:

  • Заголовок первого экрана — 36-65 px, но чаще всего укладываюсь в диапазон 36-48 пикселей. Тут все зависит от шрифта и количества символов.
  • Заголовки блоков — 30-48 px
  • Подзаголовки — 20-28 px
  • Основной текст — 15-18 px
  • Тех. описание, сноски, подписи — 12-14 px
Инструкция по созданию продающего сайта