Как сделать текст комфортным для чтения

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

В то же время, слишком многие дизайнеры заботятся только об эстетике типографического решения. Проблема заключается в том, что мы часто путаем типографику и леттеринг, хотя это совершенно разные вещи. Одного взгляда на выдачу по тэгу «типографика» на 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 разработали для себя.

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

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

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

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

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

Контекст

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

Мы знаем, что планшеты используются для презентаций, для просмотра твитов за завтраком или чтения статей в туалете (те, кто пренебрегает этим фактом, не понимают потребности пользователей). Пространство экранов грядущего поколения устройств не пойдёт ни в какое сравнение с пространством 96-пиксельного 30-дюймового монитора. Мы высоко ценим универсальность интернета, но мы также должны осознавать, насколько разнообразны устройства и сами пользователи.

Проблемы программного характера

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

Эти скриншоты шрифтов Verdana, Proxima Nova, Arial, Adelle Sans и Georgia размером 16 пикселей (исключение составляет Proxima — 18 пикселей) были сделаны в браузере Firefox 18 на Windows 7. Proxima и Adelle рендерятся как веб-шрифты, остальные — как стандартные системные шрифты большинства ОС. Первые пять строк сделаны с выключенным ClearType.

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

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

Если для вашего проекта очень важна поддержка пользователей Windows, используйте шрифты, хинтованные вручную, такие как TheSans Office от LucasFonts (эти ребята известны своей дотошностью в отношении хинтинга) или другие шрифты, в большом числе разработанные для приложений Windows Office (их названия обычно содержат частицы «Com», «Offc», «Office»). Выбирая отдельный шрифт для пользователей со старыми версиями системы Windows, не беспокойтесь и просто используйте проверенные Arial, Georgia или Verdana.

За более подробной информацией о рендеринге шрифтов рекомендую обратиться к статье Тима Аренса (Tim Ahrens) «Поговорим детально о рендеринге шрифтов» («A Closer Look at Font Rendering»).

Аппаратные проблемы

В этой области мы сталкиваемся с проблемой многообразия значений пиксельной плотности, в результате страдает и типографика. Одно из интересных решений — встраивать на сайт шрифты с несколькими уровнями качества для различных плотностей, аналогично шрифтам нескольких уровней, используемым в печати для более точного контроля растекания краски по бумаге. Подробнее об этом подходе можно узнать из статьи Оливера Райхенштайна «Новый сайт с адаптивной типографикой» («New Site With Responsive Typography»).

Глифы по-разному отображаются даже на устройствах одного и того же производителя. Здесь видно, как шрифт Adelle размером в 16 пикселей выглядит на iPhone 3G, iPad 3 и iPhone 4S (cкриншоты веб-страниц, увеличенные в Photoshop).

Другой пример — это верстка для электронных биллбордов и телеэкранов, требующая более насыщенных начертаний и большего контраста. В подобных случаях нам приходится перескакивать через две ступени в шкале насыщенности и сочетать нормальное начертание со сверхжирным. Сделать предпросмотр работы на настольном компьютере или Retina-диплее недостаточно. Как и в случае разработки для мобильных устройств, необходимо провести тестирование на реальном оборудовании.

Тип интерфейса

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

Для контентных сайтов характерно разнообразие тем (даже среди нишевых ресурсов), поэтому история должна выстраиваться в строгой последовательности — иначе пользователь её не поймёт. (Помните об устройствах, упоминавшихся выше?)

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

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

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

Пользователь

Каждый пользователь интернета — наш потенциальный клиент. Об этом нельзя забывать, особенно при создании многоязычного сервиса. Если на кнопке впритык умещаются английское «Return» («Вернуться»), французское «Retour» и немецкое «Zurück», то хорватское «Povratak» или венгерское «Visszatérés» могут на ней не поместиться.

Проблемы доступности для пользователей

Дислексия — это нарушение способности читать. Например, мозг человека, страдающего дислексией, видит символы как картинки, он переворачивает буквы вверх ногами или зеркально отражает. В результате строчную букву «a» со слабым хвостом такой пользователь может принять за курсивную «e».

