On: CSS Tip: An em isn't an "m", but an ex is an "x" (...

[GrantMoyer]

It's because all the font sizes in the page are relative to:

   html {font-size: calc(0.5vw + 1rem)}

In other words, the (user configurable) browser default size plus 0.5% of the viewport width, which is kind of insane. One (intended?) side effect is that the font size grows and shrinks as you resize the browser window horizontally.

[velcrovan → GrantMoyer]

There's a better way to do this:

    html { font-size: clamp(16px, 2vw, 20px); }

Pick a reasonable minimum and maximum, and between them a calculated value that scales with viewport width. (You can see this in action in the sites in my bio.)

[cantSpellSober → GrantMoyer]

Yes, viewport units (like vw) don't always respect user settings, such as zoom levels or custom font sizes.

It seems like a good idea at first (larger viewport? larger text!) but not a recommended practice.