Romaric Pascal avatar Romaric Pascal

Adjust font size with CSS custom properties

Screenshot of “Adjust font size with CSS custom properties”

I do love beautiful Web fonts, even if there are none on this site currently, so I plan to add at least one soon. I might use this nice solution.

The aim is to make the loaded font match the fallback font's height. So until that final font is loaded, we don't want to be scaling anything (either through font-size-adjust or custom properties). Before we get to the CSS, let's take care of that by loading the fonts using JavaScript and set a class on the element when they're done.

  1. screenshot of Why We're Breaking Up with CSS-in-JS

    Sam Magura

    Why We're Breaking Up with CSS-in-JS

    Thanks for reading this deep dive into runtime CSS-in-JS. Like any technology, it has its pros and cons. Ultimately, it's up to you as a developer to evaluate these pros and cons and then make an informed decision about whether the technology is right for your use case. For us at Spot, the runtime performance cost of Emotion far outweighed the DX benefits, especially when you consider that the alternative of Sass Modules + utility classes still has a good DX while providing vastly superior performance.