Variable Fonts, Grade, and CSS. And Reality.

date: ; langs: en, cs

As a proper naive ignorant in typography, I simply used some attractive font with a reasonable license, specifically Quicksand by Andrew Paglinawan (GitHubu, Google Fonts). It’s fine, this will work, I told myself. But then problems came and it was necessary to get my hands dirty with typography, or probably digital ink. And I killed several evenings with it.

The idea was such that the menu options would be horizontally next to each other and the selected section would be highlighted in bold. This is trivial, BUT classic bold font naturally enlarges the container it’s in. So, everything to the right of the container shifts. It might be insignificant, but when you’re as detail-oriented as I am… well, let’s not go there.

The problem can be solved in several ways, and all of them are pretty much a loss. And all are described here on stackoverflow. In short:

  1. Somehow emulate the bold font with shadow. Which looks terrible, especially on Apple devices. No, thanks.
  2. Using the CSS :after and content trick to create an invisible, bold substitute that dictates size. However, this can result in distances looking broken on some devices because they don’t respect the bold vs normal differences. And at the same time, some browsers may re-render the page due to these tricks, leading to flickering (this definitely happens in Firefox). No, thanks.
  3. Use a different font that is variable. This is a novelty of the previous decade, which allows having all possible thicknesses in one file. And lo and behold, Quicksand is also variable. BUT it does not support grade. This is an optional feature of variable fonts, which thickens the font without needing to change the width of the letters themselves. HOWEVER, there are not many variable fonts, and even fewer with grade.
  4. Go the uniwidth route, which is a few fonts from one family that have different thicknesses but the same letter size. BUT there are also few of them!

If nothing has changed, you won’t find the Quicksand font here in the end. I lost with it. I ended up going with option 4, specifically with a different font, Recursive, from ArrowType studio (GitHub, Google Fonts). Well, at least the normal text reads better.