Ask HN: Best Width for Website?
I see a lot of people recommending something like 80 char width max. Or even lower. However, since each person is able to set the width of the browser, does this really apply to the browser? I mean, I have an 1080p 27" monitor, and I am fairly happy reading something like 90% width of that. No need to go all the way down to max. of 80 chars. Also, I think it looks horrible when the browser is full width on the monitor, yet a website forces the max-width to something like 940px. What is your personal preference on this?
30 comments
For what it's worth, there's a "ch" size unit in CSS that helps here that takes the font size into account e.g.
.wrap {
max-width: 60ch; // Maximum 60 characters per line
}
A line of text should be about 60–90 characters long. Higher than that, and a lot of people will have trouble keeping track of which line they're on. However, that's only the width of the body text. If you have sidebars or figures or such, those can take up more horizontal space as needed.
It's true that a user can set the width of their browser to make your text flow to an acceptable width. However, most browser windows contain multiple tabs, and it's annoying to switch between a bunch of tabs that each require the window to be resized for an optimal experience.
It's true that a user can set the width of their browser to make your text flow to an acceptable width. However, most browser windows contain multiple tabs, and it's annoying to switch between a bunch of tabs that each require the window to be resized for an optimal experience.
Slightly off-topic, but a personal pet peeve of mine is `<meta name="viewport" content="user-scalable=no" />`. My vision isn't as great as it used to be and not being able to zoom is awful. I usually just keep my browser around 80% the size of my screen and zoom the text on a per-site basis for comfort, although I can see this varying a lot based on a person's exact setup (screen size, distance, etc). Apparently I browse HN at 210% zoom.
It is the recommended solution to the annoying horizontal scrollbar for scrolling a few pixels.
WCAG 2.0 recommends a max of 80 chars, https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-cont...
I just want it to look good when I have the window set to half a screen wide at 1080p. There are some websites that'll switch to a mobile design when it's that narrow, and it's incredibly annoying.
I used to design with full-width being 1920 (background, hero images, even video if included) - then keep data-like stuff contained around 1280. I generally try to make paragraphs smaller - depending on body font size - maybe .contained > p {max width 720px
or something - but that is when trying to more keep an overall look like someone had in mind.. I think using the 'ch' for paragraphs may be better for most situations.
It would be cool to space paragraphs and similar content into flex-boxes so they could fill up a row if it was wide enough.
While I appreciate efficient stuff like that, it seems some clients are hell bent on having this design for them look exactly like the design of place X they are jealous of - so doing things like that doesn't always make the cut.
One recent client was viewing on a hi res mac screen - and I had not checked that one of the full-width hero images which was full width on my monitor was not large enough to go full width on hers.. not because the css was not right, but the actual image was not big enough (was 1920 px and not 2550 or whatever)
so there's that as well.
I thought the general hand wavy thoughts on browser sizing was that the average web browser user was supposed to be expected to ctrl+scroll-wheel to increase their view, and that we were supposed to respect whatever browser defaults they had for text and what not.. but real world is not what web-standards people want it to be often times. I'm not sure more than 10% know to increase zoom with laptop/desktop screens.
Also recently found that startpage searching for sites to show pics of what demo site looks like at 1920 wide, 2550 wide, etc.. the top 20 options are not so great right now.
would love real world info on how many visitors ctrl+scroll or otherwise View - zoom in or what not.
my 2 cents for early 22
It would be cool to space paragraphs and similar content into flex-boxes so they could fill up a row if it was wide enough.
While I appreciate efficient stuff like that, it seems some clients are hell bent on having this design for them look exactly like the design of place X they are jealous of - so doing things like that doesn't always make the cut.
One recent client was viewing on a hi res mac screen - and I had not checked that one of the full-width hero images which was full width on my monitor was not large enough to go full width on hers.. not because the css was not right, but the actual image was not big enough (was 1920 px and not 2550 or whatever)
so there's that as well.
I thought the general hand wavy thoughts on browser sizing was that the average web browser user was supposed to be expected to ctrl+scroll-wheel to increase their view, and that we were supposed to respect whatever browser defaults they had for text and what not.. but real world is not what web-standards people want it to be often times. I'm not sure more than 10% know to increase zoom with laptop/desktop screens.
Also recently found that startpage searching for sites to show pics of what demo site looks like at 1920 wide, 2550 wide, etc.. the top 20 options are not so great right now.
would love real world info on how many visitors ctrl+scroll or otherwise View - zoom in or what not.
my 2 cents for early 22
I generally prefer paragraphs to be around 35-40rem max-width so they are more readable on larger screens and still wrap nicely on smaller screens.
What are some solutions for body text containers at full width?
On large screens, body text at the default 16px / 1rem size is too long if the container conforms to 1200px or even 1920px width.
Some designs break the body text into columns, or present it in a single column in a narrower container (60-80ch).
Any other options you’ve found useful?
On large screens, body text at the default 16px / 1rem size is too long if the container conforms to 1200px or even 1920px width.
Some designs break the body text into columns, or present it in a single column in a narrower container (60-80ch).
Any other options you’ve found useful?
I agree, too many words per line is harder to read. A paragraph width should have a set upper limit.
FYI the roots of this approach come from traditional typography, which obviously predates the web. IME the web stuff more or less copies the standards established in typesetting or ends up just reinventing it. You could easily spend a career studying and learning it. I find it best to use a CSS framework like TailwindCSS where there are built in classes for dealing with it.
https://en.wikipedia.org/wiki/Column_(typography) https://tailwindcss.com/docs/typography-plugin
https://en.wikipedia.org/wiki/Column_(typography) https://tailwindcss.com/docs/typography-plugin
While there is an optimal text line width range, I do not enforce it with the 'ch'.
Visually challenged users might use bigger font sizes — and a line would get too wide for convenient reading. There are some other issues with this approach.
I personally just keep an eye on what the top text-centric sites are doing. The logic being that NYT, Substack, Medium, etc have much more resources than me to research the subject. I just keep a list of about 10 sites and check their readability progress 2-3 times a year.
Visually challenged users might use bigger font sizes — and a line would get too wide for convenient reading. There are some other issues with this approach.
I personally just keep an eye on what the top text-centric sites are doing. The logic being that NYT, Substack, Medium, etc have much more resources than me to research the subject. I just keep a list of about 10 sites and check their readability progress 2-3 times a year.
I recently built a forum [0], and I noodled on site width for awhile. I decided to allow the user to pick any width they want between 500-1000 pixels, or they can pick full width. You can actually try it here without logging in:
https://www.peachesnstink.com/settings
I think it works nicely. I believe the default is 600.
[0] https://www.peachesnstink.com
https://www.peachesnstink.com/settings
I think it works nicely. I believe the default is 600.
[0] https://www.peachesnstink.com
It depends on what the remaining space is used for. If you have some hidden menu which can be expanded into a sidebar, some vertically stacked content which can be moved to the side etc. then restricting the main text to around 80 chars is great. But I would always prefer an extremely long text line over just seeing the background color in 70% of my screen. If the line gets too long to be read comfortably then the user can just resize the window.
Just have in mind that longer paragraphs of text (in english) are more readable if the width of the text is 60-70 characters. But if your web-site is done by the book, a browser can detect longer texts and will allow the visitors to switch to reader mode and read the text in a format that is best for them.
Lately: max-width: 1200px; width: 100%;
whatever the size of the users screen is; no questions asked, close the thread.
That's kind of annoying on ultrawide screens.
Why is that? Don't you simply adjust the width of the browser itself?
Some websites work on a wide window and make good use of the space, but then you switch tabs and suddenly you get a site that's where each line is like 800 characters and the site is two lines long.
it can be 1480, I thin think this is the Idal size of any kind of scree, and you can use for your website.
If you are developing a website, you should do mobile first because it’s very likely that most of your visitors will be on mobile.
Except, designers tend to create the PC version first to iterate over the intial design, so not sure how one goes to develop mobile first for this case.
Designers nowadays should do the mobile version first unless their visitors are an exception.
I can't really get that idea though. PC version is the main drawing board to express as much idea openly as possible for the intial design and the mobile version is just a compromise of the idea into a squashed view.
Mobile first is just a technical excuse and not the actual flow people like to do.
I don't think I can make a convincing argument to change designers mind to start out from mobile design.
Mobile first is just a technical excuse and not the actual flow people like to do.
I don't think I can make a convincing argument to change designers mind to start out from mobile design.
[deleted]
[deleted]
The idea of mobile first is to do the main drawing for mobile. The compromised version is the PC version where you scale up the design.
The main argument is that the majority of visitors are on mobile. You need to provide the best version for most of the visitors, and the compromised version for the others.
The main argument is that the majority of visitors are on mobile. You need to provide the best version for most of the visitors, and the compromised version for the others.
> The compromised version is the PC version where you scale up the design.
Not sure what this means. Compromised is when you have less space to cram information in.
> The main argument is that the majority of visitors are on mobile.
Is this about your site?
Not sure what this means. Compromised is when you have less space to cram information in.
> The main argument is that the majority of visitors are on mobile.
Is this about your site?