Website looks disproportionally huge on widescreen monitors
Describe the bug On a 21:9 monitor in full screen website elements look gigantic, since font size seems to be scaling to take the full width of the monitor. At full screen it's so large, it barely fits anything vertically and requires a lot of scrolling
To Reproduce Steps to reproduce the behavior:
- Open https://rsms.me/inter/ on 21:9 monitor
Expected behavior Maybe a max-width worth a shot
Screenshots
Open them in full screen to see scale comparison.
Notice how tiny navbar looks:
Same fragment in a narrower window, looks much more reasonable (although I still would make the title smaller just a bit, but that's a matter of taste I suppose)
At full width, barely 3 styles fit on the screen
Narrow window comfortably fits 4 styles
This is just too much
Also this
Again, for reference, a narrower window
Table cells are gigantic. This part takes forever to scroll through
Compare with
FAQ just does not fit
Much better in a narrower screen
Environment
- OS: Windows 10
- App that renders the font: Firefox
- Version of font: N/A
Additional context Another unfortunate side effect of scaling font size with window width, is that resizing the window changes page height, and given how much font there is, it changes A LOT, which affects scroll position. It gets worse, the further down the page you go