emisart
+7 495 996-02-16 пн-пт 10.00-18.00

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

Как оформить текст, чтобы его читали

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 


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