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