Best Width for Website?

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
    }

See: https://www.w3.org/TR/css-values-4/#ch

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.

Slightly off-topic, but a personal pet peeve of mine is ``. 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.

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

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.

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

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.

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

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.

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.