В предыдущей статье я подробно разобрал проблемы связанные со шрифтами для темной темы и причины их актуальности. В данном материале смотрим на то, какие есть решения и что предлагает индустрия. + figma файл с адаптированным мной под темную тему стандартным текстовым набором стилей Material Design для Roboto.
![](https://habrastorage.org/getpro/habr/upload_files/ae5/f28/92a/ae5f2892a56dad55bd9a834f44521d3f.jpg)
Material Design 3
Первое, что делаем открываем документацию Material Design 3 раздел Typography. В нем есть одно упоминание о эффекте визуального восприятия при инфертиции цвета и рекомендация.
При переключении между темной и светлой темой один и тот же текст может казаться тяжелее, несмотря на одинаковые настройки. Использовать “negative grade” (меньшие значения Grade), чтобы скорректировать это.
![](https://habrastorage.org/getpro/habr/upload_files/27d/645/5de/27d6455de228113361750d96c55062d0.jpeg)
Grade и Weight
В базе знаний Google Fonts, на странице с ликбезом, нам более подробно разъясняют природу этого эффекта — “halation” — ореола, который создает белый контур букв из за рассеивания света. Нам напоминают о сложной анатомии шрифтов, связанной с биологической особенностью восприятия и “legibility” — «читабельностью». А также ссылаются на исследования и рекомендации описывающие данную проблему в организации дорожных знаков.
![](https://habrastorage.org/getpro/habr/upload_files/47a/e87/323/47ae87323fd5e9000dcf84654620a163.png)
Grade и Weight
В качестве рекомендаций Material design предлагает уменьшать параметры “Grade” или “Weight” для соблюдения визуального баланса.
![](https://habrastorage.org/getpro/habr/upload_files/b7e/83b/f06/b7e83bf06f0795dcb6432dcc94ec3885.jpeg)
Слева начертание шрифта Lato — Regular или 400, справа — Semibold или 500.
Параметру weight кратному 100 соответствует свое начертание из шрифтовой гарнитуры. По доброй традиции, начертания разрабатываются дизайнером-шрифтовом вручную. Опять же, для соблюдения характера шрифта и его «разборчивости. Все параметры подгоняются вручную с учетом визуального восприятия. Как следствие у каждого начертания ширина литеры будет отличаться.
Уменьшение параметра weight при инверсии цветов — самое близкое к идеальному решению, но вместе с ним меняется и кернинг — межбуквенное расстояние, что также сказывается на эффекте Ореола но уже в межбуквеном пространстве.
Чтобы избежать этого, google рекомендует регулировать параметр Grade, в котором ширина литер не изменяется. Но есть два «Но». Grade — параметр присущий так называемым “variable fonts”. И второе — он ведет себя как Stroke у линий, те в одинаковых пропорциях изменяет толщину контура относительно условного центра. Изменение данного параметра будет влиять на характер шрифта, и результат может получится далеким от задумки шрифтового-дизайнера.
![](https://habrastorage.org/getpro/habr/upload_files/1be/87c/a30/1be87ca30b1bddd7c55828e331098178.jpeg)
Уменьшение параметров Grade и Weight решает проблему пересвета и выравнивает оптический вес в толщине линий и размере «просветов», однако, проблема с тонкими местами, где светимости не хватает останется.
![](https://habrastorage.org/getpro/habr/upload_files/f02/2b9/f4e/f022b9f4e5211de5481ef92e92af6c8d.jpeg)
Roboto flex
Вариативные шрифты имеют разных набор динамических параметров. Помимо общих Grade и width, такой шрифт как Roboto flex имеет довольно большой набор настраиваемых параметров. Посмотреть можно в Google Fonts.
![](https://habrastorage.org/getpro/habr/upload_files/52f/b80/321/52fb80321aab083031ccaaad43be7190.png)
Но данная вариативность сказывается на базовых параметрах шрифта. Поэтому Roboto Regular не выглядит также как Roboto Flex regular.
![](https://habrastorage.org/getpro/habr/upload_files/e2a/77d/763/e2a77d763be460570e38231b4a8a478a.jpeg)
Рекомендации
Если вы используете не вариативный шрифт, выставляйте параметр width на 100 меньше и увеличивайте кернинг — letter spacing.
В вариативных шрифтах таких как Roboto и Montserrat также меняем начертание, те Width, а не Grade. Во первых: не все вариативные шрифты поддерживают Grade, во-вторых теряется характер шрифта. Меняем параметр width примерно в половину. Для Regular на разных кеглях это 340-360. И подбираем соответствующий кернинг для сохранения длинных строки и красивых межбуквенных отступов, близких к задумке дизайнера.
Для каждого начертания кернинг стоит подбирать отдельно, в диапазоне от Regular до Black это значение меняется от 0,3% до 0,5%.
Параметры letter spacing подбираем как художник — прицеливаемся на Zoom, делаем 100% отодвигается от экрана на обычное расстояние и смотрим как получилось.
P.S.
Попрактиковаться взял стандартные текстовые стили из Material Design для Roboto. Все выверить, присмотреться и еще раз скорректировать — ушли сутки. Работа монотонная, поэтому для тех, кто разрабатывает темную тему, Figma файлик по ссылке.
![](https://habrastorage.org/getpro/habr/upload_files/8f3/5ed/1ea/8f35ed1ea25af4f3aad34ae05b638f50.jpeg)