The original post: /r/web_design by /u/seanmacproductions on 2024-12-19 15:56:53.

I only sort of know what I’m doing here. I’m designing a website in Webstudio, and am asking for advice more on theory than actual code. I understand the principles of designing for smaller screens - make it readable, use breakpoints.

But what about when designing for bigger screens? Should I make my elements and font size a fixed size, or should they all scale with the viewport width? I made a quick example of both - one that is responsive (Example A) and one that is fixed (Example B).

While the font size of Example B looks suuuuuper tiny on large screens, should I assume that those with larger screen resolutions will also have monitors that are physically larger than my 25" 1440p display, and therefore will be able to read that tiny font? And should I assume they’ll have some sort of DPI setting cranked up, making it bigger anyway?

Or should I assume that tiny fonts will look tiny on bigger displays, and scale all of my elements proportionally with the width, as in Example A? I understand responsive design is paramount when it comes to modern web design, so I’d love to learn what the best practice is here. Thanks!