Мобильная типографика

  • 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 пикселей текст будет разбит на два столбца.

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












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


Поделиться публикацией
Ммм, длинные выходные!
Самое время просмотреть заказы на Фрилансим.
Мне повезёт!
Реклама
Комментарии 11
  • +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 я натыкаюсь на сайты с темным фоном, просто закрываю вкладку, даже не пытаясь что-то прочитать.
          • 0
            Вот только проблема не с размером шрифта как таковым, а с размером самого экрана. Сайт на экране мобильного выглядит слишком мелким, штифты микроскопические.
            При этом разрешение экрана вполне себе соответствует десктопам.
            Т.е. завязаться именно на разрешение — идея так себе.
            • 0
              Хотя, может и нет.
              Проверка разрешения на моем телефоне показала:
              разрешение экрана — 720 х 1280
              разрешение экрана браузера — 360 х 559
              • 0
                Ну совсем весело, дополнил правила вот так:
                @media (max-width: 640px) { body {font-size:1.5rem;} .card-title {color: red} }
                @media (min-width: 640px) { body {font-size:1rem;} .card-title {color: green}}
                @media (min-width:960px) { body {font-size:1.5rem;} .card-title {color: blue}}
                @media (min-width:1100px) { body {font-size:1.5rem;} .card-title {color: yellow}}


                И вижу на том же телефоне синие заголовки, т.е. срабатывает min-width:960px — вот как?

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