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

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

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

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

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

 

Хорошая читаемость текста - это важно

Для веб-дизайнеров поясню: читаемость- это легкость, с которой воспринимается основной текст, и она напрямую влияет на уровень напряжения зрения при чтении. Не стоит путать ее с разборчивостью текста, которая определяется тем, насколько хорошо различимы отдельные символы в тексте. Техники для легкости чтения текста дополняют приемы для удобства взаимодействия пользователя с сайтом UX (user experience), и наоборот. И их можно оценивать одинаковыми критериями. Например, плохая читаемость веб-сайта может привести пользователя в замешательство, и, в конце концов, он покинет сайт. Но если сайт читается легко,  то это едва заметно, и, тем не менее, вызывает симпатию и многое упрощает.

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

 

Как улучшить читаемость вашего текста

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

Многие приемы, о которых я расскажу в этой статье, были адаптированы для веб-страниц из уроков, которые я нашел в этой книге. К сожалению, книга не печатается уже больше 20 лет, и ее копия обойдется вам в 150$ на Amazon.com. 

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

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

 

Используйте поля вашей страницы

Благодаря полям, взгляд читателя может легко перемещаться по элементам страницы. Границы полей  отделяют основной контент сайта от дополнительных объектов, таких как ссылки и рекламные баннеры, позволяя читателю сконцентрироваться на тексте. Кроме этой чисто функциональной цели, поля также делают разметку более гармоничной.
Внешние поля включают в себя свободное пространство; они дают дизайнеру возможность задать определенное соотношение между основным текстом и остальными элементами. Словами Чихольда, «гармония между размером страницы и зоной печатного текста достигается, если и та, и другая имеют равные пропорции». Сегодня пропорции страниц книги отличаются от параметров большинства цифровых экранов, поэтому, чтобы применить этот принцип для веб-страниц, нам придется работать над гармонией между нашим текстом и непосредственно его цифровым носителем.
 

На практике

На нашей странице, взятой в качестве примера, внешние поля не очень велики. К тому же, основной контент буквально втиснут между двумя довольно громоздкими колонками. Во-первых, мы можем увеличить внешние поля текста вправо, тем самым дать взгляду читателю больше пространства для перехода с конца одной строки к началу другой, не отвлекая его от второстепенного контента справа. А увеличение левого поля текста помогает читателю легко найти начало следующей строки, и он может быстрее просмотреть статью и найти интересные ему темы.
Пропорции можно устанавливать интуитивно, увеличивая поля в разные стороны, пока контент не станет удобным для чтения. Мы можем попробовать сделать это  на нашем примере, добавив внутренние отступы (padding) в CSS (вместо полей (margin),  в данном случае). Этим мы просто вдвое увеличим отступы справа и слева:

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

Чтобы создать идеальное соотношение между текстом и контейнером этого текста, им нужно задать одинаковые параметры формы. Контент должен иметь те же пропорции (только меньшие), чем содержащий его элемент. Чихольд изучил море различных пропорций книг и пришел к выводу, что самые гармоничные размеры величины полей, это приблизительно 2:3:4:6 (верхнее, правое, нижнее, левое) для страниц книги, расположенных справа при развороте. Учитывая, что виртуальные страницы по этому признаку не отличаются, мы можем сделать поля симметричными и приспособить пропорцию 2:3:4:3, немного убирая зону левого поля. Текст веб-страниц не нуждается в таких больших боковых полях, как текст книги, поскольку веб-страницы не нужно адаптировать для перелистывания их большим пальцем руки.

Хотя определение отступов в процентах может показаться неплохим способом  их измерить, но проценты для отступов будут отражать только ширину контейнера объектов нашей статьи-примера, неправильно искажая верхние, нижние и боковые пропорции. Поэтому лучше работать с отступами, используя ems или пиксели до тех пор, пока зона чтения не станет равной в пропорциях своему контейнеру. Проще говоря, давайте начнем с 2em для верхних отступов в нашем примере. После применения выше описанного соотношения, отступы в нашей статье могут записываться как 2em 3em 4em 3em или 2em 3em 4em в единицах размера CSS. При том, что природа виртуального контента переменчива, это лишь приближенный вариант пропорций Чихольда. Для обычного текста в интернете (который, скорее всего, будет больше в длину, чем в ширину), поля должны быть в общем случае меньше сверху, и даже сбоку, и в большей степени снизу:

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

Мы можем также передвинуть текст вперед на ось z, еще больше выделяя его и уменьшая значимость второстепенного контента, создавая более четкий контейнер для нашего текста. Такую тактику мы можем успешно использовать для веб-дизайна, но книжным текстам она ни к чему:

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

 

Выбирайте хорошо читаемые шрифты

