Какой размер шрифта нужен на сайте для телефона

Сложность: Можно самому, иногда нужен разработчик Обновлено 30.10.2026

Что это значит

Для сайта на телефоне удобно читать основной текст размером 16 px (это 1rem в браузере по умолчанию) с межстрочным интервалом 1,4–1,6. Подписи, даты и сноски можно делать 13–14 px, но не меньше 12 px. Шрифт в полях ввода нужен не меньше 16 px: иначе iPhone увеличивает страницу при нажатии на поле. Заголовки — 20–28 px, чтобы они помещались в экран шириной 360 px.

Чем мешает

Мелкий текст на телефоне приходится увеличивать пальцами, и часть посетителей просто уходит. Google проверяет сайты в мобильной версии, а Lighthouse в PageSpeed отмечает текст мельче 12 px как ошибку. Если же на странице нет meta viewport, телефон уменьшает всю страницу, и мелким становится даже текст 16 px.

Как исправить

Выберите, на чём сделан сайт: WordPressTilda1С-БитриксOpenCartДругой движок или свой сервер

WordPress

  1. В «Внешний вид» → «Настроить» → «Типографика» (название зависит от темы) задайте основной шрифт 16 px для мобильных.
  2. Если в теме нет такой настройки, добавьте CSS из примера ниже в «Внешний вид» → «Настроить» → «Дополнительные стили».

Tilda

  1. В каждом блоке откройте «Контент» или «Настройки» → размер шрифта для мобильных (значок телефона). Основной текст — 16 px, подписи — не меньше 13 px.
  2. Общий шрифт сайта задаётся в «Настройки сайта» → «Шрифты и цвета».

1С-Битрикс

  1. Размер шрифта задаётся в CSS шаблона сайта (template_styles.css). Попросите разработчика выставить основной текст 16 px для экранов до 768 px.

OpenCart

  1. Размер задаётся в CSS темы (stylesheet.css). Добавьте правило из примера ниже или попросите разработчика темы.

Другой движок или свой сервер

  1. Проверьте, что в <head> есть <meta name="viewport" content="width=device-width, initial-scale=1">. Без этой строки остальные советы не помогут.
  2. Задайте основной размер для body 16 px (или 1rem) и не уменьшайте его в медиазапросах для телефона.
  3. Найдите в CSS правила с font-size меньше 12 px (часто это подвал, меню, цены, подписи к фото) и увеличьте их до 13–14 px.
  4. Для полей ввода input, select и textarea поставьте font-size: 16px.

Пример кода

Замените example.by на адрес своего сайта.

body { font-size: 16px; line-height: 1.5; }
small, .caption { font-size: 14px; }
input, select, textarea { font-size: 16px; }

Пиксели в CSS — не пиксели экрана: 16 px на телефоне выглядят так же крупно, как на компьютере, если на странице есть meta viewport.

Если хотите, чтобы посетитель мог увеличить мелкую схему или фото, не запрещайте масштабирование: уберите user-scalable=no из meta viewport.

Как проверить, что всё исправлено

Откройте сайт на телефоне и прочитайте абзац, не увеличивая страницу. Затем проверьте сайт на yasnoseo.by: в отчёте будет указано, какая доля текста на главной мельче 12 px.

Похожие статьи

Все статьи базы знаний