Правила типографики в вебе

Начнем с определений. Что такое вообще типографика?

Типографика (от греч. τύπος — отпечаток + γράφω — пишу) — искусство оформления при помощи наборного (не рисованного) текста, базирующееся на определённых, присущих конкретному языку правилах, посредством набора и вёрстки.

А если по-простому – это свод правил о том, как надо и как не надо использовать буквы, слова, предложения и форматирование, чтобы текст был как можно более удобен для восприятия. Более 95% информации в интернете представлено в виде текста. Хорошая типографика делает текст легкочитаемым, а текст с плохой типографикой, скорее всего, не прочитают вообще.

К счастью, веб-дизайне существуют четкие правила, следуя которым контент можно сделать приятным для восприятия.

Правила типографики

Минимализм прекрасен

Используйте минимум шрифтов - количество шрифтов на сайте не должно превышать 3. Когда на сайте одновременно появляется слишком много разных типов и стилей шрифтов – это разрушает любую компоновку. Такой сайт выглядит непрофессиональным.

Это правило касается не только семейств шрифтов, но и стилей начертания. Если вы выбираете только два шрифта, убедитесь, что шрифты дополняют друг друга.

Стандартные шрифты Google Fonts

На сегодняшний день во всех современных браузерах поддерживаются веб-шрифты. Это значит, что вы можете использовать любой шрифт, доступный на сайтах Google Fonts или Typekit.

Преимущества очевидны:

Экономия в деньгах	Все шрифты, представленные на этих сайтах, абсолютно бесплатны и могут использоваться без нарушения авторских прав.
Экономия во времени	При верстке шрифты добавляются на сайт с помощью одной строки кода.
Унификация	Шрифты совместимы со всеми новыми версиями веб-браузеров и оптимизированы для SEO.

Если на вашем сайте не используется специальный шрифт для брендинга или для выделения какой-либо части, то лучше всего придерживаться стандартных веб-шрифтов. Их количество постоянно растет, поэтому подобрать подходящие не составит труда.

Короче – не значит хуже

Количество символов в строке - ключевой фактор удобства восприятия текста. Споры и обсуждения по поводу читабельности текста продолжаются уже больше столетия. За это время типографы вывели основные принципы, по которым люди читают. Если строка слишком длинная, то посетитель вынужден поворачивать голову к концу строки и затем искать начало строчки. Это вызывает усталость и напряжение. А если строка слишком короткая, то она разбивается на части, и воспринять текст как единое становится очень сложно. Хороший и правильный ритм текста таков: для полиграфии это 45-75 знаков, для веб-верстки – 50-65 знаков в строке.

Для мобильных устройств за основу приняты 30-40 символов в строке.

 

Размер имеет значение

Пользователи получают доступ к вашему сайту с устройств с различными размерами экрана и разрешениями. Чтобы с любых интерфейсов ваш контент было удобно читать, размер основных элементов подстраивают под параметры устройства. Поэтому важно выбирать такие шрифты, которые хорошо читаются в разных размерах.

Выделяем главное

Заголовки в тексте служат указателями для пользователей, чтобы они могли быстро воспринять общую структуру вашего контента. Каждой статье нужна четкая иерархия: это помогает читателю быстро понять, где важная для него информация.  Рекомендуем ограничиться двумя уровнями заголовков: заголовок первого уровня должен составлять 180 – 200% от основного текста, а второго - 130 – 150%.

Вместе тесно, а врозь скучно

Чтобы сделать блок текста более удобным для чтения, устанавливают расстояние между строками 120 - 145% от размеров буквы. Так строки не будут сливаться, взгляд не будет перескакивать с одной строки на другую.

Между основным текстом и заголовком следует добавлять отступ. Этот интервал должен быть не слишком большим, чтобы показывать четкую связь между элементами.

Цветик – не семицветик

Часто на сайтах используется большое количество ненужных цветовых комбинаций. Это не только мешает воспринимать сайт как единое целое, но и снижает читаемость текстов, так как некоторые оттенки недостаточно контрастны для чтения.

В веб-дизайне существуют правила, которые касаются оформления текста: серым цветом обозначают поля, которые надо заполнить, красным цветом показывают ошибки, синий цвет – для активных гиперссылок. Использование этих стандартов позволит пользователю лучше ориентироваться на сайте.

Также не стоит забывать, что чем больше контраст между текстом и фоном - тем выше скорость его чтения.

Помните, что все элементы взаимосвязаны и должны сочетаться не только по размеру и стилю, но и по цвету.

Чек-лист по оформлению текстов на сайте

Ну и напоследок, некоторые шаги, по которым вы можете проверить и исправить свои тексты:

Слишком маленький размер шрифта	Вы должны сконцентрироваться, чтобы прочитать текст Вы должны прищуриться У вас есть желание увеличить масштаб
Слишком большой размер шрифта	Вы начинаете замечать буквенные формы вместо чтения содержимого Вы можете читать только от одного до трех слов за раз У вас есть желание уменьшить масштаб
Слишком длинная строка	Вы должны повернуть голову, чтобы прочитать текст Вы теряете концентрацию по пути к концу строки
Слишком короткая строка	Вы испытываете раздражение, когда текст переходит на следующую строку Ваши глаза устают от частого перемещения взгляда влево и вправо
Слишком маленький межстрочный интервал	Текст кажется плотным и подавляющим При чтении вы переходите на неправильную строку текста
Слишком большой межстрочный интервал	Вы отвлекаетесь на пробел между строками

 

Автор: Оля Кадыкова
Дата публикации: 26.05.18