Адаптивная типографика

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

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

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

Основа адаптивной типографики — пропорциональное изменение размера шрифта.

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

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

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

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

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

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