Шрифт для мобильной версии сайта

Шрифт для мобильной версии сайта

​Рекомендации от дизайнеров развлекательной соцсети «Фотострана».

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

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

Особенности типографики iOS и Android

До запуска iOS 9 системным шрифтом iOS был Helvetica Neue, однако после выхода новой версии его заменили на San Francisco. Шрифт предлагается в двух начертаниях: Display (для использования в UI-элементах интерфейса и для текстов с большим кеглем) и Text (для объёмного текста меньшего размера).

В подсемействе Text расстояние между буквами больше, чем в Display. Апертуры этих текстовых шрифтов тоже шире, чтобы маленький кегль был более разборчивым. Одна из особенностей San Francisco заключается в том, что это динамический шрифт: он меняет начертание в зависимости от кегля. Система автоматически переключает шрифт на Display после того, как его размер превысит 20pt.

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

Material Design, который применяется на Android-устройствах, предусматривает большие отступы между элементами, а также широкую вариацию кеглей для создания иерархии.

В iOS с этой целью, как правило, используют не размер шрифта, а его насыщенность. Если у Roboto только шесть её вариаций, то у San Francisco их 15: шесть для подсемейства Text и девять — для Display.

В своем приложении можно использовать любой шрифт формата True Type (.TTF), при этом следует уделить особое внимание приобретению лицензии. Даже если шрифт бесплатный, необходимо уточнить, требуется ли плата за его коммерческое использование. Лицензия также должна соответствовать изначальному запросу: шрифт, который был куплен для веб-интерфейса, нельзя использовать в мобильном приложении или в логотипе.

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

Разборчивость

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

В Helvetica почти невозможно разобрать первые три буквы, тогда как Source Sans Pro читать легко. Helvetica не подходит для работы с интерфейсами: шрифт создавался ещё в 1957 году и изначально не был предусмотрен для использования на небольших экранах. Именно поэтому Apple разработала San Francisco.

Размер шрифта и иерархия контента

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

Однако слишком крупный шрифт также неудобен. Из-за чересчур короткой строки мы вынуждаем читателя бегать глазами и тем самым сбиваем его ритм чтения. В таких условиях информацию воспринимать сложнее. Лучше использовать базовые параметры устройства, для которого создаётся дизайн. Для iOS это 17pt, для Android — 13sp.

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

Читайте также:  Acer extensa 5235 драйвера

Величину заголовков и подзаголовков поможет определить типографическая шкала. Классическая шкала по терминологии Роберта Брингхёрста прогрессирует следующим образом: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24 и так далее. Однако можно использовать другую градацию (золотое сечение или гармонические интервалы). Расчеты удобно вести с помощью специального калькулятора на сайте modularscale.com.

Необходимо заранее определиться с иерархией контента, чтобы в соответствии с ней подбирать размеры шрифта. Если базовый шрифт — это 1em, то заголовок уровня H1 — 3em. Надписи и маленький текст будут на размер меньше базового кегля.

Длина строки

Оптимальная для комфортного чтения длина строки — 50-60 знаков с пробелами. Такой размер подходит для десктопных приложений, однако экраны мобильных устройств меньше, поэтому для них лучше использовать строки длиной в 30-40 знаков.

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

«Воздух» в тексте

  • Чем меньше размер экрана, тем больше внимания стоит уделить межбуквенному расстоянию.
  • Лучше добавить в текст «воздуха» и увеличить высоту строки так, чтобы она была пропорциональна базовому размеру шрифта (обычно она соответствует 120-150% от кегля основного текста) — так можно облегчить чтение. Для этого также пригодится система интервалов, которая нужна для определения размера разных элементов текста. Если в кегле используется золотое сечение, то оно должно быть и в интервалах. Так дизайн будет выглядеть аккуратно и гармонично.
  • Следует обращать внимание на пробелы между абзацами: это дополнительное пространство служит опорной точкой для глаза и создаёт ощущение, что текст не слишком плотный и его легко читать.
  • При организации композиции экрана нужно помнить о «законе близости»: расположенные рядом объекты воспринимаются как единая группа. И наоборот: однородные элементы, между которыми есть интервал, не будут считаться одним целым.

