So if you have one of those ridiculous ultrawide monitors, the text is very large, or if you have a vertically-mounted monitor, are using a smartphone held vertically, or just prefer to make your browser windows narrow, the text becomes very small?
That sure is an interesting trick, all right.
Can we use something like
font-size: "calc(min(1vw, 1vh))";
In fact there’s a `vmin` unit that does this calculation for you. (`vmax` as well)
> `vmax` as well
Or even dvmax in this day and age.
This might solve a few of the edge cases, but making the sizes of everything depend on your screen is a dumb idea. If I move my browser from my small laptop screen to my big external display, I expect to see more content, not larger fonts. My displays are set to scaling factors that are comfortable for me with most things I work with (HN’s tiny fonts being a notable exception). Just set a reasonable size for things (a base font size of 1rem should be fine) and let me use my displays to the fullest.
Ironically this is the least accessible solution because it doesn’t let the user change the font size at all (not that it’s particularly common in this day and age, due to full-page zooming being the default since at least 2010)
Then size everything using rems, including the width of your layout. The whole design scales with the width of your browser.