КАК СДЕЛАТЬ ТЕКСТ КОМФОРТНЫМ ДЛЯ ЧТЕНИЯ. ЧАСТЬ 1

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

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

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

К тому же, нам часто не терпится испытать последнюю фичу OpenType, украсить текст дополнительными лигатурами, добавить частичный перенос текста средствами CSS, а потом с умилением любоваться своим шедевром, не понимая, что люди, далёкие от типографики, этого даже не заметят. Конечно, рано или поздно мы падаем с небес на землю — когда дело доходит до чтения текста обычными людьми с самыми разными устройствами: от новейших ноутбуков с дисплеем Retina и электронно-лучевых мониторов с разрешением 72dpi на Windows XP до разнообразных фантастических девайсов, способных измерять кровяное давление.

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


— Оливер Райхенштайн (Oliver Reichenstein)


Большинство статей в сети оптимизированы для быстрого поглощения информации — вам знаком принцип «перевернутой пирамиды»? Быстрый обмен данными заложен в самой природе интернета и отвечает потребностям читателей, неспособных долго концентрировать своё внимание на чём-то одном. Люди открывают сайты и приложения, чтобы найти информацию, а не насладиться красивой типографикой. Поймите меня правильно: я люблю заголовки и подзаголовки, привлекающие внимание читателей и креативные с точки зрения типографики, но пренебрегать такими понятиями, как различимость и баланс, в блоке текста нельзя.

Итак, приступим!


ВСЁ ПО ПОРЯДКУ: ПРЕДПРОЕКТНОЕ ИССЛЕДОВАНИЕ


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

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


КОНТЕНТ


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


Пользуйтесь всеми типографическими средствами


По мере чтения текста отмечайте для себя его структурные единицы и отдельные элементы; составьте их перечень. Используйте список как набросок простого руководства по стилю. Кроме обычных абзацев, заголовков и неалфавитных знаков вы обнаружите детали, незаметные для большинства: выделенные участки текста, цитаты, выделения внутри цитат и, что особенно актуально в наши дни, таблицы с данными и подписи к рисункам. В идеале, в шрифтовой семье должно быть достаточно «родственников» для организации всех этих элементов.

Говоря на языке гипертекстовой разметки, убедитесь, что вы предусмотрели все HTML-элементы. На этом этапе можно даже создать образцы HTML и CSS-файлов, содержащие все необходимые элементы и правила и сохранить их как Project-Typography.html. Легко догадаться, что этот файл будет основой типографической системы проекта и пригодится при разработке контрольных точек (breakpoint’ов) адаптивного сайта.


Определите время, необходимое для прочтения текста


Скорость чтения может варьироваться от сотни до нескольких тысяч слов в минуту. Большинство взрослых людей читает от 200 до 250 слов в минуту. Посчитать время чтения любого текста достаточно просто: надо лишь разделить количество слов на 250. Если у вас есть образец текста для будущего проекта, вставьте его в автономную версию вашей любимой CMS и запустите простой скрипт для оценки времени чтения.

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


Оцените, насколько легко и комфортно читается текст


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

Кроме того, при корректировке контента и типографики эти инструменты можно использовать вместе с копирайтером — для отслеживания прогресса.

Один из показателей — Автоматизированный индекс удобочитаемости (Automated Readability Index, ARI). Он основан на подсчёте знаков, слов и предложений, и потому позволяет контролировать процесс в реальном времени. В отличие от него, формула школьного теста Флеша-Кинкейда (Flesch—Kincaid Grade Level) считает слоги, и для проведения такой оценки в реальном времени требуется больше ресурсов.

Другой параметр, помогающий оценить легкость восприятия прочитанного, — индекс Флеша (Flesch Reading Ease). Результат, рассчитываемый исходя из количества слов, предложений и слогов, помогает определить уровень сложности контента. Для большинства основных языков существует своя версия. Хотя некоторые веб-проектировщики открыли для себя этот инструмент совсем недавно, в издательствах учебной литературы и правительственных агентствах его уже много лет используют для оценки сложности материала для учеников разных ступеней.

Рассчитывать этот параметр для каждого отдельного текста вручную — сущий мазохизм. Я предлагаю попробовать полезный инструмент — Article Readability Stats, PHP-скрипт, который мы в Creative Nights разработали для себя.


Контентная стратегия, информационная архитектура и микротекст


Если мы на время отвлечёмся от типографики и поговорим о контентной стратегии (области, посвящённой планированию и управлению контентом и организации издательских процессов) и информационной архитектуре (области, занимающейся организацией и описанием контента), мы сможем предотвратить ряд проблем.

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

Названия категорий (обычно их определяет информационный архитектор) могут стать настоящей головной болью для веб-дизайнера — из-за ограниченного пространства в строке навигации или колонке. Готов поспорить, что каждый веб-дизайнер хоть раз пытался изменить или сократить названия категорий, чтобы уместить их в доступное пространство. Конечно, всегда можно уменьшить кегль или взять узкий шрифт, но если и это не помогает, мы просим информационного архитектора найти иное решение.

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