Размер шрифта для сайта: экран, дистанция и сценарий

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

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

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

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

Для основного текста на сайте часто используют диапазон около 16–18 пикселей в CSS. Это не обязательный стандарт, а практическая отправная точка для обычного чтения. На небольшом экране значение около 16 пикселей обычно воспринимается как рабочее, а для длинных материалов, широких экранов или шрифта с низкой высотой строчных знаков может потребоваться более крупный размер.

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

Для прототипа можно начать с такой шкалы: основной текст — 16–18 пикселей, вторичный текст — 14–16 пикселей, подписи и метаданные — не меньше 12–14 пикселей, крупный лид — 20–24 пикселя. Затем проверьте шкалу на реальном контенте. Если подпись состоит из одного слова, она может выглядеть нормально, но в интерфейсе с длинными сообщениями та же настройка окажется слишком мелкой.

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

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

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

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

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

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

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

Заголовки должны показывать структуру материала, а не просто быть крупнее соседнего текста. H1 отвечает за главную тему страницы, H2 разделяет самостоятельные смысловые части, H3 уточняет конкретный аспект. Если заголовок слишком велик и занимает большую часть экрана, он задерживает пользователя перед содержанием. Если разница между заголовком и абзацем минимальна, структура становится незаметной.

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

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

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

Для основного текста можно начать с диапазона 16–18 пикселей и затем проверить результат на реальном контенте и разных экранах. Итоговый выбор зависит от гарнитуры, высоты строчных знаков, контраста, длины строки и сценария использования. Универсальное значение без визуальной проверки не гарантирует удобство.

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

Для вторичных подписей часто используют 14–16 пикселей, а для компактных метаданных — около 12–14 пикселей. Однако уменьшенный текст должен сохранять достаточный контраст и не содержать критически важную информацию, которую пользователь может пропустить. Если подпись объясняет действие или предупреждает об ошибке, её лучше сделать заметнее.

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

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

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

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