The Best Web Page Width (Hint: It’s not what you think!)
When it comes to web page width, you might think bigger is better. As screen sizes are increasing (I’m an ultrawide monitor girly) you’d assume that website dimensions should also be getting larger. But that’s actually not the case. I'm here to argue why 1440px is the best web page width, and share some other design dimensions to keep in mind.
Your website platform (eg. Wordpress, Squarespace, Webflow) might have a fixed width, a maximum width, and/or a minimum width for desktop. For the context of this article, I’m referring to the maximum width.
Why Web Page Width Even Matters
Back in the day, web designers had to create multiple different versions of a website for different screen sizes. It was as ridiculous as it sounds. But thanks to advances in code, we now have responsive design, meaning that images, text and their containers can change size to suit the device.
Still, this can only compensate so far for huge (or tiny!) screen sizes. There becomes a point where we need to say “Okay! Enough is enough. Please don’t stretch any further.”
The Problem with Larger Dimensions
Going super wide might seem like a great idea, but it can cause headaches. Yes, your website might look incredible on a large screen with a large web page width (we’re talking 2000px here) but what happens when you get a visitor on a 13” laptop?
Everything gets super squished and tall. Not ideal.
In fact, recent desktop resolution stats indicate that the vast majority of people are working from an average-sized monitor or a laptop.
Desktop Screen Resolution Stats
These statistics are from June 2024 and showcase the percentage of desktop users on the 6 most popular screen sizes. There’s clearly a global trend towards what I would call mid-sized devices.
1920x1080: 23.39%
1366x768: 13.01%
1536x864: 11.82%
1280x720: 6.75%
1440x900: 4.39%
1600x900: 2.82%
(Arguably) The Best Web Page Width
While there’s no one size fits all answer, most designers agree on a range that hits the sweet spot between looks and functionality, between 1080px and 1440px.
I like to go on the higher end and set my maximum web page width to 1440px, as this allows my content to breathe on larger devices, and only adapt a small amount for the smaller ones.
For the site margin, I prefer to set it at 6vw because the auto layout sections have this margin on mobile by default. This means everything will line up nicely on mobile without the need for code!
An example of a 1440px max web page width on two different screen sizes
The measurement VW means “viewport width” and is an example of responsive code. As the device width decreases (think laptop vs mobile) the margin will decrease. This helps us avoid HUGE margins on mobile devices!
How to Adjust the Web Page Width on Squarespace
If you’re on Squarespace, here’s how you can adjust your maximum web page width and the site margin based on my recommendations:
In the Home Menu, click Website > Styles.
Go to Accessories > Spacing.
Drag the Page Width (Max) to 1440px.
Drag the Site Margin to 6vw.
Scared of making big changes to your website? Here’s how to create a backup of your Squarespace website before completing this step.
Design for Readability
There’s also a few other website best practices I’d like to share that are likely to be dictated by your web page width:
Font Size: Make sure the font size is large enough to be read comfortably on all devices. Typically, 16px is a good starting point for body text.
Line Height: Ideally, you’ll want the line height to be set to 1.5 times the font size to give text room to breathe.
Line Width: Try to maintain a line width that prevents text from being too long. Around 12-17 words per line is optimal.
In conclusion, I believe that setting the web page width correctly is the foundation of a well-designed website. From there you can fine tune the sizing of other elements on your website to provide the best possible browsing experience for your visitors!