Выбор шрифта относится к аспектам микро-типографики, но он имеет огромное влияние на то, как выглядит сайт с точки зрения макро. В своей книге «Детали типографики» Хост Хочули подчеркивает эту взаимосвязь: «В типографике детали никогда нельзя рассматривать отдельно».

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

Шрифты, которые лучше всего читаются на цифровых экранах, обычно имеют следующие свойства:

• Большая высота строчных букв
• Слегка шире, чем ширина em width, но буквы не сжатые и не растянутые
• В основном без стилистических наворотов
• Крупный шрифт - романский (с засечками), для более мелкого - гротеск (без засечек)

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

• "Proxima Nova Regular", "Helvetica Neue", Arial, Helvetica, sans-serif;
• "Myriad Pro", Arial, Helvetica, sans-serif;
• "Fanwood Text", Georgia, Times, "Times New Roman", serif;
• "PT Sans", "Trebuchet MS", Arial, sans-serif;

На практике

Давайте применим, к примеру,  Myriad Pro для основного текста нашей странички:

 

Не забывайте измерять объем вашего текста

При вставке какого-либо текста, нам нужно учитывать его размер. Его можно определить в зависимости от количества символов в строке либо по числу слов. Я использую слова, потому что их считать проще, и еще я стараюсь следовать предположению Чихольда о том, что в одной строке находится от 8 до 12 слов. Если вы считаете на основе  символов, то от 45 до 85 - это оптимально. Когда параметры ширины и полей уже заданы, точный подсчет можно сделать с помощью двух атрибутов в CSS,  font-size и  word-spacing.

Когда вы принимаете решение насчет размера, постарайтесь достичь некоторого баланса. Шрифт не должен быть слишком крупным, чтобы особо не отвлекать читателя, когда он переходит на следующую строку; но, в то же время, не нужно делать его мелким настолько, чтобы пользователю приходилось буквально липнуть к экрану для чтения текста. Для большинства шрифтов, 16 пикселей вполне достаточно. По каким-то другим причинам, вы можете захотеть сделать его больше или меньше, но 16 пикселей - это отличный вариант, с которого стоит начать. Что касается пробелов между словами, то большинство браузеров определят их за вас, но если вам не удастся добиться оптимальной величины, то вам может пригодиться умение изменять этот параметр.
 

На практике

Давайте зададим 16-пиксельный шрифт для нашей странички и немного изменим пробелы между словами, чтобы добиться нужного результата. (добавление пробелов (word-spacing) поддерживается всеми основными браузерами). Возможно, что здесь вместо пикселей вы захотите использовать em или rem, чтобы разметка оставалась более адаптируемой, какой бы размер шрифта ни задал пользователь по умолчанию.

Пока мы не зададим новою высоту строк, на нашей страничка будет путаница, так что давайте разберем код для этой цели:

 

Задавайте подходящую высоту строк

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

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

На практике

Давайте увеличим высоту строки на 1,3  ems в нашем примере, используя ems так, чтобы высота строки осталась пропорциональной размеру шрифта, и посмотрим, как размер шрифта и высота строки сочетаются между собой.

Выбирайте стиль для абзацев

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

На практике

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

Мы определяем p + p вместо того, чтобы просто применить правило для всех тэгов p, поскольку хотим сделать отступ только для тех параграфов, которые идут за другими параграфами. Для тех, что следуют за заголовками, картинок и прочего, отступы делать не стоит.

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

 

Соблюдайте баланс контрастности текста

И последнее, чему стоит уделить внимание, это цвет текста. Контраст - это главный фактор, который влияет на напряжение зрения, и в особенности на  качество читаемости. Низкая контрастность между текстом и фоном  вызывает много осуждения и косых взглядов со стороны читателей, а это явный признак напряжения. Черный на желтом создает наибольший контраст, но мы привыкли воспринимать его, как знак предупреждения об опасности, что может  вызвать тревогу у читателей. Черный цвет на белом – это тоже высокая контрастность, но он слишком резкий для длительного чтения на экранах с задней подсветкой. Я пришел к выводу, что длинный текст лучше всего делать темно-серым (примерно #333) на белом или светло-сером фоне (но темнее, чем #EEE). Это огромное упрощение цветовой теории в целях моей статьи.

 

На практике

Для нашей статьи уже был выбран белый фон (он служит в качестве границ полей), вместе с более широким светло-серым фоном. Возможно, нам стоит оставить белый и сделать текст менее темным до #444. Затем мы можем использовать #000 для заголовков, чтобы немного больше их выделить:

 

Результат

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

 

Автор: Nathan Ford
Оригинал статьи: http://www.smashingmagazine.com/2012/05/02/applying-macrotypography-for-readable-web-page

Поделитесь
в социальных сетях