Hacker News Reader

Comment by _greim_ | Hacker News Reader

This is probably not for every website, but an interesting trick is to set your root element font size to 1vw, which is 1% the width of the viewport.

Then size everything using rems, including the width of your layout. The whole design scales with the width of your browser.

View on HN

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))";

to solve problem you describe?

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.

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.

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)

Reply on news.ycombinator.com