Мелкий шрифт на телефоне: какой размер текста нужен сайту и как увеличить
Что это значит
Мы открыли главную в браузере с экраном телефона и посчитали, какая часть текста набрана шрифтом меньше 12 пикселей. Таких символов оказалось много (процент — в отчёте).
Чем мешает
Мелкий текст трудно читать без увеличения, особенно на улице и людям старше 40. Посетитель устаёт и уходит. Проверки удобства (Lighthouse в PageSpeed) отмечают мелкий шрифт как ошибку.
Как исправить
WordPress
- В «Внешний вид → Настроить → Типографика» (в большинстве тем) задайте основной шрифт 16 px для мобильных.
- Если в теме нет такой настройки, добавьте код из примера ниже в «Внешний вид → Настроить → Дополнительные стили».
Tilda
- Размер шрифта задаётся в настройках каждого блока («Контент» → «Типографика») и отдельно для мобильной версии в Zero Block. Для основного текста ставьте 16 px, для подписей — не меньше 12 px.
- Общие размеры можно задать в «Настройки сайта → Шрифты и цвета».
1С-Битрикс
- Размеры шрифта задаются в стилях шаблона (template_styles.css). Попросите разработчика увеличить шрифт для экранов до 768 px (пример кода ниже).
OpenCart
- Размер шрифта задаётся в файле стилей темы (stylesheet.css). Добавьте код из примера ниже или найдите настройку типографики в панели темы.
Другой движок или свой сервер
- Добавьте в стили сайта правило для мобильных экранов из примера ниже: основной текст 16 px, подписи не меньше 12 px.
- Примеры мелкого текста из отчёта подскажут, какие блоки поправить в первую очередь.
Пример кода
Замените example.by на адрес своего сайта.
@media (max-width: 768px) {
body { font-size: 16px; }
small, .caption, figcaption { font-size: 13px; }
}Мы считаем символы видимого текста на главной в момент открытия. Текст в свёрнутых меню и всплывающих окнах не учитывается.
Иногда мелкий текст — это подвал с реквизитами. Если он занимает большую часть страницы, главная, вероятно, слишком бедна основным текстом.
Ориентиры для мобильной версии: основной текст 16 px, подписи 13–14 px, поля ввода 16 px, межстрочный интервал 1,4–1,6.
Если сайт делал подрядчик
Перешлите ему ссылку на отчёт и эту просьбу:
На телефоне большая часть текста главной набрана шрифтом меньше 12 px (примеры — в отчёте). Увеличьте, пожалуйста, шрифт в мобильной версии: основной текст 16 px, подписи и сноски не меньше 12 px.
Как проверить, что всё исправлено
Проверьте сайт снова на yasnoseo.by.