Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

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

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

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

Пространство

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

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

Так, например, проект Paid to Exist, Mozilla Russia, Colly наглядно демонстрируют, как минимальное количество текста способствует лучшему усвоению и совершенно не портит общий дизайн.

 

Чувство меры

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

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

Мобильная версия Ведомости,  адаптивные дизайны сайтов Amy Stoddard, РИА Новости предлагают малую длину строки, но читабельную, в пределах 39 символов и даже чуть меньше.

Масштабирование

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

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

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

Аналогично выглядит и мобильная версия сайта Lenta.ru. Так, если в десктопом варианте есть боковая панель меню, то в мобильном варианте есть скрытое меню-«гамбургер», которое имеет немного другое оформление шрифта. Он и жирный, и буквы все прописные, и даже раздел регистрации перенесен. Соответственно, что нажимать пальцем по пунктам куда удобнее и читать быстрее и проще. Глаз быстрее находит знакомое и нужное. Что же касается статьи, то она осталась без изменений по оформлению, но интерес представляет расстояние между буквами и между строчками. Тест не превращается в «кашу».

Гибкость

Особенность мобильной типографики не в том, чтобы быть уникальной или полностью соответствовать десктопной. Напротив, она должна быть гибкой. Откройте один и тот же сайт в разных браузерах на одном смартфоне и в 90% случаев вы увидите чуть-чуть, но разное оформление. Такова особенность самого движка браузера и неважно «закрытая» у вас система WP/iOS или «открытая» Android. Opera, UC browser, Chrome, IE, Safari и прочие браузеры до сих пор работают немного по-разному. Обсуждать их можно долго и не здесь.

Именно поэтому с каждым годом веб-мастера стараются создавать сразу и один вид сайта: адаптивный. Именно гибкий, с подстраиваемой сеткой сайта, чтобы позволить посетителям видеть информацию в наиболее удобном для восприятия варианте. Сравните проекты Fork CMS в двух вариантах, Mr. Simon Collison и даже наш старый знакомый пример из прошлых материалов: интернет-магазин OZON, а также для сравнения приведем и магазин Wiggle (он ниже в материале).

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

Левый край

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

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

Так или иначе, но на мобильных устройствах текст читается в отвлекающих ситуациях, то есть пока человек едет в транспорте, например, опустил взгляд -> почитал -> перевел и посмотрел остановки, людей -> опять читает. Соответственно, что глаза по возращении ищут что-то знакомое, то место, где остановились. При выравнивании по ширине взгляд, в большинстве случаев, начинает «плутать».

Два примера ниже прекрасно покажут разницу без лишних слов. Портал RBC.ru и SROportal, причём во втором случае придется вручную масштабировать еще.

Текст – не всё

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

Ремарка: если сравнить такое меню с выпадающим меню Lenta.ru, то по «Argos’овским» пунктам меню удобнее нажимать пальцем.

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

Что в совокупности

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

  • Пространство. Большее количество свободного места позволяет лучше ориентироваться и воспринимать написанное.
  • Интервалы. Между строками расстояние должно быть больше, чем между словами. Не слишком далеко, не слишком близко. Обычно веб-мастера останавливаются на 20%.  
  • Выравнивание.  Текст, размещенный по левому краю, а не по ширине, быстрее усваивается.
  • Шрифт. Строгие, не тонкие, хорошо видимые буквы удобнее и проще читать, поэтому часто встречаются стили Normal и Regular,  минимум жирного и наклонного.
  • Простота. Простота в тексте, в количестве картинок, в самих картинках. Экран смартфонов маленький и развернуться фантазии веб-дизайнера негде, посему в мобильной версии лучше придерживаться стиля «для чтения», чем «захламлять» страницу, которая еще и загружаться будет доооооолго.
  • Тестирование. Тестирование мобильной версии сайта не так сложно. В браузерах есть расширения, как и в редакторах позволяющих придать окну браузера или документу Photoshop нужный размер, поэтому определить, насколько читабелен текст и как будут расположены элементы на странице всегда можно.

Сложные итоги

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

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

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

Как вам материал?