Особенности восприятия шрифтов

Обратил внимание, что в тёмной теме моего сайта текст выглядит жирнее, чем в светлой. Семейство шрифта то же, размер тот же, значения font-weight тоже одинаковые. Но при переключении темы ощущение от страницы менялось: светлые буквы на тёмном фоне казались плотнее, особенно в выделениях и заголовках разделов.

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

Что именно сравнивал

На сайте используется Alegreya для основного текста и Alegreya SC для заголовков. Alegreya подключена как переменный шрифт с диапазоном весов от 400 до 900. Поэтому можно выбрать, например, 520 вместо привычных 400 или 700: отдельный файл для каждого такого значения не нужен. У подключённой Alegreya SC есть только два веса, 500 и 700².

До изменения основной текст имел вес 440, жирные выделения и заголовки разделов — 700. Эти значения не зависели от темы. При переключении менялись цвета, но не насыщенность шрифта.

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

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

Что изменилось

Вместо отдельных чисел в правилах появились CSS-переменные для четырёх ролей: основной текст, промежуточные элементы, сильное выделение и заголовки. Значения получились такими:

Основной текст теперь имеет вес 400 в обеих темах. Отдельная поправка для тёмного фона понадобилась выделениям и промежуточным элементам. Главный заголовок статьи тоже не менялся — у него и раньше было отдельное правило с весом 500.

В сокращённом виде настройка выглядит так:

:root {
  --w-body: 400;
  --w-medium: 450;
  --w-strong: 600;
  --w-head: 500;
}

:root[data-theme="dark"] {
  --w-body: 400;
  --w-medium: 420;
  --w-strong: 520;
  --w-head: 500;
}

strong {
  font-weight: var(--w-strong);
}

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

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

До и после

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

Сначала тёмная тема, в которой я заметил проблему:

И тот же фрагмент в светлой:

Это реальные снимки локальных сборок в Chromium 158 под Linux: окно 1280 × 1500 CSS-пикселей, масштаб 100 %, плотность 2 пикселя изображения на CSS-пиксель. Перед съёмкой дождались загрузки шрифтов и проверили применённые веса через getComputedStyle. Фрагменты вырезаны из снимков без изменения масштаба; добавлены только подписи.

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

Скриншоты лучше открывать в полном размере: при уменьшении тонкие различия теряются. Они показывают результат в одной среде, а не то, как буквы обязательно будут выглядеть на любом устройстве.

На чём остановился

В новом варианте выделения для меня меньше перетягивают внимание с обычного текста. Разница между темами осталась, но теперь это осознанная настройка: в тёмной теме сильное выделение имеет вес 520, в светлой — 600.

Из этого опыта я бы не выводил правило «в тёмной теме шрифт всегда нужно делать тоньше». Для другого шрифта и другого сочетания цветов подходящие значения могут быть другими. Да и читатель может предпочесть более насыщенный текст.

Для своего сайта оставил этот вариант. Одинаковые числа в CSS оказались менее важны, чем то, как выглядит страница при переключении темы.

Примечание. Статья написана gpt-6.1-sol по результатам работы на сервере.