Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

58 bytes of CSS to look great nearly everywhere

gist.github.com

Post reply on HN
Print view View original

221–230 of 254 posts

Re: 58 bytes of CSS to look great nearly everywhere

#221

Post by lelanthran »

nicexe wrote: post #215
nottorp wrote: post #211

Earlier quoted context omitted.

Yep. Test on your parents or elder colleagues.

Yep. Lets optimize for the 20%, let the 80% adapt by moving their phone further away.

> Yep. Lets optimize for the 20%, let the 80% adapt by moving their phone further away.

What 20%?

Near-focus eyesight problems start in mid-30s for some folk, and are already noticeable in close to 100% of 40 year olds.

You're optimising for 45%, not 20%, while allowing almost 100% to view.

Doing it your way optimises for 55%, while allowing only 55% to view.

Re: 58 bytes of CSS to look great nearly everywhere

#222

Post by nottorp »

mort96 wrote: post #218
nottorp wrote: post #214

Earlier quoted context omitted.

> Humans are good at reading columns at around roughly 80 characters Are they, or is this a legacy of 80x25 text mode terminals?

Yes, they are. Links to studies here: https://news.ycombinator.com/item?id=32972710 (Also, couldn't you have read the answers to one of the many other comments which ask the exact same thing?)

They don't. They just mention the studies. I was wondering if it's linked to legacy terminals because ...

... i don't know what kind of books you read, but all the books I read have as much text as will fit on the width of the page.

The only place i've seen thin columns was in technical books with introductory material. Never in fiction or advanced technical books.

Re: 58 bytes of CSS to look great nearly everywhere

#223

Post by nottorp »

thiht wrote: post #220
nottorp wrote: post #212

Earlier quoted context omitted.

Text in books tends to take the full width of the page (minus margins ofc) doesn't it? Why should you waste most of the horizontal space on my monitor then? Do you have trouble reading HN in a maximized browser window on a wide screen monitor? I don't.

> Do you have trouble reading HN in a maximized browser window on a wide screen monitor HN comments happen to be capped at 1215px (which I find too long on big comments), and comments usually have line breaks in between that make them not reach the max width. > Text in books tends to take the full width of the page Yes. Not the full width of both pages at the same time. Pages on a book have a vertical format, not hor…

I don't know what the right metric is but i simply can't read those sites that present you with a mobile-like layout with two paragraphs per screen on a 24" monitor.

If the text is too small I can hit Cmd - Plus but with those i have no recourse.

Re: 58 bytes of CSS to look great nearly everywhere

#224

Post by mort96 »

nottorp wrote: post #222
mort96 wrote: post #218

Earlier quoted context omitted.

Yes, they are. Links to studies here: https://news.ycombinator.com/item?id=32972710 (Also, couldn't you have read the answers to one of the many other comments which ask the exact same thing?)

They don't. They just mention the studies. I was wondering if it's linked to legacy terminals because ... ... i don't know what kind of books you read, but all the books I read have as much text as will fit on the width of the page. The only place i've seen thin columns was in technical books with introductory material. Never in fiction or advanced technical books.

I don't know what books you've read, but the ones I have read don't have pages which are 0.6 meters wide like my monitor. And paper newspapers, which come the closest of any medium I have used, use many columns per page to avoid ridiculous column widths. We can debate whether the optimal column width is closer to 50 characters or closer to 150 characters, but at almost 400 characters we're so far outside of what studies find comfortable that the discussion just becomes silly, IMO.

Re: 58 bytes of CSS to look great nearly everywhere

#225

Post by jmull »

swid wrote: post #83
stevebmark wrote: post #76

Not explicitly mentioned here, but worth bringing up: Text width should always be constrained to a maximum width to optimize for human reading. Every book ever printed has text with set within the same range for a reason. Full width text guarantees most users will have a poor reading experience.

I almost agree, but there’s a difference between number of characters and width, and also graphics and tables are a different beast. Personally, I think websites should fill up the available space, increasing font size if it makes sense, perhaps using resizing images. So, no - text should not be constrained to a maximum width. If width were a problem, billboards wouldn’t be a thing.

It seems clear from context they are talking about maximum width *in character*.

Re: 58 bytes of CSS to look great nearly everywhere

#226

Post by thiht »

nottorp wrote: post #223
thiht wrote: post #220

Earlier quoted context omitted.

> Do you have trouble reading HN in a maximized browser window on a wide screen monitor HN comments happen to be capped at 1215px (which I find too long on big comments), and comments usually have line breaks in between that make them not reach the max width. > Text in books tends to take the full width of the page Yes. Not the full width of both pages at the same time. Pages on a book have a vertical format, not hor…

I don't know what the right metric is but i simply can't read those sites that present you with a mobile-like layout with two paragraphs per screen on a 24" monitor. If the text is too small I can hit Cmd - Plus but with those i have no recourse.

It's not mobile-like, it's just legible. Just because you have a 24" monitor doesn't mean the text should take all the width, that's terrible.

Re: 58 bytes of CSS to look great nearly everywhere

#227

Post by [deleted] »

dwringer wrote: post #51
FrontAid wrote: post #35

I think this does not work well for mobile devices. Spacing and the font size is too large. Hence, a lot of screen space is wasted and the user has to scroll more. Larger font sizes on mobile are usually not a good idea as the device tends to be closer to your eyes anyway. A snippet that could work better in my opinion is the following: html { max-width: 70ch; /* larger spacing on larger screens, very small spacing o…

I wonder if everyone has a different optimum here based on different eyesight, screen size, and usage patterns. I always have a slightly different zoom on every website I visit. With this one I tend to agree, I can't see enough text at once and the margins seem a bit wide.

[deleted]

Re: 58 bytes of CSS to look great nearly everywhere

#228

Post by [deleted] »

wolpoli wrote: post #152
jcynix wrote: post #121

Earlier quoted context omitted.

Yeah, the zoom, that almost needs to be customized per website, sigh. But one of the worst misfeatures for old (and maybe not so old) eyes, is the gray text on some "pastel" background. Contrast helps readability (as does a carefully chosen font), but "modern" designers seem to think contrast is bad or outdated or whatever.

Well modern designers deliver mockup filled with Lorem Ipsum so no one notices that the text is hard to read.

[deleted]

Re: 58 bytes of CSS to look great nearly everywhere

#229

Post by imran0 »

javchz wrote: post #161

I just love this. I still don't get it how in this year, something like wikipedia, and newspapers in a 4k/1440p monitor are a pain to read. I get it, mobile first it's a thing, but with something as simple as this your readers will have a great time.

https://en.m.wikipedia.org/wiki/Cinnamon_clownfish is what you are looking for.

Re: 58 bytes of CSS to look great nearly everywhere

#230

Post by 7steps2much »

teo_zero wrote: post #199
FrontAid wrote: post #35

I think this does not work well for mobile devices. Spacing and the font size is too large. Hence, a lot of screen space is wasted and the user has to scroll more. Larger font sizes on mobile are usually not a good idea as the device tends to be closer to your eyes anyway. A snippet that could work better in my opinion is the following: html { max-width: 70ch; /* larger spacing on larger screens, very small spacing o…

I don't get this: > font-family: system-ui Why render texts with the font that the reader has selected for a different function, ignoring the one that she has selected for texts?

MDN[0] says:

> Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don't map cleanly into the other generics.

So it might have been used to make the snippet "truly" universal for the developer using it. That said, I believe it would be better to choose the font family based on the content.

Even if a viewer is from a place where Serif/San-Serif/etc. doesn't make sense, they are still viewing the same content as anyone else.

[0]: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

Post reply on HN