Серый шрифт 12 пикселей: как дизайн молча выгоняет клиента с сайта

Анатолий Кузнецов

SEO-оптимизатор с 20-летним стажем. Автор блога seo-prodvizhenie-biznesa.ru о продвижении и доработке сайтов.

Клиент зашёл на ваш сайт, скользнул глазами по экрану — и ушёл. Не потому что цена высокая, не потому что предложение слабое. А потому что он физически не смог прочитать текст. Серые буквы 12 пикселей на белом фоне, строки в полтора экрана шириной, межстрочный интервал впритык — и человек просто закрыл вкладку. За 20 лет практики я видел десятки сайтов, где отличный оффер убивал не смысл, а типографика. И это самая обидная категория потерь: вы заплатили за трафик, привели человека, а он не дочитал первый абзац.

Самое коварное здесь то, что владелец сайта проблемы не видит. Он-то знает свой текст наизусть, читает его с макбука с ретиной, на большом мониторе, в удобном кресле. А клиент открывает страницу с телефона на солнце, одной рукой, между делом. И то, что дизайнеру казалось «стильным минимализмом», для реального пользователя превращается в стену нечитаемого серого шума.

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

Почему читаемость — это деньги, а не эстетика

Читаемость влияет не на «красоту», а напрямую на поведенческие факторы ранжирования. Логика простая: если человек не может комфортно читать, он не задерживается на странице. Растёт показатель отказов, падает глубина просмотра, сокращается время на сайте. Яндекс это фиксирует и делает вывод, что страница не отвечает на запрос пользователя. В результате вы теряете позиции — при том что содержание у вас может быть лучшим в нише.

Я не раз наблюдал на замерах, как чисто типографические правки — увеличение кегля, изменение цвета текста, разбивка длинных строк — давали рост времени на странице на 20–40 процентов. Без единого нового слова в тексте. Просто люди начинали дочитывать. А дочитал — значит, дошёл до кнопки, до формы, до оффера. Вот вам и связь читаемости с деньгами.

Есть ещё второй слой. Мелкий, серый, плотный текст подсознательно считывается как «сложно» и «неохота». Мозг не хочет напрягаться. И даже если объективно материал полезный, пользователь на уровне рефлекса решает, что тут «много букв и лень читать». Хороший текстовый дизайн снимает это сопротивление ещё до того, как человек вникнет в смысл. Именно поэтому читаемость — это не про вкус дизайнера, а про конверсию сайта и деньги.

Мелкий кегль: какой размер шрифта нормальный

Начну с самого частого греха — размера основного текста. Я до сих пор регулярно вижу на сайтах основной текст в 12–13 пикселей. Это наследие эпохи маленьких мониторов, когда экраны были 1024 пикселя шириной и текст лепили мельче, чтобы влезло больше. Сейчас это анахронизм, который вредит вам каждый день.

Рабочие нормы для основного текста на 2026 год выглядят так:

• Десктоп: основной текст — минимум 16 пикселей, комфортно 18–20. Для лонгридов и статей блога 18–20 пикселей это уже стандарт хорошего тона.

• Мобильные: минимум 16 пикселей, и это критично. Если поставить меньше, Safari на iPhone принудительно зумит поле ввода при клике, а текст пользователь читает, щурясь и приближая пальцами.

• Подписи, сноски, мелочь: не опускайтесь ниже 14 пикселей даже для второстепенных элементов. 12 пикселей — это порог, за которым значительная часть аудитории просто перестаёт различать буквы.

Отдельно про аудиторию. Если ваш продукт покупают люди 40+, а в B2B и в дачно-строительной тематике это половина клиентов, то мелкий шрифт бьёт по ним особенно жёстко. После сорока у большинства начинается возрастная дальнозоркость, и текст 12 пикселей для них — это не «неудобно», а «невозможно». Вы буквально отсекаете платёжеспособную часть аудитории на уровне вёрстки.

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

Серый текст на белом: контраст и нормы WCAG

Второй убийца читаемости — низкий контраст. Модный светло-серый текст на белом фоне выглядит на макете «воздушно и дорого», а в реальности означает, что часть людей его просто не видит. Особенно на дешёвых мониторах, на телефоне под прямым солнцем и у людей со слабым зрением.

Здесь есть чёткая, измеримая норма — стандарт доступности WCAG. Он задаёт минимальный коэффициент контраста между цветом текста и фоном:

• Уровень AA (обязательный минимум): контраст не ниже 4.5:1 для обычного текста и 3:1 для крупного (от 18–24 пикселей и жирного).

