Вопреки последней моде «Меньше текста – больше иллюстраций», немалая часть сайтов ориентированы на содержание, на чтение текстов достаточно большого объема.

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

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

Вооружимся уже известной нам книгой Годного Дизайнера и узнаем об этих правилах поподробнее.

Размер колонки текста

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

Проще всего вычисляет ширину строки Роберт Брингхёрст — он умножает размер шрифта на 30. То есть при размере шрифта 15px оптимальной шириной для строки будет 450px.

Роберт Брингхёрст — поэт, типограф и литератор. Известен в первую очередь как автор справочника «Основы стиля в типографике» (The Elements of Typographic Style)

Интерлиньяж

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

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

Чаще всего рекомендуется задавать интерлиньяж на несколько (2-5) пунктов (pt) или пикселов (px) больше размера шрифта, в зависимости от особенностей гарнитуры шрифта.

Вертикальный ритм

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

Акценты и выделение

В каждом тексте есть фразы, на которые нужно делать акцент. Важно делать это не отвлекая читателя. Не стоит бросаться на него с криком: «Вот я — подчеркнутая полужирная капитель! Забудь все остальное — я самая важная!».

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

К сожалению, еще остались некоторые проблемы по контролю важных для типографики вещей — невозможность автоматического запрета висячих строк и автоматической расстановке мягких переносов для избегания рваных краев – неровных строк с большими провалами.

Немного практики?

Ну вот мы прочитали эти правила и решили применить советы на своем сайте. Например, при оформлении поста в блоге.

У нас получился, такой вот вполне неплохо читаемый текст:

Но ему не хватает красок и стиля, правда? Заставим его заиграть.

Начнем с заголовка.

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

На очереди — автор.

Эту информацию можно считать вспомогательной. Следовательно цвет должен быть менее контрастным, а размер шрифта — меньше размера основного содержимого.

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

Для наглядности — с сеткой базовых линий:

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