– Читать 14 минут

Какими должны быть шрифты, кнопки и цвета в мобильной версии сайта

Как выбрать шрифты для мобильной версии сайта

АУДИТ САЙТА — СКОРОСТЬ ЗАГРУЗКИ

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

Содержание

Что такое мобильная типографика
Рекомендации по веб-типографии для мобильных устройств
Какой размер шрифта использовать на сайте
- Размер заголовков
- Размер основного текста
- Размер второстепенного текста
- Критические размеры текста
- Проверка текстов на самом устройстве
- Пустое пространство
- Отсутствие декоративных элементов
- Длина строки- Сочетания цветов
- Заголовки
Как узнать устройства, с которых просматривают сайт
Как установить в CSS размер шрифта для мобильных устройств
Какими должны быть размеры кнопок для мобильных устройств
Какие выбрать шрифты для мобильной версии
FAQ
Заключение

Что такое мобильная типографика

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

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

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

Горизонтальная полоса прокрутки в мобильной версии

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

На примере слева все конверсионные кнопки расположены на видном месте, они достаточно крупного размера. На сайте справа слишком мелкие шрифты и не адаптивный дизайн:

Отсутствие адаптивного дизайна на сайте

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

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

Отсутствие корректного форматирования текста

В мобильном дизайне необходимо обращать внимание на ряд элементов, которые рассмотрим далее.

Какой размер шрифта использовать на сайте

Рекомендации отличаются в зависимости от используемой операционной системы, однако в любом случае размер букв должен быть удобным для чтения:

Оптимальный размер шрифтов для мобильных устройств

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

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

Более подробные инструкции можно получать, используя информацию, размещенную на Material Design.

Размер заголовков

Важно правильно подобрать размеры для всех уровней заголовков, используемых в тексте, чтобы подчеркнуть иерархию. Если для основного текста используется размер 16 px, для заголовков можно применять такие параметры:

42 px — для основного заголовка H1;
36 px — для заголовков второго уровня;
30 px — для H3;
24 px — для H4;
20 px — для H5;
18 px — для H6.

Размер основного текста

Специалисты рекомендуют следующие диапазоны:

для пользовательского ввода и основного текста: минимум 16 px;
для менее важного текста: 14 px;
межстрочный отступ — 24 px.

Размер второстепенного текста

Для второстепенного текста подойдет размер 13-14 пикселей, при этом желательно, чтобы этот размер отличался от основного текста более, чем на 1 px. В противном случае второстепенный текст будет слишком легко спутать с основным. При этом можно снизить яркость вторичного текста, используя более светлый серый оттенок.

Критические размеры текста

Минимальный текст, который можно использовать для мобильных устройств — 12px, однако он будет неудобен для пользователей со слабым зрением. Поэтому более предпочтительно остановиться на размере 14-16px. Слишком крупный шрифт может быть также неудобен пользователям, поэтому желательно протестировать внешний вид страниц на мобильных устройствах или с помощью специальных инструментов.

Проверка текстов на самом устройстве

Проверить, как выглядит текст на различных устройствах можно с помощью различных инструментов:

Google Mobile Friendly — позволяет проверить адаптацию под мобильные устройства добавленного HTML-кода или страницы, размещенной по указанному URL-адресу;
Bing mobile-friendliness — подходит для анализа адаптивности не только для Android-устройств, но и устройств с ОС Windows;
Responsinator — позволяет посмотреть, как будет выглядеть сайт на устройствах с различными размерами экранов;
Ipadpeek и iPhone Tester — данные эмуляторы позволяют проанализировать адаптацию под устройства Apple.

Пустое пространство

Между строками, абзацами, буквами и словами должны присутствовать интервалы, позволяющие с удобством читать текст:

Межстрочный интервал для мобильных устройств

Межстрочный интервал для удобного чтения на мобильном устройстве

Отсутствие декоративных элементов

Шрифты нужно выбирать без излишних декоративных элементов, которые могут затруднять чтение на маленьком экране. Также стоит учитывать, что на определенных операционных системах используются различные семейства шрифтов. Например, Apple традиционно использует шрифты San Francisco:

Семейство шрифтов для мобильных устройств

Семейство шрифтов San Francisco

Длина строки

Предпочтительно использовать не слишком большую длину строки, оптимально — 30-40 символов:

Оптимальная длина строки для мобильных устройств

Сочетания цветов

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

Дизайн сайта в монохромной цветовой гамме

Проверить контрастность цветовых сочетаний на сайте можно с помощью онлайн-сервиса checkmycolours:

Проверка цветовых сочетаний онлайн checkmycolours

Сервис Checkmycolours для проверки цветовых сочетаний

Данный сервис дает подробный отчет об ошибках, которые делают надписи неразборчивыми из-за неправильно выбранных цветов фона и шрифта:

Список ошибок в цветовой гамме сайта

В сервисе можно сразу изменить цветовые сочетания и проверить полученный результат.

Заголовки

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

Использование заголовков для структурирования текста

Как узнать устройства, с которых просматривают сайт

Прежде чем понять как должен выглядеть контент на сайте на мобильных устройствах, стоит проанализировать с каких устройств пользователи на него заходят. Это можно увидеть в Google Аналитике, раздел «Аудитория» — «Мобильные устройства» — «Устройства»:

