От автора: не так давно мы писали о темном режиме в CSS, и я думал о том, что белый текст на черном фоне всегда труднее читать, чем черный текст на белом. Подумав немного об этом, я понял, что мы можем решить эту проблему, сделав текст в темном режиме тоньше, используя переменные шрифты!.
Вот пример проблемы, где я использую шрифт Yanone Kaffeesatz от Google Fonts. Обратите внимание, что белый текст на черном фоне выглядит толще, чем черный на белом.
Как ни странно, эти два фрагмента текста на самом деле используют одно и то же значение font-weight — 400. Но, на мой взгляд, белый текст выглядит очень жирным на черном фоне.
Посмотрите на этот пример некоторое время. Так выглядит белый текст на темном фоне; это то, как наши глаза воспринимают форму и цвет. И в некоторых случаях это может не быть большой проблемой, но чтение светлого текста на темном фоне всегда намного труднее. И если мы не берем на себя заботу о проектировании текста в контексте темного режима, тогда может показаться, что текст вибрирует, когда мы читаем его.
Как нам это исправить?
Ну, здесь на помощь приходят переменные шрифты! Мы можем использовать меньшую толщину шрифта, чтобы сделать текст более легким для чтения, когда активен темный режим:
body { font-weight: 400;
} @media (prefers-color-scheme: dark) { body { font-weight: 350; }
}Вот как это выглядит в этом новом примере:
Это лучше! Два варианта теперь выглядят намного более сбалансированными.
Опять же, это только небольшая разница, но все великолепные дизайны состоят из таких микро настроек. И я считаю, что если вы уже используете переменные шрифты и загружаете все эти толщины, то вам определенно следует откорректировать текст, чтобы его было легче читать.
Этот эффект легче заметить, если сравнить различия между длинными абзацами текста. Например так, на этот раз пример из Literata:
Обратите внимание, что текст справа выглядит толще, но это не так. Это просто оптический эффект — толщина обоих шрифтов — 500. Поэтому, чтобы исправить эту проблему, мы можем сделать то же самое, что и в примере выше:
body { font-weight: 500;
} @media (prefers-color-scheme: dark) { body { font-weight: 400; }
}Опять же, это небольшое изменение, но это важно, потому что при таких размерах каждое типографское улучшение, которое мы делаем, помогает восприятию при чтении.
А вот простой совет по Google fonts!
Google Fonts позволяет добавить шрифт на ваш сайт, добавив <link> в head документа, например так:
<head> <link href="https://fonts.googleapis.com/css2?family=Rosario:wght@515&display=swap" rel="stylesheet"> </head>
При этом используется шрифт Rosario и добавляется толщина шрифта 515 — в этом фрагменте кода указано wght@515. Даже если это задано для переменного шрифта, будет загружена только эта толщина шрифта. Хотя если мы попытаемся сделать что-то подобное…
body { font-weight: 400;
}…ничего не произойдет! На самом деле, шрифт вообще не загружается. Вместо этого нам нужно объявить, какой диапазон значений font-weight нам нужен:
<link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:[email protected]&display=swap" rel="stylesheet">
Этот фрагмент @300..500 в приведенном выше указывает говорит Google Fonts загрузить файл шрифтов со всеми толщинами от 300 до 500. В качестве альтернативы, если мы добавим между каждой толщиной «;», то будут загружаться толщины только 300 и 500 — например, вы не можете выбрать толщину 301:
<link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@300;500&display=swap" rel="stylesheet">
Мне потребовалось несколько минут, чтобы выяснить, что происходит не так и почему шрифт вообще не загружается, поэтому, надеюсь, команда Google Fonts сможет сделать это немного понятнее в будущем. Возможно, где-то должна быть опция или переключатель, чтобы выбрать диапазон или конкретные толщины (или, может быть, я просто не видел его).
В любом случае, я думаю, что все это объясняет, почему переменные шрифты могут быть так чертовски полезны; они позволяют нам корректировать текст так, как мы никогда раньше не могли. Итак, да здравствуют переменные шрифты!
Автор: Robin Rendle
Источник: https://css-tricks.com
Редакция: Команда webformyself.