Статьи

Основы адаптивной типографики

Автор: Оливер Райхенштайн (OLIVER REICHENSTEIN), 1 июня 2012
Оригинал: http://ia.net/blog/responsive-typography-the-basics/
Адаптированный перевод: Егор Стремоусов, 1 ноября 2013

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

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

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

  1. Адаптивный макет: пошаговое изменение макета под ограниченное число размеров экрана.

  2. Резиновый макет: когда макет использует всю доступную ширину экрана.

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

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

Выбор шрифта

Правильный характер

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

Мы разработали свой собственный шрифт для нашего сайта с целью проведения адаптационных экспериментов. Мы выбрали шрифт с засечками, поскольку это соответствует нашему характеру и отражает изысканность наших материалов (по крайней мере, нам так кажется). Для iA Writer мы использовали моноширинный шрифт. Поскольку главной целью этого приложения является помощь в написании черновика, мы умышленно взяли Nitti — шрифт, который делает текст сильным и, в тоже время, аккуратным. Решение использовать моноширинный шрифт было продиктовано еще и тем фактом, что операционная система первого iPad не имела автоматического кернинга для пропорциональных шрифтов. Вместо того, чтобы использовать пропорциональный шрифт, который будет плохо смотреться, мы решили запустить приложение в жизнь с моноширинным шрифтом.

С засечками или без?

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

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

Какой размер?

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

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

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

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

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

Мы пропагандируем эти размеры, «пропорциональные перспективе», с 2006 года. Изначально, наше утверждение, что шрифт Georgia размером 16 пикселей превосходно подходит для базового шрифта, вызвало волну агрессии и усмешек. Однако, теперь это более или менее устоявшийся стандарт. С ростом разрешений экранов этот стандарт медленно устаревает, но об этом позже.

Высота строки и контраст

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

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

iPhone vs iPad

Все, что мы узнали про адаптивную типографику, пришло из процесса поиска идеальной типографики в нашем приложении. Когда мы разрабатывали iA Writer для iPad, мы потратили несколько недель на разработку правильных параметров текста. Тогда высокое разрешение экрана iPad стало для нас испытанием, которое потребовало определенного времени на преодоление. Когда Apple встроила retina-дисплеи в iPad и iPhone, все началось заново. Мы могли бы написать целую книгу о том, как получили канонический вид шрифта в iA Writer, но пока есть так много, что нужно рассказать о более общих вещах, я попридержу коней.

Если вы сравните текущую версию iA Writer для iPhone с версией для iPad, вы можете заметить, что размер шрифта в них разный.

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

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

  2. Экран iPhone меньше, и приходится учитывать это ограничение.

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

Поскольку iPhone преподносится к лицу ближе, а размер экрана у него меньше, то высота строки также уменьшается:

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

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

А что с настольными компьютерами?

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

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

Вы можете спросить: «Почему вы не позволили пользователю самому определять размер шрифта?». Потому что размер шрифта не зависит от вкусовых предпочтений человека, а определяется дистанцией чтения. Поскольку большинство сайтов и приложений используют небольшой размер шрифта, новые пользователи с самого начала будут устанавливать привычный им маленький размер и никогда не смогут испытать настоящее удовольствие от работы с нашим приложением. Наша цель не в том, чтобы добиться одинакового отображения у всех пользователей, а в том, чтобы iA Writer работал без настроек и без лишних заморочек, позволяя сосредоточится лишь на написании текстов. Такой подход является ключом к успеху этой программы и, если его поменять, пропадет сама суть приложения. (Что действительно стоит улучшить, так это доступность для людей с ограничениями по зрению).

Хорошо, но почему бы тогда не подстраиваться под разрешение экрана автоматически? Не будет ли это действительно адаптивной типографикой? Все верно, и мы уже работаем в этом направлении. Но сейчас, помимо адаптации к разрешению экрана необходимо также выбирать правильный оптический вес текста, чтобы быть уверенным, что шрифт работает именно так, как и задумывалось, во всех размерах и разрешениях. С изменением размера шрифта поменяется также и оптическое восприятие текста. Вот почему версии iA Writer для Mac, iPad 1/2 и iPad3 отличаются друг от друга. Чтобы объяснить логику адаптации шрифтов полностью, а также наши соображения, которыми мы руководствовались при разработке нового сайта, мне потребуется немного больше времени и пространства. Так что ждите продолжение!

Отзывы

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

«@iA Дочитал до фразы „проектирование взаимодействия — это инженерная деятельность“. Что это значит?» @bokardo

На случай, если кому-то еще будет интересно… Полная цитата звучит так:

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

Обычно я говорю:

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

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

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

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

Резюмируя, можно сказать, что в процессе проектирования сайтов и приложений, большую часть времен мы думаем о компромиссах и выбираем из всех зол наименьшую. Это то, что выбивает большинство графических дизайнеров из колеи, поскольку они привыкли к тотальному контролю. Больше информации об этом вы можете почерпнуть в великолепной презентации Чои Вина (KHOI VINH) «Разница между графическим и экранным дизайном» (2007).

Реклама
Стандартный

Один ответ на “Основы адаптивной типографики

  1. Уведомление: Типографский калькулятор – PEREDELKA

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход /  Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход /  Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход /  Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход /  Изменить )

Connecting to %s