Я думал, меня раздражает шрифт. Оказалось, читать мешает не только он

Если, в двух словах…

Я много читаю и в последнее время много пишу сам в серии Маркетинг Дожми Продажи. В какой-то момент начал замечать: одни длинные статьи я спокойно читаю до конца, а другие через несколько экранов начинают раздражать.

Сначала решил, что дело в шрифте нашего блога.

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

В итоге главный вывод оказался неожиданным:

шрифт был не ответом, а только одним из параметров.

Если выбирать шрифт для длинных статей, смотреть только на название гарнитуры недостаточно. В нашей выборке основной текст на компьютере чаще находится примерно в диапазоне 16-18 пикселей. Но на удобство чтения одновременно влияют расстояние между строками, ширина текстовой колонки, контраст, начертания, фон и конкретное устройство.

Единого “лучшего” шрифта мы не нашли.

Сначала я просто хотел поменять шрифт

Когда много читаешь, начинаешь замечать не только содержание.

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

Где-то раздражает яркий белый фон. Включаешь тёмную тему - и через какое-то время уже она начинает мешать.

Где-то шрифт выглядит совершенно обычным, но длинный текст почему-то идёт тяжело.

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

Но главная проблема была в другом.

Я не мог нормально сформулировать дизайнеру, что именно мне не нравится.

“Мне не нравится шрифт” - это не техническое задание.

Почему не нравится? Какой нужен вместо него? Что конкретно должно стать лучше?

У меня не было ответа.

Поэтому вместо выбора очередного шрифта я попросил сначала собрать насмотренность.

Мы разобрали 15 корпоративных блогов

В выборку попали Saby, Контур, Ozon Seller, Unisender, МойСклад, Brand Analytics, TypeType, Carrot quest, Дело Модульбанка и другие.

По каждому смотрели:

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

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

И первый результат оказался довольно заметным.

13 из 15 блогов используют светлую тему

Из 15 внешних блогов в нашей выборке 13 используют светлую тему как основную.

У Brand Analytics можно переключаться между светлой и тёмной темой.

TypeType может учитывать настройки самого устройства или браузера.

Это не исследование всего интернета и не основание говорить, что почти все корпоративные блоги должны быть светлыми.

Это только результат нашей небольшой выборки.

Но он заставил меня отдельно посмотреть исследования.

Действительно ли тёмный текст на светлом фоне удобнее для чтения?

Со светлой и тёмной темой всё не так однозначно

У светлой темы есть серьёзные аргументы.

В исследовании Axel Buchner и Nadine Baumgartner участники лучше находили ошибки в тексте, когда читали тёмные буквы на светлом фоне, чем светлые буквы на тёмном. Преимущество сохранялось при разном внешнем освещении. Источник: PubMed.

В другой работе проверяли четыре размера текста. Преимущество тёмного текста на светлом фоне становилось заметнее по мере уменьшения размера букв. Источник: PubMed.

Есть и более свежая работа. В исследовании Tali Gazit и соавторов 173 участника выполняли познавательные тесты в светлом и тёмном оформлении. В среднем результаты в светлом варианте оказались выше. При этом авторы исследовали не чтение длинных статей, а познавательные задачи, поэтому напрямую переносить результат на любой блог было бы неправильно. Источник: PubMed.

Можно было бы на этом остановиться и сказать:

“Всё. Делаем белый фон”.

Но есть другая сторона.

В исследовании мобильного приложения для чтения новостей участвовали 28 человек в возрасте от 20 до 30 лет. Они, наоборот, заметно предпочли тёмную тему по субъективной читаемости, удобству и общей удовлетворённости. Для участников также была важна возможность менять размер текста. Источник: Aalborg University.

Поэтому я бы не смешивал две разные вещи:

• насколько хорошо человек выполняет конкретную задачу чтения или поиска информации;
• насколько приятно и комфортно ему субъективно читать на конкретном устройстве и при конкретном освещении.

