I continue my questioning of the usefulness of variable fonts. Not in any luddite view of the world, you understand, but figuring out how I can use them in my own work. A few questions continually on my mind are: ‘why would I deviate from the instances defined by the type designer?’, and ‘if I’m only using a couple of weights, is the extra file-size cost of a variable font worth it over one or two more requests to the server’. The ebb and flow of trade-offs for using variable fonts in digital products.

This week, my mind has been firmly focussed on what I consider the most useful of variable axes for type setting – particularly in a digital context – Optical Size.

As you might know, in some type families, some glyphs look dramatically different depending on if they are intended to be used for captions or folios at one end of the spectrum, and display or ‘poster’ weights on the other. This is the optical size. Is the intended usage small or large.

For a more detailed view of optical sizing, this is a good book from Just Another Foundry.

So, big or small, right? No, it’s not as straight forward as that. Particularly when you consider digital products being presented in the plethora of devices and environments. Throw into the mix dark mode. Legacy devices with poor screen resolution (yes, they still exist!). And single type families for entire brands, suites of products, and all potential environments (print, physical, digital). All of a sudden, being able to tweak optical size becomes a very powerful tool.

For a quick look at what the difference can be, have a look at this type-tester for Acta Var from DS Type. (Third typeface down). Acta is a high-contrast serif typeface. This is a problem at small size. Why? The subtleties of these serifs are not visible. The high contrast – thin strokes – render poorly at small size, especially on low resolution devices. To be readable, there needs to be less difference in relative thickness, and the serifs need to be less visible.

Let’s consider one example I looked at this week: typesetting for dark mode.

Most type considerations for dark mode are exclusively colour. Changing the foreground and background on a toggle or by the user’s OS preferences. But, it shouldn’t stop there. Typographic considerations for dark mode should extend to line height and spacing, font weight, and finally, optical size.

Light type on a dark background on a digital screen is optically higher contrast. Despite often conflicting typographic ‘rules’, I’ve found the following considerations useful when defining dark mode styles all with a view of smoothing out those contrast issues:

  • Slightly increase the typeface weight. This is why variable fonts are useful. We can tweak this, rather than have to use instances where the differences are too great between weights.
  • Slightly increase spacing. Only a touch. More space above and below elements. Let the line height breathe a little.
  • And, finally, optical size. For dark mode, I tend to decrease it across the board. Thereby slightly reducing glyph contrast.

And now, a caveat. This tends to be highly subjective, dependent on the typeface you’re using, and how comfortable you are at doing those things. Try to look at it like this: like a chef developing their palette, this is a designer developing their typographic sense. It requires practice. And heavy reliance on that question: 'does this feel right? Give it a try!