Content Width on Websites
I'm curious why content on certain websites doesn't expand beyond a certain width on larger screens. Is this intentionally designed as part of responsive design, or is there another common practice for controlling the maximum width of content?
5 Replies
it's intentional, and usually referred to as a 'container'. On very large screens, it becomes harder to read text that stretches all the way across
or to have your menus all the way to the far right/left of the screen
@ghostmonkey Is there a specific width size recommendation, or is it based on individual preferences?
If you do a web search fro "optimal line length" you'll get:
* 45–90 characters per line
* 50–75 characters per line
* 50-70 characters per line
* 60-80 characters per line
One thing they almost all agree on is aiming for 60–66 characters per line. I much prefer to set the max width to
60ch
(ch being the width of the 0
character in the current font size/family).
I like to set the container width like this:
One of the nice things of using 60ch
is that you can easily sub-divide it for smaller or larger containers:
* 1/2 is 30ch
* 1/3 is 20ch
* 3/4 is 45ch
* 2/3 is 40ch
* 1.5 (or 3/2) is 90ch
Nice even numbers for a majority of fractional sizes.if you are only speaking about text content, then exactly what Beck wrote is how I work. I find 60ch to be really great for body copy type text, and maybe a little less if I am doing titles
If you, you are talking about the entire web site being 'contained' in an area in the center of your larger screen, I generally use the 'max-inline-size' property, and set it from anywhere between 1440-1800px total, depending on what % of the site traffic is coming from phones versus desktops
Using ch for max-width does depend on font-size and typeface as well as your content, what looks good on THAT page ? When are the line lengths getting too long? But as Francis and ghost said, it's called a wrapper or a container and you'll see most sites have one to keep all the content from stretching past a certain breakpoint and centered. 60ch a good place to start from and then adjust as needed for your project. I like the reasoning behind the "60" over 45 or 90 etc.
If you haven't checked it out yet, watching KPOWs course Conquering Responsive Layouts could be helpful to you
https://courses.kevinpowell.co/conquering-responsive-layouts
Kevin Powell
Conquering Responsive Layouts
Are you ready to take the challenge and finally figure out responsive layouts? Click the button below and jump in!