Пользователь
0,0
рейтинг
1 августа 2013 в 14:27

Дизайн → Мобильная типографика tutorial



При разработке дизайна необходимо учитывать корректность его отображения не только на больших экранах, но и на мобильных устройствах. И в первую очередь это касается читаемости контента. Поэтому необходимо уделять особенное внимание типографике, которая является основой веб-дизайна. На эту тему есть полезная статья шестилетней давности — Web Design is 95% Typography (автор Oliver Reichenstein).

Для начала рассмотрим основные моменты веб-типографики с примерами на мобильных устройствах.

Размер


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

В целом, размер шрифта на страницах может полностью менять внешний вид и привлекательность сайта. Modular Scale Calculator — калькулятор от Тима Брауна (Tim Brown), который поможет подобрать размеры шрифтов для сайта, в том числе в «золотой пропорции» (1:1.618).

Пример сайта с соотношением размеров шрифтов 16/24/72:


Контраст


Любой текст на сайте должен контрастировать с фоном, как при просмотре на десктопе, так и на мобильном устройстве. Этим, вроде бы простым и очевидным, правилом часто пренебрегают, поэтому случается видеть красный текст на фиолетовом фоне или желтый на голубом.

Кстати, есть даже сервис, который проверяет контрастность цветов на сайте — checkmycolours.com. Ниже представлены несколько сайтов с хорошим контрастом контента.





Отступы


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





Выбор шрифта


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



Эту проблему помогут решить специальные веб-сервисы: Web Font Specimen, Typecast app и Typekit’s font browser. Иногда целесообразно использовать разные шрифты для разных размеров экранов. Такое практикует, например, сайт A List Apart.

Кроме того, не стоит использовать нестандартные шрифты в неподходящих местах. Вот так, например, выглядит League Script, читать невозможно:



Адаптивный дизайн


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

Изменение размера шрифта


На большинстве сайтов используются px или em для того, чтобы задать размер шрифта. Em предпочтительнее, потому что позволяет пользователю менять размер шрифта в браузере. Но есть и недостаток — размер в em зависит от font-size родительского элемента. Поэтому лучше использовать rem: размер шрифта будет зависеть от корневого элемента — html:

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

Пример с media queries:

@media (max-width: 640px) { body {font-size:1.2rem;} } 
@media (min-width: 640px) { body {font-size:1rem;} } 
@media (min-width:960px) { body {font-size:1.2rem;} } 
@media (min-width:1100px) { body {font-size:1.5rem;} } 


Отступы и длина строк


Согласно исследованию Baymard Institute, оптимальная длина строки для удобного чтения — от 50 до 75 символов. Непросто добиться автоматического соответствия этому правилу на любом устройстве. Например, размер шрифта девайса по-умолчанию — 16 px, а мы хотим использовать 20 px. Получается, что наш шрифт должен быть размером 1.25 rem. Блок текста делаем шириной 675 px, тогда в строке будет помещаться 60 символов:

@media (min-width: 950px) { .container {width:675px;} } 

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

@media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } } 

При ширине более 1140 пикселей текст будет разбит на два столбца.

Хорошие примеры мобильной типографики












Полезно почитать


Кирилл @grokru
карма
405,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

Комментарии (8)

  • +8
    Спасибо за привлечение внимания к проблеме типографики на мобильниках и планшетах.

    Но, говоря про такую единицу измерения размера, как rem, уместно подчеркнуть, что IE8 не понимает её.

    (А равно и Safari на iOS 3.2 не понимает.)
    • +5
      IE8 на мобильных устройствах не используется.
      • +6
        О, это я понимаю. Однако, как мне кажется, речь идёт о разработке сайта, одинаково пригодного для употребления (чтения) и на настольных компьютерах, и на ноутбуках, а не только на мобильниках да на планшетах.
    • +1
      В процессе разработки нетрудно заодно задавать размер шрифта без rem, имея в виду браузеры вроде IE8.
  • +4
    Не знаю, нужны ли на неспециализированном сайте такие нюансы, но добавлю на всякий случай — люди с большинством видов дальтонизма читают выворотку (текст белым по черному, к примеру) гораздо хуже, чем наоборот. Ну, это кроме очевидных вещей, вроде красного шрифта на зеленом фоне. Поэтому желательно делать текст вывороткой больше и жирнее, особенно если читать там много.
    • +2
      Замечу, что и без дальтонизма лично мне гораздо приятнее и удобнее читать черным по белому. На компьютере это решается с помощью Evernote Clearly. На смарте/планшете порой приходится отправлять в Pocket.
    • 0
      А почему у дальтоников такие проблемы? Разве чёрный и белый не бесцветны для них в той же мере, в какой и для всего остального человечества? Я всегда предполагал, может быть наивно, что и чёрный, и белый, и серый цвет дальтоники воспринимают совершенно так же, как и недальтоники.
      • +1
        Я вам скажу как дальтоник: дальтоник — это не «видеть мир в 256 оттенках серого». Это несколько другое. Подтверждаю, читать белый по черному иногда настолько невыносимо, что приходится делать Ctrl+A, чтобы выделить весь текст (соответственно, инвертировав цвета).
        Особенно это касается мобильных сайтов — если гуляя по вебу через Opera Mobile я натыкаюсь на сайты с темным фоном, просто закрываю вкладку, даже не пытаясь что-то прочитать.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.