Серый шрифт 12 пикселей на белом фоне выгоняет клиента молча — без единой жалобы, без обратной связи, без следа в отчётах. Человек зашёл, скользнул глазами по экрану и ушёл. Не потому что цена высокая и не потому что предложение слабое, а потому что он физически не смог прочитать текст: буквы мелкие, светлые, строки в полтора экрана шириной, межстрочный интервал впритык. Вы заплатили за этот визит трафиком или рекламой, а он не дочитал первый абзац.
Самое коварное здесь то, что владелец сайта проблемы не видит. Он знает свой текст наизусть, читает его с большого монитора в удобном кресле. А клиент открывает страницу с телефона на улице, одной рукой, между делом, при ярком свете. И то, что дизайнеру казалось стильным минимализмом, для реального человека превращается в нечитаемый серый шум. Ниже — измеримые нормы читаемости, разбор того, что именно выгоняет людей, и порядок исправлений, который занимает пару часов и не требует переделки сайта.
Почему читаемость — это деньги, а не вкусовщина
Связь прямая и короткая. Если человек не может комфортно читать, он не задерживается на странице. Растёт доля мгновенных уходов, падает глубина просмотра, сокращается время визита, а главное — растут возвраты в поисковую выдачу. Система читает это как «страница не отвечает на запрос» и постепенно опускает вас, даже если содержание у вас лучшее в нише.
Есть и второй слой, психологический. Мелкий, светлый, плотный текст подсознательно считывается как «сложно» и «долго». Мозг экономит усилия и решает, что тут много букв и лень разбираться, — ещё до того, как оценит смысл. Хорошая типографика снимает это сопротивление заранее: человек начинает читать, не задумываясь о том, что он читает.
И третий слой — доверие. Аккуратно набранная страница воспринимается как сделанная людьми, которые следят за деталями. Плотный серый текст с рваными строками читается как заброшенный сайт, а от заброшенного сайта не хочется покупать. Это не измеряется напрямую, но проявляется в конверсии, особенно в дорогих услугах, где решение принимается медленно.
Отдельно стоит сказать про возраст аудитории. После сорока лет у большинства людей начинается возрастная дальнозоркость, и мелкий светлый текст для них не «немного неудобный», а нечитаемый в принципе. Если ваши клиенты — собственники бизнеса, руководители, покупатели дорогих товаров, значительная часть аудитории именно в этом возрасте. Дизайнер двадцати пяти лет с идеальным зрением этой проблемы не видит физически.
Кегль: какой размер основного текста нормален
Начну с самого частого греха. Основной текст в 12–13 пикселей до сих пор встречается регулярно — это наследие эпохи маленьких мониторов, когда экраны были 1024 пикселя в ширину и мелкий шрифт экономил место. Сегодня экраны другие, плотность пикселей другая, и такой размер выглядит как петит в договоре.
- Основной текст на десктопе — 17–20 пикселей. Ниже 16 не опускаться вообще. Крупные издания давно перешли на 18–21, и это не мода, а результат замеров.
- Основной текст на мобильном — 16–18 пикселей. Меньше 16 браузер на телефоне может начать масштабировать страницу, и вёрстка поедет.
- Подписи, сноски, служебный текст — не меньше 14. Всё, что мельче, читается только при увеличении.
- Заголовки — по контрасту, а не по величине. H2 должен явно отличаться от текста, но гигантские заголовки в 48 пикселей на мобильном съедают экран и отодвигают содержание.
- Задавайте размер в относительных единицах, чтобы у человека работали настройки браузера. Жёстко зафиксированный размер в пикселях ломает доступность для тех, кто увеличивает шрифт системно.
Проверить свой сайт можно за минуту: откройте инструменты разработчика, выделите абзац и посмотрите вычисленный размер шрифта. Многие удивляются, обнаружив там 13 или 14 пикселей — потому что визуально на большом мониторе это выглядит терпимо, а на телефоне превращается в проблему.
Контраст: цифры, которые стоит знать
Второй по частоте грех — светло-серый текст. Дизайнеры любят его за «мягкость», а он режет читаемость сильнее, чем мелкий кегль. Контраст измеряется соотношением яркости текста и фона, и нормы здесь стандартизированы.
Смежный материал по теме — «Прокат авто без своего сайта живёт на агрегаторах и отдаёт им треть. Как забрать клиента напрямую».
| Сочетание | Контраст | Вердикт |
|---|---|---|
| #000000 на белом | 21:1 | максимум, для длинного текста избыточно жёстко |
| #1A1A1A – #333333 на белом | от 12:1 до 16:1 | оптимально для основного текста |
| #595959 на белом | около 7:1 | приемлемо, ниже опускаться не стоит |
| #767676 на белом | 4,5:1 | нижняя допустимая граница |
| #999999 на белом | около 2,8:1 | не проходит норму, читается плохо |
| #CCCCCC на белом | около 1,6:1 | текст практически невидим |
Норма доступности требует контраста не ниже 4,5:1 для обычного текста и 3:1 для крупного. Но норма — это минимум, при котором текст читается вообще, а не комфортно. Для основного текста я советую держаться в диапазоне от 8:1 и выше: тёмно-серый вместо чёрного даёт мягкость, но не отнимает читаемость.
Отдельная беда — светло-серый текст на светло-сером фоне, популярный в блоках «преимущества» и в подвалах. Там контраст нередко падает ниже 2:1, и человек просто не видит, что там написано. Проверяется любым бесплатным анализатором контраста: вставляете два цвета, получаете число.
Помогу с продвижением: SEO-специалист Анатолий Кузнецов — вывожу сайты в топ Яндекса белыми методами.
И ещё одно место, где контраст рушится незаметно, — текст поверх фотографии. Утром на макете он читался, потому что фото было тёмным в нужном месте, а на другой карточке фотография светлая, и надпись исчезает. Лечится полупрозрачной подложкой под текстом или затемняющим слоем поверх фотографии.
Шрифт: что выбирать и чего избегать
Выбор гарнитуры влияет меньше, чем размер и контраст, но ошибки здесь тоже стоят читателей.
- Тонкие начертания — не для основного текста. Light и Thin на экране выглядят изящно на макете и разваливаются на реальных экранах, особенно на светлом фоне. Основной текст набирается обычным начертанием.
- Декоративные шрифты — только для заголовков и в небольшом объёме. Рукописные гарнитуры в теле текста нечитаемы, даже если очень нравятся.
- Не больше двух гарнитур на сайт. Одна для заголовков, одна для текста. Третья почти всегда лишняя и создаёт визуальный шум.
- Проверьте наличие кириллицы. Часть популярных шрифтов не содержит русских букв, и браузер подставляет системный — вёрстка едет, а на макете всё выглядело хорошо.
- Всегда задавайте запасной шрифт. Если внешний файл не загрузился, текст должен отрисоваться системным, а не исчезнуть на секунды.
- Не увлекайтесь количеством начертаний. Каждое — отдельный файл, а это вес страницы и задержка отрисовки. Обычно достаточно обычного, полужирного и курсива.
Засечки или без засечек — вопрос менее принципиальный, чем принято думать. На экранах с высокой плотностью пикселей шрифты с засечками читаются не хуже. Важнее другое: у гарнитуры должны быть различимые формы похожих знаков — прописная I, строчная l и цифра 1 не должны выглядеть одинаково, иначе человек спотыкается на артикулах, телефонах и адресах.
Интервалы и длина строки
Плотно набранный текст с интервалом 1,2 читается заметно тяжелее того же текста с интервалом 1,6. Причина механическая: при узком интервале взгляд, переходя на новую строку, промахивается и цепляет соседнюю. Человек перечитывает и устаёт.
Рабочие значения такие: межстрочный интервал для основного текста 1,5–1,7, для заголовков 1,1–1,3 (крупному кеглю нужен меньший коэффициент). Отступ между абзацами — заметный, не меньше 0,8 высоты строки, иначе абзацы сливаются в одно полотно. Отступ перед подзаголовком всегда больше, чем после него: заголовок должен визуально принадлежать следующему блоку, а не предыдущему.
Длина строки — 60–80 знаков вместе с пробелами. На широком мониторе это означает ограничение ширины текстовой колонки примерно до 700–800 пикселей. Текст во всю ширину экрана в 1920 пикселей нечитаем: дойдя до конца строки, глаз теряет начало следующей. Это одна из тех правок, которая делается одной строкой в стилях и даёт немедленный эффект на дочитывания.
Если нужны детали, смотрите «Анализ сайта клиента пример | Ищем причину сдерживающую продвижение в Яндекс».
Ещё про межбуквенное расстояние: разреженный текст в основном наборе читается хуже обычного, а вот заголовкам из прописных букв лёгкая разрядка идёт на пользу. Обратная ситуация — плотно сжатый текст ради экономии места — встречается на мобильных версиях и почти всегда вредит.
Реальные условия чтения с телефона
Проверять сайт надо не в браузерном эмуляторе на большом мониторе, а на своём телефоне и желательно на улице. Условия чтения с мобильного отличаются радикально: яркий свет снижает воспринимаемый контраст, экран может быть с отпечатками, человек держит телефон одной рукой на весу и часто в движении.
Что из этого следует практически. Во-первых, контраст, который на мониторе кажется избыточным, на солнце оказывается едва достаточным — поэтому светло-серый текст на мобильных запрещён. Во-вторых, отступы от краёв экрана обязательны: текст, прижатый к границе, частично перекрывается тенью корпуса и пальцем. В-третьих, кликабельные элементы — ссылки, кнопки, поля — должны быть не меньше 44 пикселей по каждой стороне, иначе в них не попасть.
Отдельно про автоматическое масштабирование. Если у вас не задан правильный мета-тег области просмотра, телефон покажет десктопную версию в уменьшенном виде, и весь текст станет вдвое мельче заявленного. Проверяется мгновенно: если при открытии страницы приходится разводить пальцы, чтобы прочитать, — проблема здесь.
Тёмная тема и текст на фоне
Тёмная тема набрала популярность, и вместе с ней пришли новые ошибки. Главная — чистый белый текст на чистом чёрном фоне. Такой контраст в 21:1 вызывает эффект ореола: буквы «расплываются», и длинный текст читать физически тяжело. Правильные значения для тёмной темы: фон не чёрный, а тёмно-серый в районе #1A1D23, текст не белый, а светло-серый около #E4E6EB.
Вторая частая ошибка тёмной темы — полужирные начертания, которые на тёмном фоне выглядят жирнее, чем на светлом. Если сайт поддерживает обе темы, вес шрифта в тёмной стоит уменьшать на одну ступень.
Третье — текст поверх изображений и градиентов. Правило простое: если под текстом что-то есть, между ними должна быть подложка. Полупрозрачный слой, затемнение фотографии, плашка под надписью — любой из вариантов. Надежда на то, что фотография всегда будет достаточно тёмной, не оправдывается: на разных карточках и на разных экранах картинка ведёт себя по-разному.
Подробнее об этом — в статье «Простой дизайн сайта и его влияние на SEO».
Мелочи, которые ломают читаемость незаметно
Кегль и контраст — крупные рычаги, но есть набор мелких деталей, которые в сумме дают сопоставимый эффект.
- Текст поверх анимации или видео. Фон постоянно меняет яркость, и надпись то видна, то нет. Читать такое невозможно, а на слабых устройствах ещё и тормозит.
- Прозрачность вместо цвета. Дизайнеры часто задают тексту непрозрачность 60 процентов вместо явного серого. Результат тот же низкий контраст, но обнаружить его сложнее — в стилях цвет выглядит чёрным.
- Ссылки, неотличимые от текста. Убранное подчёркивание и тот же цвет означают, что ссылок никто не видит. Внутренняя перелинковка при этом формально есть, а работает вхолостую.
- Автоматическая расстановка переносов без словаря. Русские слова переносятся неправильно, и человек спотыкается на каждой второй строке.
- Тени под текстом. Приём из середины нулевых: тень размывает контур букв и снижает воспринимаемую резкость.
- Фиксированная шапка на треть экрана. На телефоне она съедает место, которое должно занимать содержание, и человек читает текст в щели высотой в несколько строк.
Проверяются они одним приёмом: откройте страницу и попробуйте прочитать её как посторонний человек, не зная содержания. Все места, где вы споткнулись или прищурились, — кандидаты на исправление. Этот способ грубый, но он находит больше, чем автоматические проверки, потому что учитывает контекст.
Как проверить и починить за пару часов
| Что проверить | Как | Норма |
|---|---|---|
| Размер основного текста | инструменты разработчика, свойство font-size | от 17 px на десктопе, от 16 на мобильном |
| Контраст текста и фона | любой анализатор контраста по двум цветам | не ниже 7:1 для основного текста |
| Межстрочный интервал | свойство line-height | 1,5–1,7 |
| Ширина колонки | линейка в инструментах разработчика | 60–80 знаков, 700–800 px |
| Отступы между абзацами | визуально | абзацы явно разделены |
| Чтение на солнце | телефон, улица, яркий день | текст читается без прищуривания |
| Размер кликабельных элементов | палец, а не курсор | от 44×44 px |
Порядок исправлений выстраивается по массовости: все семь параметров задаются в стилях один раз и применяются ко всему сайту сразу. Это и есть тот случай, когда несколько строк в теме меняют поведение на тысячах страниц. Начинать надо с контраста и кегля — они дают основной эффект, а ширина колонки и интервалы добавляют к нему ещё заметную часть.
После правок обязательно снимите точку отсчёта: запишите текущие значения времени на странице, глубины просмотра и доли отказов по мобильным. Через месяц сравните. Типографика — редкий случай, когда результат виден быстро и не требует ждать переиндексации.
Частые вопросы
Дизайнер говорит, что крупный текст выглядит дёшево. Он прав? Это вопрос пропорций, а не размера. Крупный текст выглядит дёшево, когда всё остальное на странице не масштабировано вместе с ним: отступы маленькие, колонка узкая, заголовки не отличаются. При согласованной сетке текст в 19 пикселей смотрится дорого — так набраны сайты крупнейших изданий.
Можно ли оставить серый текст, если он крупный? Отчасти: для крупного текста норма контраста мягче — 3:1 вместо 4,5:1. Но речь о заголовках и подписях, а не об основном тексте. Основной текст должен быть тёмным независимо от размера.
Насколько это влияет на позиции? Отдельного фактора «контраст текста» не существует. Влияние идёт через поведение: дочитывания, глубину, возвраты в выдачу. На практике это одна из самых недооценённых причин, по которой сильный по содержанию сайт стоит ниже слабого.
У нас корпоративный стиль требует светло-серого. Что делать? Использовать фирменный светло-серый там, где он не мешает: в служебных подписях, в разделителях, в декоративных элементах. Основной текст выводить из-под требований стиля — это вопрос доступности, а не оформления, и такой аргумент обычно принимается.
Стоит ли добавлять на сайт переключатель размера шрифта? Для государственных и медицинских сайтов — да, это требование доступности. Для остальных смысла мало: гораздо полезнее сразу задать нормальный размер и не ломать масштабирование браузера.
Коротко
- Основной текст — от 17 пикселей на десктопе и от 16 на мобильном; 12–13 пикселей нечитаемы для значительной части аудитории.
- Контраст текста к фону держать от 7:1; светло-серый на белом не проходит даже минимальную норму.
- Межстрочный интервал 1,5–1,7 и ширина колонки 60–80 знаков — две правки, которые дают быстрый прирост дочитываний.
- Тонкие начертания и декоративные шрифты в теле текста не используются; запасной шрифт обязателен.
- Проверять надо на своём телефоне и на улице, а не в эмуляторе на большом мониторе.
- В тёмной теме не использовать чистый белый на чистом чёрном — берите тёмно-серый фон и светло-серый текст.
Если хотите понять, теряете ли вы людей именно на читаемости и какие правки дадут эффект в вашем случае, это видно по поведению мобильной аудитории и по стилям сайта за один разбор. Приходите на SEO-консультацию: посмотрим страницы вместе и составим короткий список правок.
Увеличьте позиции и продажи вашего сайта
Профессиональное SEO-продвижение с гарантией результата. Выберите подходящую услугу:
Остались вопросы по продвижению?
Меня зовут Анатолий Кузнецов, я SEO-оптимизатор с 20-летним стажем. Разберу ваш сайт, отвечу на вопросы и подскажу, что улучшить для роста позиций в Яндексе.
Связаться со мной →Комментарии
Домна Ягужинская
Померила контраст на своём сайте — 3,1 к 1. Текст #8A8A8A на белом, дизайнер называл это «благородным серым». Аудитория у нас в основном 45+, продаём медицинское оборудование. Кажется, я нашла причину, почему заявок мало при нормальном трафике.
Анатолий Кузнецов автор
С вашей аудиторией это действительно может быть основной причиной, и проверить гипотезу можно быстро. Поменяйте цвет основного текста на #2B2B2B и одновременно поднимите кегль до 18 пикселей — обе правки делаются в стилях за десять минут и применяются ко всему сайту. Дальше две недели не трогайте больше ничего и сравните в Метрике время на странице, глубину и долю визитов длиннее минуты, отдельно по возрастным сегментам, если у вас настроена такая разбивка. Для покупателей медицинского оборудования добавлю ещё одно наблюдение из практики: у них критичны технические характеристики и цифры в таблицах, а именно там чаще всего стоит самый мелкий шрифт. Проверьте таблицы отдельно — нередко в них кегль на два-три пункта меньше основного текста, и человек, который пришёл сравнить параметры, не может их прочитать.
Эмилия Долматова
Не соглашусь, что чёрный на белом избыточен. Читаю много, и как раз максимальный контраст меньше всего утомляет. Мягкие серые оттенки приходится разглядывать.
Анатолий Кузнецов автор
Тут многое зависит от экрана и от освещения, и ваш опыт вполне валиден. Оговорка про избыточность чистого чёрного относится в первую очередь к ярким экранам с высокой светимостью и к чтению в темноте — в этих условиях максимальный контраст даёт зрительное утомление. На матовом экране при дневном свете чёрный на белом действительно комфортен. Практический вывод для владельца сайта такой: разница между #000000 и #222222 по влиянию на поведение находится в пределах погрешности, а вот разница между #222222 и #999999 огромна. То есть спорить о верхней границе смысла мало, экономить надо на другом конце шкалы. Если хотите универсальное решение — берите #1F2328 или близкое: оно и на ярком экране не режет, и на тусклом читается уверенно.
Пахом Копосов
Про подложку под текстом на фото — больная тема. У нас на главной слайдер, и на трёх слайдах заголовок читается, а на двух исчезает совсем. Каждый раз забываем проверить при добавлении новой картинки.
Трифон Тыртышный
Вопрос про относительные единицы. Разработчик говорит, что переводить весь сайт с пикселей на rem — большая работа и риск сломать вёрстку. Насколько это критично на самом деле?
Анатолий Кузнецов автор
Критично не настолько, чтобы ради этого затевать переработку вёрстки. Разработчик прав в оценке трудозатрат: смена единиц по всему проекту действительно задевает отступы, сетку и медиазапросы. Компромисс такой. Переведите на относительные единицы только размеры шрифтов в текстовых блоках — статьи, описания, карточки товаров. Отступы и сетку оставьте в пикселях. Это закрывает основную проблему: человек, который увеличил шрифт в настройках браузера, получит крупный текст, а макет при этом не поедет. Работы там на несколько часов, а не на неделю. И проверьте отдельно одну вещь, которая ломает всё независимо от единиц: если в мета-теге области просмотра стоит запрет на масштабирование, человек физически не сможет увеличить страницу пальцами. Такой запрет встречается сплошь и рядом, ставится по привычке и убирается одной правкой.
Олимпиада Твердохлебова
Подняли кегль с 14 до 18 и убрали серый. Ничего больше не меняли. Время на странице выросло примерно на четверть, отказы упали. Правки заняли двадцать минут, а результата ждали от переписывания текстов.
Тарас Чиненов
А что делать с текстом в футере? Там традиционно всё мелкое и серое — реквизиты, политика, копирайт. Их тоже нужно приводить к норме или это допустимая зона?
Анатолий Кузнецов автор
Подвал делится на две части, и относиться к ним надо по-разному. Первая — служебная: копирайт, номер лицензии, ссылка на политику. Здесь допустим меньший кегль, от 14 пикселей, и пониженный контраст, но не ниже 4,5:1. Вторая часть — коммерчески значимая: адрес, телефон, режим работы, реквизиты, зона доставки. Это те самые сведения, по которым оценивается, можно ли у вас покупать, и их люди реально ищут глазами, особенно с мобильного. Их надо набирать основным кеглем и нормальным контрастом, а телефон делать кликабельной ссылкой. Я регулярно вижу сайты, где номер телефона в подвале набран серым в 12 пикселей и не является ссылкой — то есть человек с телефона не может ни прочитать его, ни нажать. Это прямая потеря обращений, и чинится она за пять минут.
Эраст Мокрушин
Про тёмную тему полезно. У нас белый на чёрном, и я всё не мог понять, почему при чтении длинных статей глаза устают быстрее, чем на светлой версии. Думал, дело в мониторе.
Герасим Родыгин
Спорный совет про две гарнитуры. У нас на сайте три: заголовки, текст и отдельная моноширинная для кода. Убирать третью некуда, статьи технические.
Дорофей Балашов
Проверил на улице в солнечный день — половина сайта нечитаема, включая кнопку заказа. В офисе на мониторе всё выглядело отлично. Простейшая проверка, а никогда её не делал.
Аристарх Глазырин
Вопрос про вес шрифтов. У нас подключено шесть начертаний одной гарнитуры, страница грузится долго. Можно ли отказаться от части без потери внешнего вида?
Евлампия Пантелеева
Добавлю про различимость знаков. У нас в артикулах есть и единицы, и строчные L, и в выбранном шрифте они выглядели одинаково. Клиенты регулярно путались при заказе по телефону. Сменили гарнитуру — вопросы прекратились.
Наум Толмачёв
Как объяснить руководству, что типографика важнее редизайна? Нам предлагают полностью переделать сайт за большие деньги, а по вашему списку видно, что половина проблем чинится настройками стилей.
Анатолий Кузнецов автор
Не противопоставляйте, а выстройте в очередь и подкрепите замером. Предложите руководству такой порядок: сначала за неделю правятся стили — кегль, контраст, интервалы, ширина колонки, размеры кликабельных элементов. Дальше месяц наблюдения с фиксацией трёх метрик: время на странице, глубина просмотра, доля обращений от числа визитов. Если эти правки дают заметный прирост, вы получаете два аргумента сразу — во-первых, часть проблем решена дёшево, во-вторых, теперь понятно, что именно должен исправить редизайн, а не «сделать современно». Отдельно предупредите про риск, который недооценивают: полный редизайн на новом движке нередко роняет позиции на несколько месяцев из-за смены адресов, потери разметки и изменения структуры. Если сайт приносит деньги сейчас, переделывать его целиком стоит только тогда, когда точечные правки исчерпаны и понятно, чего именно не хватает.
Забрала: основной текст от 16px, тёмный с контрастом, проверять на телефоне на солнце, учитывать возраст аудитории, межстрочный интервал, контрастные подписи форм, спорить с дизайнером цифрами. Читаемо и красиво совместимы. Спасибо, иду проверять контраст!
Баланс есть: современный минимализм не требует нечитаемого шрифта. Достаточный размер, контраст и воздух прекрасно уживаются со стильным дизайном. Читаемо не значит уродливо. Хороший дизайнер делает и красиво, и читабельно, это не взаимоисключающие вещи, а признак мастерства.
А как найти баланс между стильным минимализмом дизайнера и читабельностью? Не хочется скатиться в некрасивый, но читаемый сайт из нулевых.
Виктория, баланс есть: современный минимализм не требует нечитаемого шрифта. Достаточный размер, контраст и воздух прекрасно уживаются со стильным дизайном. Читаемо не значит уродливо и не значит из нулевых. Хороший дизайнер делает и красиво, и читабельно — это признак мастерства, а не компромисс. Нечитаемый серый 12px — это не стиль, а недоработка.
Добавлю: дайте возможность увеличить текст без поломки вёрстки. Часть людей ставит крупный шрифт в настройках браузера. Если сайт при этом разваливается, вы теряете тех, кому нужен крупный текст. Гибкая вёрстка под разный размер шрифта — тоже забота о читателе.
Спасибо, а то у нас именно светло-серый 13 пикселей, дизайнер настоял на воздушности. А клиенты, наверное, мучаются. Проверю контраст и отказы, покажу дизайнеру цифры. Красота красотой, но текст должен читаться, иначе он бесполезен.
Спорьте с дизайнером цифрами, а не вкусом. Покажите отказы, карту скроллинга, тест на контраст. Красиво против читаемо — это не про вкус, а про то, работает страница или отпугивает. Данные убеждают дизайнера лучше, чем мне не нравится серый.
Евгений прав — это ключевой приём. Спорить с дизайнером про красиво против читаемо на уровне вкусов бесполезно. Покажите отказы, карту скроллинга, тест на контраст, дочитывания до и после. Данные убеждают лучше, чем мне не нравится серый. Красота, которую не видно, выгоняет клиентов — и это видно по цифрам, а не по ощущениям.
Плейсхолдеры в формах серым тонким шрифтом — отдельная беда. Человек не видит, что вводить, путается, бросает форму. Сделали подписи полей контрастными — заполняемость выросла. Читабельность важна не только в тексте, но и в интерфейсе.
Проверяйте карту скроллинга: если люди не дочитывают, причина может быть в шрифте, а не в контенте. Улучшили читабельность — глубина прокрутки выросла на том же тексте. Иногда дело не в том, что написано, а в том, что это невозможно комфортно читать.
Межстрочный интервал и ширина строки тоже влияют. Плотно сбитый текст без воздуха или слишком длинные строки читать тяжело. Не только размер и цвет, вся типографика. Добавили межстрочный интервал — текст стало легче читать, дочитывания выросли.
Нечитаемый текст напрямую бьёт по поведенческим. Человек не может прочитать — уходит, растут отказы, падают дочитывания, Яндекс видит неудобную страницу. Так что читабельность это не только про UX, но и про SEO. Плохой шрифт роняет и конверсию, и позиции.
Возраст аудитории учитывайте. Если среди клиентов есть люди за 45, мелкий тонкий шрифт для них барьер. Увеличили шрифт и контраст под нашу аудиторию постарше — заявки выросли. Читабельность под конкретную аудиторию, а не под вкус дизайнера.
На мобильном мелкий серый шрифт вообще приговор. На улице на солнце экран бликует, и светлый текст исчезает. А больше половины трафика мобильный. Проверяйте сайт не в тёмной комнате на большом мониторе, а на телефоне на улице, как реальные люди.
Контраст — критичная штука, есть даже стандарты доступности с коэффициентами. Светло-серый на белом часто их не проходит. Проверьте свой текст на контраст — многие модные сайты проваливают тест и теряют читателей, не подозревая об этом.
Для основного текста ориентир от 16 пикселей, на мобильных не меньше. Цвет — тёмный на светлом с достаточным контрастом, а не серый на белом. Стильно и нечитаемо — не комплимент. Читабельность важнее моды, потому что нечитаемый текст просто не работает.
А какой размер и цвет шрифта считается нормальным для читабельности? Дизайнер уверяет, что 12-14 серым это стильно и все так делают.
Марина, для основного текста ориентир от 16 пикселей, на мобильных не меньше. Цвет — тёмный на светлом с достаточным контрастом, а не серый на белом. Стильно и нечитаемо — не комплимент. 12-14 светло-серым — как раз то, что половина аудитории не может комфортно прочитать. Проверьте текст на контраст по стандартам доступности, многие модные сайты его проваливают.
Дизайнеры обожают светло-серый тонкий шрифт 12 пикселей — модно и воздушно. А половина аудитории его просто не может прочитать, особенно люди постарше и на телефоне на солнце. Человек не будет напрягаться, он уйдёт. Красивая типографика, которую не видно, выгоняет клиентов молча.