Шрифт 12 пикселей стоит вам заявок: разбор нечитаемых сайтов

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

Ошибка первая: шрифт 12–13 пикселей в основном тексте

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

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

Как правильно. Основной текст от 16 пикселей на телефоне. Проверять не в браузере на компьютере, а на реальном телефоне, вытянув руку в обычное положение.

Ошибка вторая: светло-серый текст на белом фоне

В чём она. Цвет текста выбран для настроения, а не для чтения.

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

Как правильно. Основной текст — тёмный, почти чёрный. Серым можно делать подписи и сноски, но не описание услуги и не цену. Простая проверка: вывести страницу на телефоне на минимальной яркости и попробовать прочитать абзац.

Ошибка третья: строка во всю ширину экрана

В чём она. Текстовый блок растянут от края до края на широком мониторе.

Чем оборачивается. Глаз теряет строку при переходе на следующую. Человек перечитывает одно и то же и бросает через два абзаца.

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

Ошибка четвёртая: межстрочное расстояние впритык

В чём она. Строки стоят вплотную, потому что так блок компактнее.

Чем оборачивается. Абзац читается как серое пятно. Человек не находит, где остановился, если отвлёкся.

Как правильно. Расстояние между строками примерно в полтора раза больше высоты шрифта. Заголовкам, наоборот, тесное расстояние идёт на пользу.

Ошибка пятая: текст поверх фотографии

В чём она. Заголовок положили на фон с изображением, потому что так эффектнее.

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

Как правильно. Затемняющая подложка под текстом либо перенос текста в отдельный блок рядом с фотографией. Проверять на трёх ширинах экрана: телефон, планшет, монитор.

Ошибка шестая: всё написано заглавными

В чём она. Заголовки и кнопки набраны прописными буквами для солидности.

Чем оборачивается. Слово из заглавных читается по буквам, а не целиком, потому что теряется привычный силуэт. На длинных надписях это заметно, на кнопке «ОСТАВИТЬ ЗАЯВКУ НА РАСЧЁТ СТОИМОСТИ» — критично.

Как правильно. Заглавными допустимо набирать короткие метки в два-три слова. Заголовки и кнопки — обычным начертанием.

Ошибка седьмая: сплошной текст без структуры

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

Чем оборачивается. Человек сканирует страницу глазами за несколько секунд, не находит зацепок и уходит. Он не читает — он ищет ответ на свой вопрос.

Как правильно. Абзац не длиннее четырёх предложений. Подзаголовок каждые два-три абзаца, сформулированный вопросом клиента: «Сколько стоит», «Что входит», «Сколько ждать». Списки там, где перечисление.

Ошибка восьмая: цена набрана мельче всего остального

В чём она. Стоимость спрятана в конце абзаца тем же кеглем, что и описание.

Чем оборачивается. Человек ищет цифру, не находит, решает, что цены нет, и уходит к тому, у кого она есть.

Как правильно. Цена — отдельный крупный блок. Даже если она с оговорками, оговорки идут мелким шрифтом под цифрой, а не вместо неё.

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

Когда всё это можно не трогать

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

Если аудитория заходит с одного корпоративного ноутбука с одинаковой настройкой, часть проверок на разных экранах избыточна.

Если на сайт приходит два человека в месяц, редизайн текста ничего не изменит. Сначала трафик.

Как проверить свой сайт за пять минут

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

Ошибка девятая: одинаковый вес у всего на странице

В чём она. Заголовок, подзаголовок и обычный текст различаются на пару пикселей.

Чем оборачивается. Страница не сканируется. Человек читает всё подряд или не читает ничего — обычно второе.

Как правильно. Разница между уровнями должна быть очевидной. Заголовок раздела заметно крупнее и плотнее текста, подпись под ним заметно мельче. Если разницу приходится искать, её нет.

Ошибка десятая: слишком много начертаний и цветов

В чём она. На странице три шрифта, четыре цвета текста, полужирный, курсив и подчёркивание вперемешку.

Чем оборачивается. Подчёркнутое принимают за ссылку и жмут. Выделенное перестаёт выделяться, потому что выделено всё.

Как правильно. Один шрифт в двух-трёх начертаниях. Подчёркивание оставить ссылкам. Полужирным — одна-две мысли на экран, не больше.

Как это связано с заявками

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

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

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

Коротко

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