Трудночитаемый шрифт в главном меню сайта

1. Первый экран — меню. Я смотрю на сайт и спотыкаюсь. Буквы есть, а слова распадаются. Вижу линии, пятна, ритм — но не смысл.

Глаза ловят верхнюю строку и устают. Стрелка мыши зависает у пунктов. Я пытаюсь прочитать «Каталог», а читаю «Каплог». В телефоне ещё хуже: всё дрожит, сливается, прыгает при скролле.

Меню кажется знакомым, но читаться отказывается. Узкие штрихи, тесные буквы, буквы слипаются. Каждая вкладка — загадка на долю секунды. Эти доли складываются в раздражение.

Я ловлю себя на том, что уже три раза промахнулся. Открыл не тот раздел, вернулся назад, снова промахнулся. В голове — шум: «Где тут то, что мне нужно?»

Я не запоминаю структуру, потому что не могу её прочитать. Список превращается в серую грядку. Смыслы равны, приоритетов нет. Навигация перестаёт направлять.

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

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

Я ловлю микроспотыкивание на каждом слове. Нервная система платит за каждую попытку распознать глиф. Пальцы злятся первыми, мозг — следом, карта сайта — последней.

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

Я начинаю избегать этот сайт. Не из принципа, а из усталости. Меню — это приветствие. А тут приветствие шепчет и заикается.

Когда проблема критична, а когда нет

• Интернет‑магазины с широким каталогом, где меню — главный путь к товарам (маркетплейсы, мультирубрикаторы).
• Сервисы с ценностным первым действием в навигации: банки, страхование, медицина, госуслуги, билеты, доставка.
• Проекты с преобладанием мобильного трафика и маленьких экранов; тёмные темы; сложные фоны или низкая контрастность.
• Аудитории 35+, пользователи с нарушениями зрения, высокая доля впервые пришедших по рекламе.
• Сайты с жёсткими дедлайнами выбора: распродажи, бронирования, акции с таймером.
• B2B‑сервисы со сложной структурой и редкими визитами, где контекст забывается между сессиями.

• Лэндинги с одной‑двумя целевыми кнопками, где меню вторично или свернуто.
• Медиа и блоги, где основную навигацию заменяют рекомендации, ленты и поиск.
• Продукты с высокой долей прямых/возвратных пользователей, которые знают путь наизусть.
• Внутренние корпоративные порталы и профессиональные инструменты с обученной аудиторией.
• Промо‑сайты и бренд‑страницы, где конверсия завязана на один CTA, а не на сложную навигацию.
• Сайты, где конверсия происходит вне веб‑интерфейса (звонок, мессенджер) и меню почти не используется.

Что об этом говорят пользователи

• Привык, меня устраивает.
• Ну, читать можно, если присмотреться.
• Я всегда пользуюсь поиском, меню не трогаю.

• С ноутбука 13", масштаб 100%. Светло-серый текст на светлом баннере. «Каталог» и «Коллекции» сливаются, читаю по два раза, теряю фокус.
• На телефоне 6.1" шрифт очень тонкий, буквы в верхнем регистре. «ОПЛАТА» и «ОПЦИИ» путаются, кликаю не туда.
• Контраст низкий: примерно как #9aa на белом. При наведении контраст улучшается, но решение надо принять раньше.
• Межбуквенный интервал маленький, в слове «Тарифы» риф и ф слипаются. С первого раза не считываю.
• При прокрутке фон меняется, на тёмном фоне меню читается, на светлом — нет. Скачет восприятие.

Решение проблемы

• Сделайте текст видимым без усилий. Используйте гротеск с хорошей читабельностью. Базовый размер: 16–18 px на десктопе, 15–16 px на мобильном. Вес — 500–600 для обычного состояния, 600–700 для активного. Откажитесь от сплошного верхнего регистра: смешанный регистр читается быстрее.
• Обеспечьте контраст не ниже WCAG AA: коэффициент 4.5:1 для обычного текста. Проверьте меню на разных фонах. Если шапка прозрачная или поверх баннера, добавьте подложку с полупрозрачным фоном или градиент. Либо закрепите сплошную шапку при скролле.
• Увеличьте межбуквенный интервал на 1–2% и межсловный — до явного визуального дыхания. Не экономьте на расстоянии между пунктами: клик-зона 44×44 px. Уберите декоративные тени и размытые эффекты, которые смазывают контуры.
• Сократите количество пунктов. Оставьте главные: Каталог/Продукт, Цены/Тарифы, Доставка, Контакты/Поддержка, Вход/Корзина. Остальное — во вторичное меню или в подвал. Короткие и понятные слова читаются быстрее.
• Состояния наведений и активов сделайте заметными: полужирный, подчёркивание, явное изменение цвета, не только оттенок на 5%. Фокус-стили для клавиатуры оставьте видимыми.
• Настройте шрифтовой стек с понятным fallback: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif. Проверьте сглаживание на Windows и macOS. Отключите рендер, который делает буквы тоньше, чем задумано.
• Проверьте адаптив. На 320–375 px пункты не должны слипаться или уходить под иконки. Если места мало, переключайте часть пунктов в бургер, но оставляйте ключевые ярлыки рядом: Каталог, Корзина.
• Прогоните меню через эмуляторы и реальные устройства. Проверьте при 100%, 125%, 150% масштабе. Проверьте при ярком дневном свете на мобильном. Исправляйте по факту, пока пункты не считываются мгновенно.

Гипотезы, как увеличить конверсию

• Если увеличить контраст текста меню до уровня WCAG AA, то конверсия в просмотр ключевых разделов вырастет за счёт того, что люди быстрее находят нужный пункт.
• Если заменить тонкий шрифт на полужирный в меню, то конверсия в переход к Каталогу вырастет за счёт более уверенного распознавания названий.
• Если убрать верхний регистр в пунктах меню, то конверсия в добавление в корзину вырастет за счёт более быстрого чтения и снижения ошибок навигации.
• Если закрепить непрозрачную шапку с меню при скролле, то конверсия в возврат к Каталогу вырастет за счёт постоянной доступности навигации на длинных страницах.
• Если сократить количество пунктов меню до 5–6, то конверсия в переход по ключевым разделам вырастет за счёт снижения когнитивной нагрузки и выборной парализации.