Dark mode and variable fonts

We've discussed dark mode in CSS before, and I've been thinking about a problem: white text is usually less readable on a black background than black text on a white background. After some thought, I realized that we can solve this problem by utilizing variable fonts to reduce text weight in dark mode!

The following example shows this problem, I used the Yanone Kaffeesatz font from Google Fonts. Note that the portion of the white text on a black background looks thicker than the portion of the black text on a white background.

Strangely, these two paragraphs of text actually use the same font weight value of 400. But in my opinion, the white text looks particularly thick and black on a black background.

Take a closer look at this example. This is how white text displays on a darker background; this is how our eyes perceive shapes and colors. In some cases, this may not be a big problem, but reading light text on dark backgrounds is always more difficult. If we don't pay attention when designing dark mode text, we may feel the text vibrating when reading.

How can we solve this problem?

This is where variable fonts come into play! We can use lighter font thickness to make text easier to read when dark mode is enabled:

 <code>body { font-weight: 400; } @media (prefers-color-scheme: dark) { body { font-weight: 350; } }</code>

Here is the effect of using this new example:

Much better! In my opinion, these two variants now seem to be much more balanced.

Again, it's just a small difference, but all great designs include such fine tuning. I think if you are already using variable fonts and loading all of these thicknesses, you should definitely adjust the text to make it easier to read.

This effect is easier to spot if we compare the differences between longer text segments. This time we use Literata fonts:

Note that the text on the right feels thicker, but that is not the case. This is just a visual illusion - the font thickness of the above two examples is 500.

So, to solve this problem, we can do the same as the example above:

 <code>body { font-weight: 500; } @media (prefers-color-scheme: dark) { body { font-weight: 400; } }</code>

Again, this is a subtle change, but it is important because at these sizes, every typography improvement we make contribute to the reading experience.

There is also a small Google Fonts prompt!

Google Fonts allows you to pass through the document Partially added<code><link> Tags to add fonts to your website as follows:

 <code><link href="https://fonts.googleapis.com/css2?family=Rosario:wght@515&display=swap" rel="stylesheet"></code>

This uses the Rosario font and adds the font thickness of 515 - this is wght@515 part of the code above. Even if this happens to be a variable font, only this font thickness will be downloaded. But if we try to do this...

 <code>body { font-weight: 400; }</code>

...Nothing will happen! In fact, the font doesn't load at all. Instead, we need to declare the range of font thickness values ​​we want, as follows:

 <code><link href="https://fonts.googleapis.com/css2?family=Yanone%20Kaffeesatz:wght@300..500&display=swap" rel="stylesheet"></code>

The @300..500 section in the above code tells Google Fonts to download font files with all thicknesses between 300 and 500. Alternatively, adding a semicolon between each thickness will only download 300 and 500 thicknesses – so, for example, you cannot select a 301 thickness:

 <code><link href="https://fonts.googleapis.com/css2?family=Yanone%20Kaffeesatz:wght@300;500&display=swap" rel="stylesheet"></code>

It took me a few minutes to figure out what went wrong and why the fonts weren't loading at all, so hopefully the Google Fonts team will make the embed code a little clearer in the future. Maybe an option or toggle switch should be added somewhere to select range or specific weight (or maybe I just didn't see it).

Anyway, I think that's why mutable fonts are so useful; they allow us to adjust the text in ways we've never been able to do it before. So, long live the variable font!

The above is the detailed content of Dark mode and variable fonts. For more information, please follow other related articles on the PHP Chinese website!