• Уровень AAA (идеал): 7:1 для обычного текста. К нему стоит стремиться в лонгридах, которые люди читают долго.

Что это значит на практике. Чёрный текст #333333 на белом фоне даёт около 12:1 — отлично. А популярный светло-серый #999999 на белом — примерно 2.8:1, то есть проваливает даже минимальный уровень AA. Именно этот оттенок я чаще всего встречаю у сайтов, которые жалуются на «почему-то не читают тексты». Да потому что их не видно.

Проверить контраст можно за минуту бесплатными онлайн-инструментами по типу WebAIM Contrast Checker — вбиваете два HEX-кода и получаете коэффициент. Я всегда прогоняю через такую проверку основной текст, серые подписи, плейсхолдеры в формах и текст на цветных плашках. Кстати, светлый текст на цветном фоне кнопок — отдельная зона риска: бледно-жёлтая надпись на белой кнопке невидима, и человек не понимает, куда жать. Если хотите разобраться в связке дизайна и метрик, посмотрите разбор про оптимизацию конверсии сайта.

Длина строки: почему широкая колонка утомляет

Третья беда менее очевидна, но выкашивает читателей не хуже. Это длина строки — сколько символов помещается в одну строку текста. Когда контент растянут во всю ширину широкоформатного монитора, строка получается по 150–200 символов. Глаз, дочитав до конца, должен вернуться к началу следующей строки — и на такой длине он регулярно теряет нужную, перескакивает или перечитывает одну и ту же. Читать физически утомительно, хотя человек не понимает, почему именно.

Оптимальная длина строки давно измерена типографами: 45–75 символов с пробелами, идеально около 60–66. Это ширина, при которой глаз без усилий находит начало следующей строки. В вёрстке это обычно означает ограничить контейнер текста примерно 700–760 пикселями по ширине, а не растягивать на все 1400.

Обратная крайность тоже вредна: слишком узкая колонка в 20–30 символов заставляет глаз слишком часто прыгать на новую строку, ритм чтения рвётся. Но на практике узкие колонки встречаются реже — почти всегда проблема в том, что текст растянут слишком широко. Посмотрите на любое качественное издание или на нормальный блог: колонка текста там всегда ограничена, вокруг неё воздух. Это не случайность, а следствие того, что контент влияет на продвижение в том числе через удобство чтения.

Межстрочный интервал и воздух: чтобы текст дышал

Даже правильный кегль и хороший контраст не спасут, если строки лепятся друг к другу. Плотный текст без воздуха читается как монолитная серая масса — глазу не за что зацепиться, и мозг заранее пугается «стены букв».

Нормы по интервалам и отступам, которые работают:

• Межстрочный интервал (line-height): 1.5–1.7 от размера шрифта для основного текста. То есть при кегле 18 пикселей высота строки — около 27–30 пикселей. WCAG прямо рекомендует line-height не ниже 1.5.

• Отступ между абзацами: заметный, не менее размера строки. Абзацы должны визуально отделяться, а не сливаться в сплошной блок.

• Длина абзаца: 2–4 предложения. Простыня на 15 строк отпугивает ещё до чтения. Дробите мысль на короткие абзацы — так текст выглядит легче, даже если объём тот же.

Отдельно про межбуквенный интервал и жирность: не растягивайте буквы (letter-spacing) в основном тексте и не делайте весь абзац полужирным «для акцента». Когда выделено всё — не выделено ничего, а сплошной bold читается тяжелее обычного начертания. Жир — только точечно, на ключевых словах.

Воздух вокруг текста — это не пустое место, а инструмент. Он задаёт ритм, ведёт взгляд, снижает когнитивную нагрузку. Хороший лонгрид ощущается «лёгким» именно за счёт грамотных отступов, а не за счёт того, что в нём мало текста. Если пишете большие материалы, загляните в разбор про повышение конверсии сайта с помощью статей — там читаемость работает на заявки напрямую.

Мобильная читаемость: где всё разваливается

Больше половины трафика сегодня — мобильный, и Яндекс давно оценивает сайты по мобильной версии в первую очередь. Об этом я подробно писал в материале про mobile-first индексацию. Но именно на телефоне типографика разваливается чаще всего, потому что владельцы проверяют сайт с десктопа и мобильную версию в глаза не видят.

Что ломается на мобильных чаще всего:

1. Текст не адаптируется: desktop-кегль ужимается, и 16 пикселей десктопа превращаются в нечитаемые 11 на узком экране. Нужны отдельные размеры под мобильные, а не автоматическое сжатие.

2. Горизонтальная прокрутка: широкая таблица или длинное слово растягивают страницу, и текст уезжает за край экрана. Человек читает, дёргая страницу пальцем вбок.