Это не всегда одно и то же.

Поэтому я не хочу выбирать одну “правильную” тему

Для длинных деловых материалов светлая тема сейчас выглядит для меня разумной основой.

Не потому, что тёмная тема неправильная.

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

Но если человеку вечером удобнее читать в тёмной теме - зачем заставлять его делать иначе?

Поэтому для нашего блога мне сейчас ближе такой вариант:

светлая тема по умолчанию и возможность переключиться на тёмную.

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

Единого правильного шрифта мы не нашли

Со шрифтами я ожидал увидеть более явный ответ.

Например:

“Большинство хороших блогов используют Inter. Значит, ставим Inter”.

Но ничего подобного не получилось.

В нашей выборке встретились Inter, Roboto, Onest, Spectral, Montserrat, Graphik, Kazimir, PT Root UI, FuturaPT, TT Norms Pro, LabGrotesque и другие шрифты.

Где-то один шрифт используется и для заголовков, и для основного текста. Где-то они разные. Где-то стоит широко распространённый шрифт без засечек. Где-то используется собственный корпоративный шрифт.

Среди наиболее приятных нам примеров оказались Saby, Контур, Unisender и Ozon Seller.

Но даже у них параметры заметно отличаются.

Это, наверное, и стало для меня главным открытием:

комфорт чтения нельзя объяснить одним названием шрифта.

Даже понравившиеся нам страницы устроены по-разному

Например, по собранным нами данным:

Saby

• шрифт Inter;
• основной текст около 16 пикселей;
• расстояние между строками примерно в полторы высоты текста;
• текстовая колонка около 860 пикселей.

Контур

• собственный шрифт LabGrotesque;
• основной текст около 18 пикселей;
• расстояние между строками примерно в полторы высоты текста;
• текстовая колонка около 770 пикселей.

Unisender

• основной текст около 18 пикселей;
• строки расположены свободнее;
• текстовая колонка около 720 пикселей.

Ozon Seller

• основной текст около 16 пикселей;
• строки расположены заметно плотнее, чем в части других понравившихся нам примеров.

Получается, даже среди четырёх удачных для нас страниц нет одной формулы.

Нельзя сказать:

“Поставьте этот шрифт, сделайте текст 18 пикселей и получите удобную статью”.

Так это не работает.

Что интересно: параметры нашего блога сами по себе выглядят нормально

В нашем блоге сейчас используется системный шрифт без засечек.

На компьютере основной текст около 18 пикселей.

На телефоне - около 16 пикселей.

Ширина текстовой колонки - примерно 830 пикселей.

Расстояние между строками на большом экране - около 1,7 от размера текста.

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

Поэтому изменение размера текста с 18 до 19 пикселей само по себе вполне может ничего не исправить.

Моё ощущение “меня раздражает шрифт” может складываться сразу из нескольких вещей:

• самого шрифта;
• фона;
• размера текста;
• ширины строки;
• расстояния между строками;
• контраста;
• жирных выделений;
• отображения на конкретном экране.

Пока это гипотеза, а не установленная причина.

Но после исследования мой первоначальный вопрос изменился.

Я больше не ищу самый красивый шрифт

Представим один и тот же шрифт.

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

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

Шрифт один. Читать две страницы можно совершенно по-разному.

В нашей выборке основной текст на компьютере часто находится примерно в диапазоне 16-18 пикселей.

На телефоне часто встречается 15-16 пикселей.

Расстояние между строками у многих сайтов составляет примерно 1,5-1,6 от размера текста.

Ширина текстовой колонки на большом экране во многих примерах находится примерно между 720 и 860 пикселями.

Но это не стандарт и не готовый рецепт.

Это только повторяющиеся диапазоны в нашей небольшой выборке. Для меня они полезны как отправная точка для проверки вариантов.

Я отдельно стал смотреть на жирный и полужирный текст

Когда пишешь статью, очень хочется выделять важное.

