[notepad0x90]

I'm not a web developer, so if someone can please enlighten me: Why does this site, and so many "modern" sites like it have it so that the actual content of the site takes up only 20% of my screen?

My browser window is 2560x1487. 80% of the screen is blank. I have to zoom in 170% to read the content. With older blogs, I don't have this issue, it just works. Is it on purpose or it is it bad css? Given the title of the post, i think this is somewhat relevant.

[harrall]

You'll notice newspapers use columns and do not extend the text all the way left to right either. It's a typographical consideration, for both function and style.

From a functional standpoint: Having to scan your eyes left to right a far distance to read makes it more uncomfortable. Of course, you could debate this and I'm sure there are user preferences, but this is the idea behind limiting the content width.

From a stylistic standpoint: It just looks “bad” if text goes all the way from the left to right because the paragraph looks "too thin" like "not enough volume" and "too much whitespace." It’s about achieving a ratio of background to text that’s visually pleasurable. With really wide widths, paragraphs can end really early on the left, leaving their last lines really “naked” where you see all this whitespace inconsistently following some paragraphs. I can't really explain why this looks bad any further though. It’s kind of like picking colors combinations, the deciding factor isn't any rule: it's just "does it look pretty?"

In the case of the site in question, the content width is really small. However, if you notice, each paragraph has very few words so it may have been tightened up for style reasons. I would have made the same choice.

That said, if you have to zoom in 170% to read the content and everything else is not also tiny on your screen, it may be bad CSS.

[notepad0x90]

Newspapers have less than 5% margin for whitespace. they're smart enough to have multiple columns. It's also a side-effect of how every line costs money and they need to cramp as much content as possible in one page.

I get not having read all the way to the end and back, I even get having margins, but it should be relative to the screen size. Fixed width is the issue I think. To avoid paragraphs looking too thin, maybe increasing the font relative to the screen size makes sense? I'd think there is a way to specify a reference screen resolution to the browser so that it can auto increase the font sizes and/or adjust the div's width.

[wonger_]

For font size that increases with screen size, you can use some clamp() math, like:

  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);

Taken from https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25...

[harrall]

You're not wrong. Increasing font size is one method.

Another method I like to use is to adjust the amount of words per paragraph depending on the medium. I will literally write more or less just to attain my personal favorite of 3-6 visual lines per paragraph.

Or sometimes I will more readily join paragraphs or split them more often in a text just to achieve my target.

Decreasing width is actually just really easy and also works really well when the type of content can vary.

All of this seems like some serious overkill attention to detail I know, but I guess it's a big deal for some people. For example, most people don't really care about dressing nice regularly anymore when they get older and marry because it frankly doesn't matter anymore (and they're totally right), but people who like fashion still care up until the end.

[Menu_Overview]

Often times that is to create a comfortable reading width. (https://ux.stackexchange.com/questions/108801/what-is-the-be...)

[Telaneo]

This breaks so hard with my own preferences it hard to believe it to be true, and relevant studies aren't all that convincing. The few websites I find that go to 150/200+ character lines are a blessing to read when I do. I only get to do this on my desktop on very odd sites or completely unstyled HTML pages (and there you don't get line-spacing, which is something I do want. I should probably write a script to fix that), and Hacker News, and I never want that to go away.

This wouldn't be the first thing I'm just weird about. Similarly, I find reading justified text to be just horrible, as I constantly lose track of what line I'm on. This one I believe has been debunked and raised as a genuine accessibility concern, but not all parts of the world have gotten around to recognising that. I'm also not a fan of serifed fonts, even in books. I'm not sure if there have been any studies made about that, as the serifs are supposed to be there to aid reading when printed on paper, but I consistently find a good sans-serif font to be better in all cases.

[AlienRobot]

I wonder if this research is really valid. It was published 20 years ago, there is nothing in the abstract about arcdegrees and I can't read the full thing, and it's cited with zero consideration for the actual content being presented.

If Wikipedia had 70 characters per line I would never read it.

[notepad0x90]

That's a good point, 2560p wasn't a popular resolution back then. I'm sure people browsing in 4k suffer worse.

[flufluflufluffy]

Probably to not have incredibly wide paragraphs. I will say though, I set my browser to always display HN at like 150% zoom or something like that. They definitely could make the default font size larger. On mobile it looks fine though.

[notepad0x90]

I have HN on 170% zoom too. this a bad design pattern. I shouldn't have to zoom in on every site. Either increasing the font or making sure the content is always at least 50% of the page would be great for me.

[qingcharles]

This site was designed many moons ago, for another age. That's both a blessing and a curse, but much more of a blessing. As you've found, you can fix the zoom.

It's rare to see a site as popular as HN which has made almost zero changes to the UI over its entire history.

[majora2007]

I'm not sure, but when I was working with UX years ago, they designed everything for a fixed width and centered it in the screen.

Kinda like how HackerNews is, it's centered and doesn't scale to my full width of the monitor.

[notepad0x90]

I understand not using the full width, but unless you zoom in, it feels like I'm viewing tiny text on a smart phone in portrait mode.

You would think browsers themselves would handle the rest, if the website simply specified "center the content div with 60% width" or something like that.

[scotty79]

Your pixels are too small. Enable system scaling for high dpi screens.