Дизайн и конверсия

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

Светлана, Красноярск 1,6 тыс. просмотров

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

Дмитрий Акиндинов разработчик лендингов, 15 лет практики

ответил

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

Для заголовков есть отдельная шкала. Заголовок первого экрана (h1) - 32-48 пикселей на мобильном и 48-72 на десктопе. Подзаголовки блоков (h2) - 24-32 на мобильном и 32-40 на десктопе. Кнопки держите на уровне основного текста, 16-18 пикселей, а для мелких подписей и сносок нижняя граница - 14 пикселей, дальше текст превращается в мелкий шрифт, который приходится разглядывать.

Отдельное правило - разница между соседними уровнями заголовков должна быть заметной, минимум 30% по размеру. Если h1 - 32 пикселя, а h2 - 28, они визуально сливаются в один уровень, и страница читается плоско. Ясная иерархия получается, когда шаг между уровнями ощущается сразу, без сравнения линейкой.

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

Ещё один параметр, который редко проверяют, - длина строки. Комфортно читается строка длиной 45-75 символов, на десктопе это примерно 600-800 пикселей текстового блока. Если у вас текст растянут на весь широкий экран без ограничения ширины колонки, глазу приходится прыгать слишком далеко между строками, и это устаёт быстрее, чем кажется на первый взгляд при беглом просмотре макета.

Подробный разбор Типография для лендинга: шрифты, размеры, межстрочный интервал
Не нашли свой вопрос

Задайте его напрямую

Отвечаю сам, на почту, обычно в тот же день. Разбор самых частых вопросов потом попадает в этот раздел.

Похожие вопросы

Все вопросы темы "Дизайн и конверсия"

Помогу выбрать

Сомневаетесь — напишите, разберёмся за 10 минут

Расскажете про ваш бизнес и задачу — подскажу, что нужно: лендинг, многостраничник или вообще не сайт. Без обязательств, бесплатно.

Отвечаю в течение 15 минут в рабочее время (будни 11:00–20:00 МСК). Если удобнее e-mail: 9123578@gmail.com

Telegram TG MAX MAX Звонок