Цветовой контраст

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

  1. ​Чем сильнее контраст, тем сложнее глазам. Поэтому серый оттенок текста лучше. В итоге получается серый текст на сером или белом фоне. Однако если цвет текста и фона похожи, то восприятие затрудняется.
  2. Чем сильнее контраст, тем лучше. Текст, который сильно контрастирует с фоном, также сложен для восприятия. Чтение белого текста на черном фоне быстро утомляет глаза. Даже пользователи с хорошим зрением будут испытывать дискомфорт.

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

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

  • Крупный текст (18 кегль и выше или 14 кегль в полужирном начертании) — 3:1.
  • Текст, который выступает частью неактивного элемента интерфейса, не требует контрастности.

Обеспечить достаточную контрастность текста поможет сервис Color Contrast Checker.

Тестирование

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

Если используется два шрифта, лучше обратиться к сайту discover.typography.com: он поможет подобрать пару шрифтов, которые будут хорошо сочетаться друг с другом. Можно также создать матрицу, которая покажет, как смотрятся различные комбинации. Чтобы узнать, как шрифт влияет на конверсию, нужно применять A/В-тестирование.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Читайте также:  Возведение числа в отрицательную степень пример

При разработке дизайна необходимо учитывать корректность его отображения не только на больших экранах, но и на мобильных устройствах. И в первую очередь это касается читаемости контента. Поэтому необходимо уделять особенное внимание типографике, которая является основой веб-дизайна. На эту тему есть полезная статья шестилетней давности — 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:

Пример с media queries:

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

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

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

Читайте также:  Создатель социальной сети вконтакте

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

Войти

10 советов для мобильной версии сайта

Ссылка на полную версию

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

Заголовки – короче короткого

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

Размещение пояснения прямо в поле

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

Размещение пояснений над полем

Если поместить подсказку в само поле невозможно, размещайте ее над ним. При таком подходе пользователь не потеряет пояснение из виду при приближении (zoom in) самого поля. Если подсказка находится под полем, в результате «зума» она может оказаться вне видимой области.

Все, что всплывает…

Попапы и прочие всплывающие и накладывающиеся блоки выглядит в мобильной версии несуразно и могут не работать вовсе. А вставка видео с YouTube или схемы проезда с карт Google – натуральный саботаж, так как во многих случаях нажатие на такой элемент приведет к вызову нативного приложения этих сервисов. Результат – пользователь покидает ваш интернет-магазин. Ищите альтернативные варианты.

Использование иконок из шрифтовых наборов

Красивые спрайтовые иконки – замечательная вещь, но в мобильном вебе их применение далеко не всегда является лучшим решением. Разные возможности и разрешения экранов устройств усугубляют эту проблему. Хорошая альтернатива – иконки из шрифтовых наборов, например Font Awesome; glyphish; iconsweets; symbolset.

Обоснованный выбор элементов

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

Размер шрифта – 14 px

Думаете, это перебор? Вовсе нет. Использовать меньший размер (12 px, никак не меньше) можно только в пояснениях к формам, которые содержат более двух-трех слов.

Толстые пальцы и трясущиеся руки

Ловкость рук присуща далеко не всем вашим посетителям. Каждый владелец устройства с сенсорным экраном хотя бы раз промахивался мимо объекта, на который он хотел нажать. Ну а у кого-то просто пальцы толстые, и они могут одним махом попасть сразу в несколько рядом стоящих ссылок. Учитывайте это, и делайте все кнопки, на которые можно нажать, крупными (рекомендованный размер – 40 на 40 px). И не собирайте их в одну кучу, оставляйте вокруг каждого важного объекта по 10 px пустого пространства.

Использование API

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

Ссылка на основную публикацию
Adblock detector