Типографика для веб: +10% к скорости чтения, +15% восприятию
Типографика для веб: +10% к скорости чтения, +15% восприятию
08 мая 2015

Очень доступная статья от Павла Лебедева, как быстро сделать ваши тексты в макетах на порядок лучше.

В этой статье я расскажу немного о типографике, не как о науке для дизайнеров, а показать на практике, как это может улучшить восприятие текста. Мое определение типографики — это наука об эргономике текста. От того насколько хорошо учтены правила типографики, настолько легко будет читать текст, а значит воспринимать информацию.

Взгляните на пример ниже. Так выглядят тексты на большинстве сайтах. Этот текст был набран в word со стандартными настройками.

 

Что же здесь не так? Возможно, кто-то просто скажет, что текста много и читать его особо не хочется. Но дело здесь не в этом, а в том как текст написан и как мы - люди - читаем текст.

Посмотрите на пример ниже, попробуйте пройти по змейке от начала и до конца не отрывая взгляд. В каком случае вам понадобиться меньше времени?

Первый пример – с плохой типографикой:

 

Второй пример с хорошей типографикой:

 

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

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

 

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

1. Длина строк, межстрочное расстояние и поля

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

 

Оптимальная длина строки 45-60 символов, т.е. 6-13 слов в зависимости от языка и длины слов.

Чтобы текст выделялся от остальных элементов на странице обязательно должны быть просторные поля. Посмотрите на любую печатную, поля вокруг текста составляют где-то 1/8-1/6 ширины строки.

Вот как будет выглядеть наш образец текста с этими изменениями:

 

Стало немного лучше, но текста все еще много, и читать его не хочется.

2. Абзацы и заголовки

Чтобы большой блок текста легко читался глазу надо дать пространство для отдыха. Для этого надо разбить текст на абзацы по 3-5 строк и добавить заголовки и подзаголовки. 

Это очень важные элементы, ведь их читают 80% посетителей, а основной текст лишь 20%. Поэтому они должны быть крупными контрастными и легко считываться даже при быстром скроллинге страницы. Вот пример, как движется взгляд при беглом просмотре текста:

 

Как видите в взгляд чаще останавливается на заголовках и в начале абзацев. Абзацы и заголовки являются крючками, которые цепляют взгляд и привлекают внимание читателя. А значит улучшают восприятие.

Чтобы показать иерархию используйте заголовки разного уровня и нумерацию, если это уместно. Лучше всего заголовки делать в 1,5 - 2 раза больше размера основного текста. Применим это к нашему образцу текста:

 

Сейчас уже даже при беглом просмотре можно понять о чем идет речь в тексте. Но если текста будет больше читать его все равно будет сложно.

3. Цвет текста и фона

Стандартный черный текст на белом, как ни странно не является оптимальным для чтения. Те кто сравнивал чтение книг на iPad и электронных читалках знает, что сильно контрастный текст очень утомляет глаза. На электронных чиалках же контраст значительно меньше. 

В случае word или outlook например, можно сделать цвет текста не черным, а темно серым.

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


4. Верстка, цитаты и врезки  

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

Если все эти правила применить к нашему образцу текста получится следующий пример. Сравните их и вы поймете разницу.

 

А вот еще раз наш изначальный текст:

 

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

Конечно же все правила типографики рассказать в одной статье не получится, но теперь вы знаете как быстро сделать ваш текст более читабельным и получить +10% к скорости чтения, +15% восприятию.

Если вы знаете другие советы или книжки по типографике поделитесь ссылками в комментариях.​

Источник: Павел Лебедев, Skillsup

Читайте также
Чем можно заменить Helvetica - 6 альтернатив
Чем можно заменить Helvetica - 6 альтернатив

Небольшая подборка шрифтов, которыми можно заменить Helvetica в ваших проектах.

02.06 0
Простые правила сильного текста 3Уровень сложности:
3. Специалист
Простые правила сильного текста

Видео урок о том, как создавать короткие и емкие тексты в стиле инфо-дизайна и минимализма.

28.09 1
Итак, тебе нужен шрифт 2Уровень сложности:
2. Любитель
Итак, тебе нужен шрифт

Забавная инфографика о том, как подбирать шрифты

10.04 4
Рекомендации по оформлению текстов 3Уровень сложности:
3. Специалист
Рекомендации по оформлению текстов

РИА Новости подготовили отличную инфографику по поводу того, как правильно готовить тексты.

25.02 3
Комментарии

×
Подписка на новости Skillsup

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