Dark Mode and Variable Fonts

Robin Rendle writing for CSS-Tricks, on leveraging Variable Fonts when implementing a Dark Mode:

Oddly enough, these two bits of text [shown above] are actually using the same font-weight value of 400. But to my eye, the white text looks extra bold on a black background.

How do we fix this?

Well, this is where variable fonts come in! We can use a lighter font weight to make the text easier to read whenever dark mode is active

Like so:

body {
  font-weight: 400;
}

@media (prefers-color-scheme: dark) {
  body {
    font-weight: 350;
  }
}

Sidenote: 😍 Yanone Kaffeesatz — Back in 2005 we used this as the company font for the company I then worked at. Liked it from the moment I first saw it.

~

Depending on the design, there’s more you can do to adjust for dark mode with variable fonts besides adjusting weight. The Louvette font for example has an explicit passage on this:

With the Louvette variable fonts you can adjust the hairline axis (yopq) independently. The is particularly useful if you have light text on a dark background and need to thicken the hairlines to avoid ink from filling in, or on screen for “dark mode” settings.

~

Dark Mode and Variable Fonts →

💡 Besides tweaking colors and fonts, you might also want to tweak your images and even your favicon for Dark Mode display.

A Variable Fonts Primer

Now that Google Fonts has some Variable Fonts in their offering, this primer on Variable Fonts might come in handy:

Variable fonts let you add nuance and artistry to your web typography without bogging down your site. Now you can accomplish what used to require several files with a single file and some CSS!

The goal of this site is to show you how variable fonts tick. Discover how they can benefit user interface (UI) design, accessibility, and long-form reading, and how they push the boundaries of skillful typographic expression on the web.

A Variable Fonts Primer →

🚨 Do note that this site’s homepage is very CPU intensive. Chrome just starts pooping bricks because of the font constantly being animated.

How to use variable fonts in the real world

Richard Rutter (@clagnut):

Using variable fonts in the real world turns out to be tricky. This post explains how we achieved it for the new Ampersand website and what we learned along the way.

Always great to see how others went head first into a problem. Be sure to checkout the Ampersand website itself too, it’s lovely.

How to use variable fonts in the real world →

Related: What do Variable Fonts mean for Web Developers? will give you a good introduction about what they are. Read this one before reading Richard’s post.

What do Variable Fonts mean for Web Developers?

Variable Fonts are still in active development […] in this article I’ll focus on what they mean for web developers, and how you can try them out today ahead of time.

Next to changes to font-weight (which will allow increments of 1), you also have fine control over a variable font its variations – see image above. One can tweak ‘m via the upcoming font-variation-settings CSS Property:

p {
  font-variation-settings: 
    'cntr' 99.9998, 
    'grad' 176, 
    'opsz' 13.999, 
    'srfr' 34.998, 
    'wdth' 803.999, 
    'wght' 175.98, 
    'xhgt' 999.988;
}

As mentioned in the post, variable fonts in CSS will land in production no earlier than mid-2018. Nonetheless it’s worth following already.

What do Variable Fonts mean for Web Developers? →