Как оформить текст, чтобы его читали
Начнем с определений. Что такое вообще типографика?
Типографика (от греч. τύπος — отпечаток + γράφω — пишу) — искусство оформления при помощи наборного (не рисованного) текста, базирующееся на определённых, присущих конкретному языку правилах, посредством набора и вёрстки.
А если по-простому – это свод правил о том, как надо и как не надо использовать буквы, слова, предложения и форматирование, чтобы текст был как можно более удобен для восприятия. Более 95% информации в интернете представлено в виде текста. Хорошая типографика делает текст легкочитаемым, а текст с плохой типографикой, скорее всего, не прочитают вообще.
К счастью, веб-дизайне существуют четкие правила, следуя которым контент можно сделать приятным для восприятия.
Используйте минимум шрифтов - количество шрифтов на сайте не должно превышать 3. Когда на сайте одновременно появляется слишком много разных типов и стилей шрифтов – это разрушает любую компоновку. Такой сайт выглядит непрофессиональным.
Это правило касается не только семейств шрифтов, но и стилей начертания. Если вы выбираете только два шрифта, убедитесь, что шрифты дополняют друг друга.
На сегодняшний день во всех современных браузерах поддерживаются веб-шрифты. Это значит, что вы можете использовать любой шрифт, доступный на сайтах Google Fonts или Typekit.
Преимущества очевидны:
Экономия в деньгах | Все шрифты, представленные на этих сайтах, абсолютно бесплатны и могут использоваться без нарушения авторских прав. |
Экономия во времени | При верстке шрифты добавляются на сайт с помощью одной строки кода. |
Унификация | Шрифты совместимы со всеми новыми версиями веб-браузеров и оптимизированы для SEO. |
Если на вашем сайте не используется специальный шрифт для брендинга или для выделения какой-либо части, то лучше всего придерживаться стандартных веб-шрифтов. Их количество постоянно растет, поэтому подобрать подходящие не составит труда.
Количество символов в строке - ключевой фактор удобства восприятия текста. Споры и обсуждения по поводу читабельности текста продолжаются уже больше столетия. За это время типографы вывели основные принципы, по которым люди читают. Если строка слишком длинная, то посетитель вынужден поворачивать голову к концу строки и затем искать начало строчки. Это вызывает усталость и напряжение. А если строка слишком короткая, то она разбивается на части, и воспринять текст как единое становится очень сложно. Хороший и правильный ритм текста таков: для полиграфии это 45-75 знаков, для веб-верстки – 50-65 знаков в строке.
Для мобильных устройств за основу приняты 30-40 символов в строке.
Пользователи получают доступ к вашему сайту с устройств с различными размерами экрана и разрешениями. Чтобы с любых интерфейсов ваш контент было удобно читать, размер основных элементов подстраивают под параметры устройства. Поэтому важно выбирать такие шрифты, которые хорошо читаются в разных размерах.
Заголовки в тексте служат указателями для пользователей, чтобы они могли быстро воспринять общую структуру вашего контента. Каждой статье нужна четкая иерархия: это помогает читателю быстро понять, где важная для него информация. Рекомендуем ограничиться двумя уровнями заголовков: заголовок первого уровня должен составлять 180 – 200% от основного текста, а второго - 130 – 150%.
Чтобы сделать блок текста более удобным для чтения, устанавливают расстояние между строками 120 - 145% от размеров буквы. Так строки не будут сливаться, взгляд не будет перескакивать с одной строки на другую.
Между основным текстом и заголовком следует добавлять отступ. Этот интервал должен быть не слишком большим, чтобы показывать четкую связь между элементами.
Часто на сайтах используется большое количество ненужных цветовых комбинаций. Это не только мешает воспринимать сайт как единое целое, но и снижает читаемость текстов, так как некоторые оттенки недостаточно контрастны для чтения.
В веб-дизайне существуют правила, которые касаются оформления текста: серым цветом обозначают поля, которые надо заполнить, красным цветом показывают ошибки, синий цвет – для активных гиперссылок. Использование этих стандартов позволит пользователю лучше ориентироваться на сайте.
Также не стоит забывать, что чем больше контраст между текстом и фоном - тем выше скорость его чтения.
Помните, что все элементы взаимосвязаны и должны сочетаться не только по размеру и стилю, но и по цвету.
Ну и напоследок, некоторые шаги, по которым вы можете проверить и исправить свои тексты:
Слишком маленький размер шрифта |
|
Слишком большой размер шрифта |
|
Слишком длинная строка |
|
Слишком короткая строка |
|
Слишком маленький межстрочный интервал |
|
Слишком большой межстрочный интервал |
|
![]()
Автор: Оля Кадыкова
Дата публикации: 26.05.18
ВНИМАНИЕ! Instagram и Facebook принадлежат компании Meta Platforms Inc., деятельность которой признана экстремистской и запрещена на территории России.