Кроме того, страдающие дислексией люди с большим трудом считывают основную часть символов в геометричеких шрифтах — из-за сходства в форме и рисунке знаков. Буква «p» в зеркальном отражении может выглядеть, как «q», а перевернутая «n» — как «u». Это не значит, что нужно срочно переходить на специализированные шрифты, однако каждый грамотный дизайнер обязан знать о подобных вещах.

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

Дополнительный вес помогает удержать буквы на месте. Показаны шрифты Futura и Open Dyslexic.

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

Люди с нарушением цветового восприятия видят сглаженные буквы иначе.

Выбирайте шрифт исходя из его функций, а не формы

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

Небольшое отступление. Выбору шрифта, соответствующего атмосфере, виду и настроению проекта, посвящено множество уроков и руководств. Создавать нужную атмосферу, пробуждать эмоции и выделять бренд среди конкурентов — задачи графических и UI-дизайнеров. Типограф, или верстальщик, смотрит на всё под другим углом: он начинает с утилитарных вопросов и целей проекта и отталкивается от них. Для создания успешной, законченной во всех отношениях работы зачастую необходимо учитывать оба подхода.

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

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

Шрифты с засечками: с чего всё началось?

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

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

Мы все это знаем, но часто забываем отойти назад и окинуть взглядом всё полотно. Например, мне нравится, как Виталий Фридман и Эллиот Джей Стокс обосновали своё решение использовать для основного текста в Smashing Magazine шрифт без засечек. Взглянув на страницу издалека и охватив одним взглядом разметку и все детали интерфейса, они сделали вывод:

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

— Виталий Фридман и Эллиот Джей Стокс

Различимость букв

Ещё один важный критерий различимости — то, насколько каждый глиф отличается от других глифов того же шрифта. Для оценки качества и сравнения гарнитур дизайнеры используют панграммы, или короткие образцы. Например, латиницей часто набирают «The quick brown fox jumps over the lazy dog», «Handgloves» и «Hamburgefonstiv».

Дизайнер Джон Тэн (Jon Tan) пошёл дальше и придумал набор символов «aegh! iIl1 0O». Это отличный способ получить представление о шрифте и проверить различимость строчной i и заглавной I, буквы l и цифры 1, цифры 0 и буквы O.

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

Старайтесь избегать неоднозначности в рисунке букв. Сверхувниз: League Gothic, Gill Sans, Myriad Pro, Neue Helvetica.

Чужая письменность

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

В венгерском можно часто встретить буквосочетание gy, в иекавских диалектах некоторых южно-славянских языков — ij, не говоря уже о диграфах(ch, dž, ij, lj и ty) и триграфах (dzs и sch), которые обычно представлены двумя или тремя глифами соответственно.

Любопытно, что в итальянском алфавите буквы k, j, w, x и y используются только для заимствованных слов, а некоторые из них закреплены исключительно за звуками разговорной речи, например, «k» — это усиленная [c]. По крайней мере, так мне рассказал парень, которого я подрезал в пробке, когда был в Италии. Но я отвлекся. Следствием несколько сокращённого алфавита становится частое употребление cc, ll, tt и zz рядом или в окружении o и i. Как вы могли догадаться, межбуквенные интервалы в таких сочетания могут выглядеть некрасиво.

В юго-восточной Европе распространены фамилии, заканчивающиеся на č или ć. Кому понравится, если в его имени или фамилии вместо диакритика будет «голый» знак, или, что еще хуже, знак, набранный альтернативным шрифтом? Например, в датском и норвежском языках часто используют ø, а в немецком — ß, и всё это только в пределах латиницы.

Нужно знать символы и буквосочетания целевого языка.

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

Мы лучше читаем знакомые шрифты, но с незнакомыми мы больше запоминаем

Считается, что люди лучше читают знакомые шрифты (PDF, 11.5 MB). Даже эксперты, а именно Зузана Личко (Zuzana Licko) и Эрик Шпикерман (Erik Spiekermann), говорят, что мы «читаем лучше всего то, что читаем чаще всего». Изучите историю шрифта, который вы собираетесь использовать, и сравните его с гарнитурами, привычными для целевой аудитории.

Skolar, шрифт Дэвида Бржезины (David Brezina), был разработан для научных публикаций с использованием нескольких языков. Люди учёной среды привыкли видеть Times New Roman. Skolar — свежий и современный шрифт, однако многими чертами и внешним видом он схож с Times New Roman, и потому легко воспринимается данной группой пользователей. Такое решение — беспроигрышный вариант и удачный отправной пункт для дальнейшей работы. Как бы то ни было, не забывайте экспериментировать и искать альтернативы, которые могут понравиться целевой аудитории.

