Читаемость сайта держится на 6 параметрах, и все они измеряются числами, а не вкусом: размер основного текста от 17 пикселей, длина строки 60-80 знаков, межстрочный интервал 1,5-1,7, контраст текста к фону не ниже 4,5 к 1, не больше двух гарнитур и не больше трёх начертаний. Мы правим типографику до сдачи сайта по одной причине: нечитаемый текст не продаёт, а сайт, который не приносит обращений, мы не отдаём.
Дальше - каждое правило с проверяемым значением, типичные ошибки и то, что происходит с заявками, когда типографика сделана на глаз.
I. Почему типографика - это деньги
Человек решает, читать ли страницу, за первые секунды. Если шрифт мелкий, строки идут через всю ширину монитора, а серый текст лежит на светло-сером фоне, читатель не формулирует претензию - он просто закрывает вкладку. Владелец при этом видит в отчётах короткие визиты и делает вывод, что «трафик плохой», хотя проблема в том, что текст физически тяжело читать.
Особенно это заметно на страницах услуг и в блоге, где решение принимается на основе текста. В премиальных проектах типографика вообще делает половину впечатления дороговизны: воздух, спокойная гарнитура и ровный ритм заголовков читаются как качество, а пять разных шрифтов и разноцветные подчёркивания - как дешёвый шаблон.
Прототип главной страницы делаем бесплатно. До договора и без предоплаты вы видите, как будет выглядеть ваш сайт: первый экран, блоки, их порядок и логика заявки - в том числе реальные размеры текста и заголовков, а не картинку из презентации. Нравится - работаем дальше, не нравится - расходимся, вы ничего не должны. Бесплатен прототип главной страницы, а не весь дизайн и не прототипы всех разделов.
II. Размер текста и длина строки
Первое правило - размер. Основной текст на десктопе комфортно читается от 17-18 пикселей, а в длинных материалах и от 19-20. Наследие 14-пиксельного текста тянется со времён узких мониторов и сегодня выглядит просто мелко. Подписи, сноски и мелкие подзаголовки не должны опускаться ниже 14 пикселей.
Второе правило - длина строки. Комфортный диапазон - 60-80 знаков с пробелами, это примерно 600-750 пикселей ширины колонки. Если текст растянут на 1400 пикселей, глаз теряет начало следующей строки и читатель сбивается каждые несколько секунд. На широких экранах колонку нужно ограничивать, а не заполнять всю ширину.
| Параметр | Рабочее значение | Частая ошибка |
|---|---|---|
| Основной текст, десктоп | 17-20 px | 14-15 px по старой привычке |
| Основной текст, телефон | 16-18 px | 13-14 px после автомасштаба |
| Длина строки | 60-80 знаков | Текст на всю ширину экрана |
| Межстрочный интервал | 1,5-1,7 | 1,2 - строки слипаются |
| Контраст текст/фон | от 4,5 к 1 | Светло-серый на белом |
| Число гарнитур | 1-2 | 4-5 разных шрифтов на странице |
III. Межстрочный интервал и контраст
Третье правило - интервал. Для основного текста рабочий диапазон 1,5-1,7 высоты строки. При 1,2 строки слипаются в серое полотно, при 2,0 и выше абзац распадается на отдельные строки и теряет связность. Заголовкам, наоборот, нужен интервал поменьше - обычно 1,1-1,25, иначе крупная надпись выглядит рыхлой.
Четвёртое правило - контраст. Отношение яркости текста к фону для основного набора должно быть не ниже 4,5 к 1, для крупных заголовков допустимо 3 к 1. Модный светло-серый текст на белом фоне этому порогу обычно не удовлетворяет: на хорошем мониторе в тёмной комнате он выглядит стильно, а на телефоне под солнцем исчезает. Проверяется это бесплатными контраст-чекерами за пару минут.
- Не набирайте абзацы капслоком. Прописные читаются медленнее строчных, капслок уместен максимум в коротких метках.
- Не растягивайте и не сжимайте шрифт искусственно. Для этого есть отдельные узкие и широкие начертания гарнитуры.
- Не ставьте текст поверх пёстрой фотографии без подложки. Контраст в такой ситуации меняется от пикселя к пикселю.
- Выравнивайте текст по левому краю. Выключка по ширине без переносов даёт дыры между словами.
- Следите за длинными числами и ценами. Разряды через пробел: 80 000 ₽ читается быстрее, чем слитная запись.
IV. Пары гарнитур и вес начертаний
Пятое правило - не больше двух гарнитур на сайте. Рабочая схема: одна для заголовков, одна для текста, либо одна гарнитура с широким набором начертаний. Каждая лишняя гарнитура - это ещё один загружаемый файл и ещё одна причина, по которой страница дёргается при загрузке.
Шестое правило - не больше трёх весов на странице: обычный для текста, полужирный для акцентов, ещё один для заголовков. Когда на странице соседствуют тонкий, светлый, обычный, средний, полужирный и жирный, иерархия исчезает: всё выглядит важным, то есть неважным ничего. Тонкие начертания на телефонах вообще читаются плохо и для основного текста не годятся.
Отдельная статья расходов - веб-шрифты. Каждый файл задерживает первый экран, поэтому подключать стоит только те начертания, которые реально используются, и обязательно с запасным системным шрифтом. Как мы собираем такие вещи на живых проектах, видно на разработке сайтов и SEO.
V. Мобильные: где чаще всего ломается
С телефонов обычно приходит больше половины трафика, а типографику проверяют на большом мониторе. Классические поломки: текст, который после переноса на мобильную версию стал 13 пикселей; заголовок в 3 строки, съедающий половину первого экрана; цена мелким шрифтом рядом с крупной кнопкой; таблица, которую невозможно прочитать без горизонтальной прокрутки.
Проверяйте сайт на своём телефоне при дневном свете, а не только в макете. Мелкий светло-серый текст, который на мониторе выглядел аккуратно, на улице просто не читается - и человек уходит, не дойдя до формы. Это одна из самых частых причин, по которой у красивого сайта нет обращений.
Хороший ориентир - живые проекты. В работе редизайн сайта SkyFarm (агротех, системы выращивания с искусственным интеллектом) первый экран держится на одной фразе - «когда агрономия становится точной наукой», - и она набрана крупно, с воздухом вокруг, чтобы читаться с телефона без прищуривания; подписи к трём шагам работы и к карточкам продуктов в карусели специально короткие, иначе на узком экране они рассыпаются на четыре строки. Второй ориентир - ayvazzovsky.academy, онлайн-академия видеоуроков колористики с каталогом курсов, посадочными страницами уроков, личным кабинетом и промокодами: там длинные описания уроков должны читаться с телефона в перерыве между клиентами, поэтому размер текста и интервалы важнее любых украшений.
VI. Проверка за 15 минут
- Откройте главную на телефоне и прочитайте вслух первый абзац. Щуритесь - значит, шрифт мелкий.
- Измерьте длину строки на десктопе: больше 90 знаков - ставьте ограничение ширины колонки.
- Прогоните основные цвета текста через контраст-чекер, порог 4,5 к 1.
- Посчитайте гарнитуры и веса на одной странице: больше 2 и 3 соответственно - лишнее убрать.
- Посмотрите, не прыгает ли текст при загрузке: значит, веб-шрифт подключён без запасного.
- Дайте страницу человеку старше 45 лет и попросите найти цену. Не нашёл за 10 секунд - проблема в иерархии, а не в нём.
Типографика - самая дешёвая правка из всех возможных: она не требует переписывать логику сайта и обычно занимает несколько часов. Дороже обходится ситуация, когда текст нечитаем и владелец год доливает рекламу, пытаясь компенсировать это трафиком. Если обращения нужны быстрее, чем идёт переделка сайта, канал можно подключить отдельно - по модели лиды с оплатой за результат, а параллельно спокойно доводить сайт до нормального вида.
Наши цены на всякий случай: сайт на React от 80 000 ₽ и 1-2 недели от получения материалов, перенос с конструктора от 80 000 ₽, SEO-статья от 500 ₽, 200 статей в месяц - 100 000 ₽, прокачка блога от 75 000 ₽ в месяц. Чужие расценки называть числом не берёмся: они сильно зависят от города и загрузки исполнителя. Позиции и количество заявок не гарантируем - гарантировать можно только объём и качество работы, а на страницах вроде генерация целевых клиентов описано, как считать результат честно.
VII. Короткий итог
Шрифты - не вопрос вкуса, а шесть проверяемых чисел: 17-20 пикселей основного текста, 60-80 знаков в строке, интервал 1,5-1,7, контраст от 4,5 к 1, максимум 2 гарнитуры и 3 веса. Проверка занимает 15 минут и делается без дизайнера. Если после правок текст стало легче читать, а заявок всё равно нет, дело уже не в типографике, а в структуре страницы - и начинать в этом случае стоит с бесплатного прототипа главной, где логика обращения видна до любых расходов.
Наши работы
Сайты, которые студия уже запустила
Четыре проекта N3MIROFF, которые можно открыть прямо сейчас и посмотреть, как они работают.
Агротех с ИИ
SkyFarm ↗
Редизайн сайта систем выращивания: первый экран с контейнерной фермой, схема работы из трёх шагов, карусель продуктов и экран приложения.
Сайт салона
ayvazzovsky.com ↗
Салон сложного окрашивания в Москве: онлайн-запись, видео работ, портфолио и команда. Переехал с Тильды на свой хостинг.
Онлайн-академия
ayvazzovsky.academy ↗
Видеоуроки колористики: каталог, посадочные страницы уроков, личный кабинет и промокоды.
Event-агентство
navsegda-event.ru ↗
НАВСЕГДА: корпоративы и конференции - услуги, кейсы, этапы работы и расчёт мероприятия.
Витрина магазина
Monkey Market ↗
Премиальная витрина магазина кроссовок с заказом в Telegram.
Хотите сайт, который читают и с которого пишут?
Покажем бесплатный прототип главной: первый экран, реальная типографика и логика заявки - до договора и без предоплаты.
Частые вопросы
Какой размер шрифта сделать на сайте?
Основной текст на десктопе - 17-20 пикселей, на телефоне 16-18. Подписи и сноски не меньше 14. Более мелкий набор заметно снижает дочитываемость длинных страниц.
Сколько шрифтов можно использовать на одном сайте?
Не больше двух гарнитур и трёх начертаний. Каждый лишний файл шрифта замедляет загрузку первого экрана и размывает иерархию заголовков и текста.
Какой межстрочный интервал считается нормальным?
Для основного текста 1,5-1,7 высоты строки, для крупных заголовков 1,1-1,25. При 1,2 в абзаце строки слипаются, при 2,0 и выше абзац теряет связность.
Почему серый текст на белом фоне - это плохо?
Обычно он не дотягивает до порога контраста 4,5 к 1: на хорошем мониторе выглядит стильно, а на телефоне при дневном свете просто пропадает, и человек уходит со страницы.
Можно ли посмотреть дизайн будущего сайта до оплаты?
Да, прототип главной страницы мы делаем бесплатно, до договора и без предоплаты: видно первый экран, блоки, их порядок, реальные размеры текста и логику заявки. Не понравилось - расходимся, вы ничего не должны.
Посмотрим ваш сайт и покажем прототип новой главной
Оставьте заявку - разберём читаемость страниц и покажем, как будет выглядеть первый экран.
Получить целевые заявки → Telegram