Основные правила типографики для сайтов — это как правила вежливости и общения. Ваш сайт наполнен крутым контентом, сочными картинками и вкусными заголовками, а читатели покидают страницу, не пробыв и 10 секунд? Такое возможно, если типографика сайта не соответствует правилам юзабилити ― посетителям некомфортно читать тексты на сайте, сайт в целом не вызывает доверия и желания взаимодействовать.
С текстами мы сталкиваемся везде, и основные правила типографики для сайтов знать необходимо. Хорошая типографика — это залог быстрого и легкого восприятия посетителями нужной информации. В некоторых случаях неправильная типографика может испортить весь сайт. Вместо того, чтобы привлекать новых покупателей и увеличивать конверсию сайта, это сведет все усилия на нет. Чтобы исправить ситуацию, нужно оптимизировать типографику в соответствии с основными правилами. В результате страница сайта будет выглядеть гармонично, текст будет легко восприниматься на любом устройстве.
10 основных правил типографики
Существуют определенные правила типографики для сайта, знание которых поможет придать веб-странице современный стильный вид и сделать восприятие информации удобным.
- Чтобы веб-сайт выглядел профессионально, используйте не более трех шрифтов (как правило, достаточно одного шрифта) и применяйте их на всем веб-сайте. Большое разнообразие шрифтов портит разметку страницы. Если есть необходимость применять несколько шрифтов, они должны сочетаться между собой с точки зрения дизайна и восприятия. Хорошо и гармонично смотрится соседство Georgia и Verdana, с похожей шириной букв. А вот пара Baskerville и Impact выглядит нелепо. Impact — громоздкий и тяжелый, он словно подавляет своего соседа с засечками.
- Современные сервисы предлагают много интересных шрифтов, способных сделать дизайн эффектным и легких в использовании. Однако пользователи уже привыкли к стандартным шрифтам и читают их быстрее. Чтобы веб-текст легко и быстро воспринимался, не используйте на веб-страницах шрифты с засечками. Лучше отдать предпочтение Arial или Calibri. Необычные дизайнерские шрифты пригодятся при создании крутого логотипа или брендинга.
- В некоторых шрифтах буквы похожи по написанию и их легко перепутать между собой. Например, в латинице можно спутать маленькие буквы «L» и «I». Слишком близко расположенные «r» и «n» похожи на «m». Поэтому после выбора шрифта нужно набрать пробный текст и посмотреть, как он воспринимается.
- Не используйте в веб-текстах CAPS LOCK. Все заглавные буквы хорошо смотрятся только в логотипах, где слово воспринимается целиком и не требует процесса чтения. В обычном тексте это будет снижать скорость чтения и интерес. Иногда слова, написанные капсом, воспринимаются так, словно автор сайта кричит на читателей. Будьте осторожны с заглавными буквами.
- В русскоязычных текстах правильно использовать кавычки в виде «елочек». «Лапки» чаще используются в англоязычных текстах. Применить «лапки» можно, чтобы выделить кавычками слово внутри большой фразы, тоже стоящей в кавычках, например, внутри прямой речи.
- Ограничьте длину строки. Ведь на разных устройствах ваша веб-страница будет отражаться по-разному. Оптимальная длина строки — в 50-60 знаков. Тогда при чтении глазам не приходится часто менять фокус, а значит текст читается легко. Выравнивайте текст не по ширине страницы, а по левому краю, чтобы расстояния между буквами и словами были одинаковыми. Для просмотра текстов с мобильных устройств длина строки не должна превышать 40 знаков. Чтобы добиться нужного размера, в веб-дизайне уменьшают текстовые блоки, измеряя расстояние в пикселях или em. Единицы em устанавливают соотношение между размерами шрифтов. Чтобы текст выглядел одинаково хорошо на разных устройствах — размер шрифта задается в относительных единицах измерения — em. Благодаря измерению в таких относительных единицах, контент будет гибким и адаптивным.
- Соблюдайте межстрочный интервал. В типографике его называют «интерлиньяж». Большой интерлиньяж делает чтение веб-текста легким. Он должен быть на 30% больше высоты знаков в строке. Между абзацами применяйте интервал, имеющий большую ширину, чем междустрочный, так называемую швейцарскую красную строку. Она смотрится эффектней, чем отступы в каждом абзаце.
- Уходит в прошлое стремление веб-мастеров заполнить страницу целиком текстом, картинками и рекламными баннерами. На страницах сайта должно быть достаточное количество свободного пространства по бокам текста.
- Контрастность фона и текста. Если цвет текста и фона будут из одной гаммы или просто похожи, читать их будет трудно. Скорее всего пользователь даже не дойдет до места, где вы предлагаете ему сделать подписку или заказ, не получит посыла и уйдет со страницы. Минимальная допустимая контрастность текста 14 размера к фону по стандартным требованиям составляет 3:1, то есть текст должен быть в 3 раза темнее или в 3 раза светлее фона. Определить контрастность текста и фона можно с помощью специальных бесплатных расширений. Чем мельче текст, тем выше должна быть контрастность. Различные устройства по-разному будут отображать цвет и яркость, поэтому цветовую гамму с текстом нужно тестировать. То есть просмотреть готовую веб-страницу в различных носителях. Если в процессе тестирования на каком-то устройстве будут возникать проблемы с восприятием текста, то они будут возникать у всех пользователей.
- Есть еще одна проблема, связанная с цветовым решением — дальтонизм. Ему подвержено немалое число людей на планете, особенно мужчины. Поэтому стараемся избегать сочетаний красного и зеленого цветов. Если без них никак, то важную информацию выделяем каким-то другим способом.
Основные правила типографики для сайтов проверены не одним поколением профессионалов. Так что применяйте, повышайте эффективность взаимодействия с клиентами и пользователями.
Для тех, кто ценит свое личное время и ищет простой и легкий способ, есть конструкторы сайтов, такие как 1C-UMI. В шаблонах 1С-UMI уже заложена готовая типографика и подобранные профессионалами шрифты, это избавит от сложностей при создании лендингов и сайтов.