3. Крошечные интерактивные зоны: ссылки и кнопки слишком близко и слишком мелкие, палец промахивается. Минимальная зона нажатия — 44 на 44 пикселя.

4. Текст на фоновой картинке: на десктопе читаемо, а на мобильном картинка обрезается, и белые буквы оказываются на светлом участке фото — исчезают полностью.

Мой рабочий приём — тестировать не в эмуляторе браузера, а на реальном дешёвом телефоне, на солнце, одной рукой. Это самые честные условия. Если в таком режиме текст читается легко, значит, типографика в порядке. Заодно проверьте скорость загрузки сайта на мобильном — медленный шрифт, который подгружается с задержкой, тоже рушит первое впечатление.

Типичные ошибки текстового дизайна

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

• Светло-серый текст «для стиля» — #999 и светлее на белом. Провал по контрасту, минус читатели.

• Основной текст 12–14 пикселей — экономия места ценой аудитории 40+.

• Текст во всю ширину экрана — строки по 180 символов, глаз теряет строку.

• Плотный line-height 1.0–1.2 — строки слипаются в серую массу.

• Абзацы-простыни по 15 строк — отпугивают ещё до начала чтения.

• ТЕКСТ ЗАГЛАВНЫМИ целыми абзацами — капслок в длинных фрагментах читается на 10–15 процентов медленнее.

• Выравнивание по ширине (justify) без переносов — рвёт текст «реками» из пробелов, особенно на мобильных.

• Декоративные тонкие шрифты в основном тексте — красиво в заголовке, нечитаемо в теле статьи.

Каждая из этих ошибок по отдельности вроде мелочь. Но они копятся, и в сумме получается сайт, который отталкивает читателя на подсознательном уровне. А человек ведь не напишет вам «у вас плохой line-height» — он просто уйдёт, и вы даже не узнаете причину. Это одна из тех проблем, которые всплывают только при внимательном аудите контента сайта.

Чек-лист быстрых фиксов: как починить за два часа

Хорошая новость: почти всё это чинится правкой пары строк CSS, без переделки сайта. Вот пошаговый чек-лист, который я прогоняю на любом проекте:

1. Поднимите кегль основного текста до 16–18 пикселей на десктопе и не ниже 16 на мобильных.

2. Затемните текст. Уберите светло-серый, поставьте #222–#333 на белом фоне. Прогоните через контраст-чекер до уровня AA (4.5:1) как минимум.

3. Ограничьте ширину колонки — max-width около 700–760 пикселей для блока текста, чтобы строка была 60–75 символов.

4. Поставьте line-height 1.5–1.7 и добавьте заметный отступ между абзацами.

5. Разбейте длинные абзацы на куски по 2–4 предложения и добавьте подзаголовки каждые 3–4 абзаца.

6. Уберите капслок и justify в длинных фрагментах, оставьте выравнивание по левому краю.

7. Проверьте на реальном телефоне под ярким светом, одной рукой. Нет горизонтальной прокрутки, кнопки крупные, текст читается без прищура.

Пройдитесь по этому списку — и вы удивитесь, насколько «дороже» и профессиональнее станет выглядеть сайт без единой новой строчки контента. А главное, вырастут поведенческие: люди начнут дочитывать, а значит — доходить до заявки. Читаемость — это тот редкий рычаг, где вложение минимальное, а эффект виден на метриках почти сразу. Если планируете рост через контент, начните с фундамента и почитайте про продающие тексты для сайта — но помните, что даже лучший текст бесполезен, если его невозможно прочитать.

Хотите, чтобы ваш сайт удерживал клиента и превращал читателей в заявки — а не отпугивал их серым шрифтом и стеной букв на ровном месте? Я занимаюсь продвижением сайтов в Яндексе уже больше 20 лет и готовлю сайты в том числе под выдачу нейросетей и AI-поиск. Разберу вашу типографику и поведенческие, покажу, где именно вы теряете трафик и деньги, и что поправить в первую очередь.

Увеличьте позиции и продажи вашего сайта

Профессиональное SEO-продвижение с гарантией результата. Выберите подходящую услугу:

01 Бесплатный аудит сайта 02 SEO-продвижение 03 Создание сайтов 04 SEO-статьи для сайта

Получить консультацию

Остались вопросы по продвижению?

Меня зовут Анатолий Кузнецов, я SEO-оптимизатор с 20-летним стажем. Разберу ваш сайт, отвечу на вопросы и подскажу, что улучшить для роста позиций в Яндексе и Google.

Связаться со мной →