Одним из способов коммуникации с пользователем является типографика. Хороший шрифт на сайте создает настроение, акцентирует внимание человека на важных элементах, его легко читать и он также является отдельным элементом дизайна! Как же правильно выбрать подходящий шрифт?
В первую очередь необходимо определиться с концепцией проекта, какую цель вы преследуете, какое настроение вы бы хотели донести до пользователя? Здесь стоит обратить внимание на несколько факторов:
- Какой на сайте будет контент — какие тексты будут присутствовать на сайте, о чем они будут. Например, обучающие материалы по финансовой грамотности и реклама новой детской игрушки несут абсолютно разное настроение, соответственно и шрифт будет разный.
- Дизайн сайта — шрифт должен подчеркивать дизайн, дополнять его и не противоречить основной идее.
- Целевая аудитория — для каждого типа аудитории подходит определенный шрифт, который также отражает настроение и соответствует концепции всего сайта.
- Восприятие пользователем — длинные тексты к которым применен нечитаемый, но очень красивый шрифт никакой пользы не принесут, а только наоборот, пользователь просто покинет такой сайт и будет искать необходимую ему информацию на других ресурсах.
После определения концепции, цели и аудитории у нас уже есть примерное понимание того, какой шрифт нам может подойти. А из чего выбирать? В наше время существуют уже тысячи разных шрифтов, но основные их классификации все таки можно обозначить:
- Антиква — шрифты с засечками. Раньше считалось, что такие шрифты больше подходят для печатных изданий, так как засечки помогают формировать строку, но сейчас они часто используются и для онлайна. Классические, элегантные шрифты.
- Гротеск — шрифт без засечек. Гротеск привычнее для онлайн-пользователя, он часто используется на сайтах, в социальных сетях и на самих устройствах. Когда шрифт этого класса только появился, он использовался для привлечения внимания в рекламе и в заголовках. Минимализм, динамичность.
- Рукописные шрифты — исходя из названия можно понять, что это шрифты, которые имитируют рукописный текст.
- Акцидентные (декоративные) — особенность этой категории в том, что такие шрифты также не подходят для набора основного текста, а используются лишь для акцентирования и привлечения внимания.
Как правило, первые две категории шрифтов можно использовать для всего, как для длинных текстов, так и для заголовков, и для создания акцентов. Главное правильно подобрать размер, сочетание шрифтов между собой и другие параметры. А вот рукописные и акцидентные шрифты лучше использовать только для акцентов в дизайне сайта, так как их сложнее воспринимать.
Постепенно мы подобрались к вопросу сочетания шрифтов между собой. Как лучше сочетать шрифты? Ниже несколько советов:
- Одно из основных правил о котором говорится повсеместно — максимум три шрифта на одном сайте, не больше. При этом каждый из выбранных шрифтов должен использоваться только в своей зоне ответственности — заголовки, основной текст, акценты. Шрифты, так же как логотип и цвета могут стать якорем компании и клиенты будут ассоциировать вас с определенными шрифтами, поэтому лучше использовать небольшое количество шрифтов, а также гармоничное сочетание шрифтов украшает визуальную картину сайта и помогает выстроить смысловую иерархию.
- Каждый шрифт несет определенное настроение и это настроение должно быть единым у сочетаемых шрифтов. Если выбор пал на строгий, серьезный шрифт, то и остальные шрифты на сайте должны отражать тоже самое настроение. Сочетать между собой элегантный, строгий шрифт с динамичным, легким шрифтом все таки не стоит.
- Шрифты с засечками и без засечек прекрасно сочетаются. Как мы писали выше, гротеск изначально использовался для заголовков или рекламы, а вот антиква для основного текста. Такие шрифты идеально друг друга дополняют.
- Не забывайте, что у шрифтов можно менять размер, наклон и другие параметры для того, чтобы как-то разнообразить текст.
- Заголовок всегда должен отличаться. Как в примере с антиквой и гротеском, другой шрифт привлекает внимание и, опять же, создает необходимую смысловую иерархию.
Осталось поговорить о технических характеристиках шрифтов, а конкретно о размере. Какой размер станет оптимальным и какое должно быть соотношение между заголовками и основным текстом? Размер основного текста на сайте не должен быть меньше 12px, длина строки не должна превышать 600px. Это основные рекомендации, которые подойдут в любой ситуации, остальное — дело индивидуальное. Сайты бывают разные, где-то намерено используются очень большие размеры для заголовков, так как это часть дизайна, а какие-то сайты оформлены в стиле новостной ленты и там применяются стандартные размеры для заголовков, основного текста и каких-либо подписей. В выборе размера шрифта может помочь сервис Modular Scale, рекомендации от туда можно взять за основу и дальше доработать размер под себя.
Где искать шрифты и полезную информацию по работе с ними?
Сейчас существует множество разных вариантов шрифтов, есть и платные и бесплатные варианты. Ниже указаны некоторые полезные сервисы для работы со шрифтами.
- Google Fonts — большой выбор бесплатных шрифтов
- Google Type — здесь можно выбрать пары шрифтов подходящие друг другу
- WhatTheFont — сайт для поиска шрифтов по фото
- Pangram Pangram — платные и бесплатные шрифты
- Befonts- библиотека бесплатных шрифтов
- Fontsinuse — большой архив типографического дизайна, можно искать работы по темам, форматам и шрифтам
- Lipsum Generator — сайт для генерации «рыба-текста». Можно настроить регистр, кол-во строк и т. д.
А когда хочется немного отвлечься от работы, можно позалипать в профессиональные игры:
- betterwebtype. com/triangle — играем с текстом — интерлиньяж, длина строки, размер шрифта и тд.
- type. method. ac — подбор межбуквенных интервалов для конкретных пар букв с целью улучшения внешнего вида и удобочитаемости текста
- tothepoint. co. uk/us/fun/i-shot-the-serif — в этой игре необходимо расстрелять все буквы с засечками
Подводя итоги, хотим сказать, что главное определиться с целью, настроением и задачами сайта и исходя из собранных данных подбирать подходящие шрифты (конечно же, не больше трех😉). Используя общедоступные сервисы по подбору шрифтов, сочетанию их между собой и соотношению размеров можно реализовать достойную типографику на сайте. Также, всегда есть возможность делегировать эту задачу специалистам, которые разработают сайт под ключ для вас. Шрифты на сайте — это важно, не забывайте об этом!