Skolar как альтернатива для Times и Times New Roman. Вы можете заметить разницу между двумя вариантами Times?

Недавнее исследование Коннора Диманд-Яумана, Дэниела М. Оппенхеймера и Эрики Б. Вон «Влияние затруднённого чтения на достижения в учёбе» (Connor Diemand-Yauman, Daniel M. Oppenheimer, Erikka B. Vaughan «Effects of Disfluency on Educational Outcomes», PDF, 1.3 MB) продемонстрировало вот что. Информация, набранная трудночитаемым шрифтом, запоминалась лучше, чем информация, набранная лёгкой для восприятия гарнитурой. Исследование показало, что усилия, связанные с трудностью чтения, стимулируют работу памяти. Это не значит, что теперь мы должны выбирать самые необычные шрифты, но поискать альтернативу популярной гарнитуре стоит.

Акцидентные шрифты в эпоху адаптивного дизайна

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

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

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

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

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

Nimbus Sans Condensed и Nimbus Sans Extended в действии.

Сочетание шрифтов

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

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

Шрифт Aller в сочетании с Minion Pro, Georgia и Adelle. Обратите внимание, что Minion Pro и Georgia требуют дополнительной корректировки высоты строки.

Проверенный подход

Самый простой способ найти удачное сочетание шрифтов — это изучать их связи и следовать здравому смыслу.

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

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

JAF Bernino Sans имеет несколько степеней насыщенности и разную ширину знаков. Серым выделен ложный курсив, называемый также наклонным начертанием. Некоторые браузеры способны мгновенно делать шрифт наклонным с помощью CSS. Как бы то ни было, в области типографики ложный курсив считается преступлением.

Хорошим сочетанием является комбинация шрифтов одного автора, так как они имеют общую ДНК: пропорции, рисунок, ширину и угол наклона штрихов. Посмотрите на шрифты Йоса Бейвинги (Jos Buivenga), Вероники Буриан (Veronika Burian), Мэтью Картера (Matthew Carter), Николы Дурека (Nikola Durek), Адриана Фрутигера (Adrian Frutiger), Хосе Скаглионе (Jose Scaglione), Марка Симонсона (Mark Simonson) и уже упоминавшегося Эрика Шпаркермана, и попытайтесь увидеть почерк каждого дизайнера.

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

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

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

• «Лучшие практики сочетания шрифтов» («Best Practices of Combining Typefaces») Дугласа Боннвилля (Douglas Bonneville)
• «Какой шрифт использовать?: Пять принципов выбора шрифтов и набора» («‘What Font Should I Use?’: Five Principles for Choosing and Using Typefaces») Дэна Майера (Dan Mayer)
• «Как выбрать шрифт» («How to Choose a Typeface») Дугласа Боннвилля

Неалфавитные знаки

Акцидентные и декоративные шрифты подходят для коротких фрагментов текста, таких как заголовки или врезки: они задают тон и атмосферу и разбивают объемный текст на части (помните раздел о скорости чтения?). Текстовые шрифты строго утилитарны и предназначены для продолжительного чтения. Чтение, особенно с экрана компьютера или другого устройства, когда внимание так и норовит перескочить на что-то другое, спустя какое-то время может наскучить.

«Дизайнерам нравится ровный серый тон страницы, но для читателя он — злейший враг».

— Эрик Шпикерман

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

Ответственность лежит на нас

В своём решении нужно учитывать два важных фактора. Во-первых, если ваш выбор не понравится читателю, он изменит шрифт благодаря настройкам приложения или устройства. И если он его заменит, то, скорее всего, на какой-то случайный шрифт — таким образом, все ваши усилияпойдут коту под хвост. Раньше, когда в Internet Explorer использовали абсолютные величины для высоты строки и относительные величины для букв (по крайней мере, так мне рассказывали), даже небольшое увеличение размера букв приводило к полному хаосу на странице.

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

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

Автор: Марко Дугонджик (Marko Dugonjic), перевод: Proactivity

Оригинал: http://www.smashingmagazine.com/2013/02/18/designing-reading-experience/