Мобильные устройства аудитории в Google Analytics

Информация о мобильных устройствах аудитории сайта в Google Analytics

Кроме моделей, там можно узнать и разрешение экрана:

Разрешение экрана мобильных устройств в Google Analytics

Информация о разрешении экрана мобильных устройств в Google Analytics

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

Инструменты разработчика в Google Chrome

Здесь можно выбрать нужное устройство или указать разрешение:

Проверка отображения сайта на разных устройствах в Google Chrome

Проверка отображения сайта на разных устройствах в инструментах разработчика

Как установить в CSS размер шрифта для мобильных устройств

Медиа-запросы — специальные коды, которые позволяют прописывать правила отображения для определенных диапазонов разрешений экрана в CSS.

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

Можно размещать медиа-запросы такими способами:

внутри HTML-страницы, используя тег <style>. В данном примере для мобильных устройств с шириной экрана до 500px устанавливается шрифт 16 пикселей:

<style>
@media (max-width: 500px) {
body { font-size: 16px; } 
}
</style>

во внешней таблице стилей CSS, такой вариант более предпочтителен:

@media (max-width: 500px) {
body { font-size: 16px; } 
}

Также можно добавить значение line-height, определяющее межстрочный интервал. Его можно установить в процентном отношении, пикселях, пунктах или использовать множителили, умножающие текущий размер текста. Например, значение 2 в данном примере означает, что для мобильных устройств устанавливается двойной межстрочный интервал:

@media (max-width: 600px) {
 body {
    line-height: 2;
   }

Какими должны быть размеры кнопок для мобильных устройств

Основное требование к кнопкам в мобильной версии — размер, позволяющий их с легкостью нажимать на сенсорном экране. Исследование показало, что наиболее предпочтительный размер кнопок с иконками для мобильных устройств находится в диапазоне от 42 до 72 пикселей (11-19 мм). Оптимальный вариант — 60 px (16 мм):

Оптимальный размер кнопок для мобильной версии

Если же целевая аудитория сайта — пожилые люди, то лучше использовать максимальный размер указанного диапазона — 72 px.

Используя различные размеры, можно указывать на степень приоритета кнопки. Например, использовать для кнопок с максимальным приоритетом размер 72 px, а с минимальным — 42 px. Также стоит устанавливать оптимальное расстояние между кнопками, которое вычисляется исходя из их размера:

12-24 px (10-13 мм) — для больших кнопок;
24-36 px (6-10 мм) — для средних;
36-48 px (3-6 мм) — для маленьких.

Для кнопок с текстом используются аналогичные стандарты высоты (42-72 px), ширина при этом будет варьироваться. Расстояние между такими кнопками для оптимального визуального разделения должно быть минимум 12 px.

Помимо этого, стоит располагать конверсионные кнопки в центральной части экрана так, чтобы они были хорошо заметны:

Размер кнопок для мобильной версии

Какие выбрать шрифты для мобильной версии

Специалисты рекомендуют использовать стандартные системные шрифты для основного текста и кнопок. Например, Book Antiqua:

Шрифт Book Antiqua для мобильных пользователей

Шрифты семейства Book Antiqua

Еще одно популярное семейство шрифтов, отличающееся лаконичным стилем и разборчивым начертанием, — Helvetica:

Шрифт Helvetica для мобильных пользователей

Шрифты семейства Helvetica

Для подчеркивания индивидуального стиля компании стоит выделить заголовки брендовыми шрифтами, например, использовать Avenir Next:

Шрифт Avenir Next

Также для заголовков и выделения больших чисел подойдет шрифт Geogrotesque:

Шрифт Geogrotesque для мобильных посетителей

Шрифт Geogrotesque для заголовков

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

FAQ

Как изменить размер шрифта на сайте

Чтобы изменить размер шрифта определенного фрагмента текста, можно использовать встроенные стили в HTML-коде, например, установить размер 16px с помощью такой записи: style="font-size:16px". Еще один вариант — задать тексту класс, а затем прописать для него CSS-стили. Для CMS, например WordPress, доступно изменение шрифтов в редакторе записей.

Как определить размер шрифта на сайте

Чтобы определить размер шрифта какого-либо текста на сайте, выделите данный фрагмент в браузере и нажмите сочетание клавиш Ctrl+Shift+I или «Просмотреть код» в контекстном меню. Затем в открывшемся коде найдите атрибут font-family и посмотрите, какой размер шрифта там задан.

Какого размера кнопки должны быть на сайте

Чтобы кнопки были комфортными для нажатия, можно ориентироваться на минимальный размер 40px на 40px, при этом в них должен использоваться шрифт не меньше 16 px. Не стоит также забывать про вертикальные и горизонтальные отступы, их можно установить в 16 px и 32 px соответственно. Кнопки с призывом к действию должны быть крупными и заметными, чтобы пользователи обращали на них внимание.

Заключение

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

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

Для мобильной версии шрифты должны быть разборчивыми и читабельными, минимальный размер основного текста — 16 px.

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

Размер кнопок на мобильных устройствах должен находиться в диапазоне от 42 до 72 пикселей. При этом кнопки с максимальным приоритетом делаются крупнее остальных.

Эта статья — часть модуля «Аудит сайта» в Serpstat

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

Запустить аудит сайта

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

4.13 из 5 на основе 19 оценок

Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.