Одно предложение жирным. Потом вывод. Потом ещё одну важную мысль.

И в какой-то момент половина страницы становится “важной”.

Если у шрифта тяжёлое жирное начертание, длинный текст начинает визуально дёргаться.

Поэтому при выборе шрифта теперь нужно отдельно посмотреть:

• обычное начертание (Regular);
• среднее начертание (Medium);
• полужирное начертание (Semibold);
• жирное начертание (Bold);
• насколько хорошо они отличаются друг от друга;
• не становятся ли русские буквы слишком плотными;
• как выглядят цифры и знаки препинания;
• как выглядит большой русский абзац, а не два красивых слова в макете.

Особенно важно посмотреть всё это на телефоне.

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

Типографику нельзя проверять только на большом мониторе

На большом экране макет может выглядеть прекрасно. Потом открываешь его на телефоне и получаешь совсем другую страницу.

Заголовок растягивается на несколько строк. Жирные выделения занимают большую часть экрана. Таблица перестаёт помещаться. Цитата становится огромным блоком. Меняется длина строки и само восприятие размера букв.

Поэтому я бы уже не принимал решение о шрифте по одной красивой странице.

Нужна настоящая длинная статья, в которой есть:

• заголовок первого уровня;
• заголовки второго и третьего уровня;
• длинные и короткие абзацы;
• списки;
• цитаты;
• изображения;
• таблицы;
• ссылки;
• обычное, полужирное и жирное начертание.

И её нужно открыть как минимум на компьютере, планшете и телефоне.

Что я хочу проверить на нашем блоге

В начале этой истории задача звучала так:

“Давайте поменяем шрифт”.

Сейчас она звучит иначе.

Я хочу взять несколько настоящих длинных статей (включая недавний разбор подготовки статей для нейросетей и поиска) и собрать несколько вариантов всей системы чтения.

Для самого шрифта я бы протестировал несколько спокойных вариантов с хорошей кириллицей.

Inter и Roboto остаются очевидными кандидатами хотя бы потому, что они привычны. Можно отдельно посмотреть Onest и другие близкие по характеру шрифты.

Но одновременно с самим шрифтом нужно проверить:

• размер основного текста;
• расстояние между строками;
• ширину текстовой колонки;
• длину строки;
• контраст;
• жирные выделения;
• размеры заголовков;
• светлую и тёмную тему;
• отображение на разных устройствах.

Причём менять всё сразу тоже не стоит.

Иначе в конце получится только ощущение “так красивее”, но останется непонятно, что именно стало удобнее.

Чек-лист: как проверить длинную статью

1. Шрифт

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

2. Размер текста

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

3. Расстояние между строками

• Строки не слипаются.
• Текст не рассыпается на отдельные полосы.
• Отдельно проверены длинные абзацы, списки и жирные фрагменты.

4. Ширина текстовой колонки

• Текст не растягивается на весь широкий монитор.
• Глазам удобно переходить от конца строки к началу следующей.
• На телефоне остаются нормальные поля.
• Таблицы и изображения не ломают основную ширину текста.

5. Заголовки

• Заголовок первого уровня сразу отличается от остального текста.
• Заголовок второго уровня хорошо разделяет большие части статьи.
• Заголовок третьего уровня заметен, но не спорит с заголовком второго уровня.
• Иерархия понятна без дополнительных украшений.

6. Жирные выделения

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

7. Светлая и тёмная тема

• Есть понятная основная тема.
• Пользователь при необходимости может выбрать другую.
• Выбранный вариант желательно сохранять.
• Обе темы отдельно проверены по читаемости и контрасту.

8. Контраст

Красивый серый текст на сером фоне может хорошо выглядеть на макете и плохо читаться в реальной жизни.

Поэтому контраст лучше не определять только на глаз.

Рекомендации по доступности веб-контента WCAG устанавливают для обычного текста минимальное соотношение контраста 4,5:1, а для крупного текста - 3:1. Это не ответ на вопрос “красиво ли”, а нижняя граница доступности, которую полезно проверять отдельно. Источник: W3C.

