Типографика в графическом дизайне отвечает за то, насколько приятно посетителю сайта будет взаимодействовать с его текстовым контентом. Она работает на улучшение разных SEO-показателей сайта и помогает в продажах. О том, что такое типографика в дизайне и как правильно подбирать шрифты для сайта, рассказываем в статье.
Что такое типографика и для чего она нужна
Типографика — это создание гармоничных и удобных шрифтов для сайта. Данному процессу уделяется большое количество времени, так как текстовый контент не только рассказывает факты о продукте, он привлекает пользователей, убеждает их совершить действие, продает, транслируя предложение бренда, и просто передает ценности компании.
Типографика делает текст понятным для читателя. Она необходима для того, чтобы донести до пользователя сообщение, которое содержится на веб-странице, независимо от того является оно коммерческим или информационным.
Кроме налаживания коммуникации с пользователем, типографика создает эстетику проекта и подчеркивает его индивидуальный стиль.
Чем понятнее и приятнее текстовый контент для восприятия, тем больше пользователь вовлечен во взаимодействие с компанией. Чтобы создать топографическую композицию, необходимо понимать, какие бывают шрифты и как их сочетать.
Какие бывают шрифты
Шрифты бывают разными. Каждый их вид подходит для решения определенных задач и использования в конкретных ситуациях. Разберем несколько основных типов шрифтов и случаи, для которых они будут актуальными:
- Шрифты с засечками, или антиквы. Их элегантность призвана подчеркивать статусность проекта. Часто их выбирают для веб-ресурсов с юридической направленностью или страховой.
- Брусковые шрифты. Тоже имеют засечки, но более квадратные и смелые. Они сочетают в себе самобытность и консерватизм.
- Шрифты без засечек, или гротески. Современные минималистичные шрифты. Отличаются простотой. Подойдут большому количеству проектов.
- Рукописные шрифты. Отличаются декоративностью. Могут перегружать макет сайта, поэтому лучше использовать их в небольшом количестве.
- Современные шрифты отличаются футуристичностью. Подходят образовательным и ИТ-проектам.
- Декоративные шрифты. Подходят необычным и творческим проектам.
Как и для чего сочетать разные шрифты
В рамках типографики для сайта выбирается шрифтовая пара — два разных шрифта, идеально дополняющих друг друга. Их совместимость не всегда обусловлена схожестью. Иногда они хорошо сочетаются из-за своей контрастности. Однако в любом случае они должны гармонично смотреться друг с другом.
Ищите контраст, а не конфликт
Как ни странно, чем сильнее шрифты друг на друга похожи, тем больше вероятность, возникновения между ними эстетического конфликта. Более контрастные шрифты лучше дополняют друг друга. Гармоничная шрифтовая пара может получиться из антиквы и гротеска.
Используйте шрифты из суперсемейств
Шрифты из одного суперсемейства хорошо сочетаются друг с другом. В нем могут быть и антиквы, и гротески. В заголовках предпочтителен шрифт без засечек, а для основного текста с засечками. Можно поискать удачное сочетание в блогах типографов.
Воспользуйтесь сервисами
Начинающим дизайнерам помогут сервисы — генераторы шрифтовых пар. Они позволят приобрести насмотренность.
Роль цвета и контраста в типографике
Шрифтовые пары не единственный способ найти удачный контраст в типографике. Можно сыграть на цвете. Важные элементы, требующие акцента и выделения из общего текста, можно выделить с помощью оттенка, отличного от основного цвета. К ним относятся заголовки и ключевые пункты. Важно, чтобы оттенок шрифта хорошо контрастировал с фоном. Контрастность должна быть умеренной. Для выбора идеальной цветовой пары можно воспользоваться цветовым кругом Иттена или онлайн-сервисами.
Размеры шрифтов
Вниманием пользователя можно управлять с помощью размера букв. Поэтому размер шрифта является не менее важным параметром. Три главных правила в выборе размера литер:
- Заголовки должны быть больше и жирнее основного текста.
- Для подзаголовков нужно найти золотую середину: меньше основных заголовков, но больше основного текста.
- Шрифт основного текста должен быть комфортным для чтения и при этом не отвлекать излишне большим размером.
Расстояния между строками, словами и буквами в типографике
Буквы и слова на странице не должны наползать друг на друга. В тоже время разреженный текст тоже теряет свою эстетичность и понятность.
Интерлиньяж
Интерлиньяж — это расстояние между строками текста. От него зависит скорость прочтения текста. Близко расположенные друг к другу строки сложно читать, что замедляет чтение. Большое междустрочное пространство, в свою очередь, мешает нормальному восприятию смысла текста. При настройках интерлиньяжа учитывают объем текста, кегль и характер шрифта, а также длину строки.
Трекинг
Трекинг — это близость символов одного слова. Когда нужно создать ощущение воздушности, межбуквенный интервал увеличивают. Динамика достигается сужением данного параметра.
Кернинг
Кернинг — настройка расстояния между буквами, когда нужно устранить между ними дыры, появившиеся из-за особенностей рисунка текста.
Заключение
Ошибки в типографике заставляют пользователей покинуть сайт. Начинающие веб-дизайнеры могут корректировать свои работы, анализируя примеры популярных типографов и используя онлайн-сервисы.
