The last time I stumbled upon website that used vh for font sizes I was forced to enter into the developer tools and edit that out from CSS because: 1. it didn't work well with my vertical monitor setup, letters were ridiculously large; 2. I was not been able to compensate for that with standard page zoom because it's vh, it's roughly relative to the window size, and all that zoom changed is sizes of secondary page elements.
It's bad enough on desktops, now I feel it would be a nightmare on mobile even with desktop mode turned on...
I think the page is using `vw` as an example, and I don't see it using `vh` anywhere. Most of the sites following this approach would use something like `em` units. `vw` is just a really obvious example of what the article is talking about.
Having said that, expanding quickly on why `vh` should be avoided for font sizes:
The problem with using `vh` is that it's exploiting that most desktop devices have monitors of a roughly similar aspect ratio. But that's a coincidence, not a law. So it's not really thinking about responsive design. Using `vw` is more correct because the size of a character is almost always dependent on how many characters you want to fit on a single line, and (in English) characters are read horizontally, not vertically.
Even better is using `em` and `rem` and inverting the way you think about widths -- base your column width on the number of characters you want to display in that column. In general on the web you don't want to say things like "I have 2 columns that are 50% of the screen and each has 40 characters in it." You want to instead say "I have two 40 character-long columns that might be next to each other or might be stacked, and they might take 50% of the screen or they might take less than that depending on what the user's font-size is."
It is (not always, but often) a mistake to start with a container width and work your way backwards to a font size (particularly in a world with high-DPI screens that might seem like they're very wide when actually they're not). Usually you want to do the opposite.
But in either case, 99% of the time you probably don't want to be using `vh` because the height of a browser is conceptually unrelated to how many characters you would want to display in a line.
To what end? I think some mocked up demonstrations of what this would actually achieve would help cement this for me. Especially looking at the nonlinear functions. In what cases would increasing some variable and having the font size decrease as a result be a desirable trait?
Feel like this is a logical extension to responsive design. Wish the author had cited that line of work explicitly and described how this work builds on that.