9. Вся статья целиком

Нужно проверять не отдельный красивый экран, а настоящий длинный материал, где одновременно есть:

• заголовки;
• абзацы;
• выделения;
• списки;
• цитаты;
• таблицы;
• изображения;
• ссылки.

Каждый элемент по отдельности может выглядеть хорошо, а вместе они могут начать мешать друг другу.

10. Разные устройства и условия

Одну и ту же статью стоит открыть:

• на большом мониторе;
• на ноутбуке;
• на планшете;
• на телефоне;
• днём;
• вечером.

И ещё одна проверка, которую я раньше почти не делал

Дать длинную статью нескольким людям.

Но не спрашивать:

“Тебе нравится шрифт?”

И не спрашивать:

“Красиво?”

А спросить:

“В каком месте тебе стало неудобно читать?”

И ещё лучше:

“В какой момент тебе захотелось закрыть статью или начать быстрее её пролистывать?”

Потому что “мне нравится этот шрифт” и “я спокойно прочитал пятнадцать минут текста” - две совершенно разные оценки.

Частые вопросы

Какой шрифт лучше использовать для длинных статей?

Универсального лучшего шрифта мы не нашли.

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

В нашей выборке использовались Inter, Roboto, Onest, LabGrotesque и многие другие шрифты.

Какой размер шрифта удобен для сайта?

В исследованных нами корпоративных блогах основной текст на компьютере часто находится примерно в диапазоне 16-18 пикселей.

На телефоне часто встречается 15-16 пикселей.

Это не универсальный стандарт, а ориентир для дальнейшей проверки на конкретном шрифте и макете.

Какое расстояние между строками использовать?

В нашей выборке часто встречается значение примерно 1,5-1,6 от размера текста.

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

Какой должна быть ширина текстовой колонки?

В исследованных блогах на большом экране часто встречалась ширина примерно 720-860 пикселей.

Но ориентироваться только на пиксели тоже неправильно. Ширину нужно смотреть вместе с размером и особенностями конкретного шрифта.

Что лучше для чтения - светлая или тёмная тема?

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

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

Что важнее - шрифт или размер текста?

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

Один и тот же шрифт воспринимается совершенно по-разному при другой ширине строки, размере текста, расстоянии между строками, контрасте и начертании.

Поэтому проверять нужно всю систему чтения.

В итоге я начал не с того вопроса

В начале я хотел найти новый шрифт.

И вполне возможно, что мы действительно его поменяем.

Но теперь я понимаю, что это был слишком узкий вопрос.

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

Поэтому я больше не хочу искать “самый красивый шрифт для блога”.

Мне хочется собрать такую систему чтения, которую через несколько экранов просто перестаёшь замечать.

Чтобы человек думал о том, что написано в статье, а не о том, каким шрифтом она набрана.

Для длинного текста это, пожалуй, и есть главный критерий.

Источники исследований

• Buchner A., Baumgartner N. Text-background polarity affects performance irrespective of ambient illumination and colour contrast. Ergonomics, 2007. DOI: 10.1080/00140130701306413. PubMed.
• Piepenbrock C., Mayr S., Buchner A. Positive display polarity is particularly advantageous for small character sizes: implications for display design. Human Factors, 2014. DOI: 10.1177/0018720813515509. PubMed.
• Gazit T. и соавторы. The dark side of the interface: examining the influence of different background modes on cognitive performance. Ergonomics, 2026. DOI: 10.1080/00140139.2025.2483451. PubMed.
• Clarkfeldt A. V., Bjørner T. Light mode versus dark mode in a mobile news reading application. ICISS 2025 Proceedings, опубликовано в 2026 году. DOI: 10.1145/3803722.3803727. Aalborg University.
• Web Content Accessibility Guidelines, критерий минимального контраста. W3C.