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

211–220 of 254 posts

Re: 58 bytes of CSS to look great nearly everywhere

#211

Post by nottorp »

lelanthran wrote: post #203
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…

> . Larger font sizes on mobile are usually not a good idea as the device tends to be closer to your eyes anyway. So? Most people over a particular age cannot focus close-up anyway, so the phone is at arms length or close to it, which requires a larger font size.

Yep. Test on your parents or elder colleagues.

Re: 58 bytes of CSS to look great nearly everywhere

#212

Post by nottorp »

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.

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.

Re: 58 bytes of CSS to look great nearly everywhere

#214

Post by nottorp »

mort96 wrote: post #9
freediver wrote: post #5

What is wrong with browser default styling, and why do browsers ship with something that is wrong?

Default styling looks terrible and is hard to read. Humans are good at reading columns at around roughly 80 characters, while browsers default to filling the whole width of the screen with text, resulting in a column that's hundreds of characters wide. Text also gets easier to read when more spaced out; the default line height makes the text too close together. Browsers still ship the bad defaults because changing de…

> Humans are good at reading columns at around roughly 80 characters

Are they, or is this a legacy of 80x25 text mode terminals?

Re: 58 bytes of CSS to look great nearly everywhere

#215

Post by nicexe »

nottorp wrote: post #211
lelanthran wrote: post #203

Earlier quoted context omitted.

> . Larger font sizes on mobile are usually not a good idea as the device tends to be closer to your eyes anyway. So? Most people over a particular age cannot focus close-up anyway, so the phone is at arms length or close to it, which requires a larger font size.

Yep. Test on your parents or elder colleagues.

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

Re: 58 bytes of CSS to look great nearly everywhere

#216

Post by IshKebab »

wruza wrote: post #166
IshKebab wrote: post #143

Earlier quoted context omitted.

Because reading paragraphs of text with extremely long lines is really annoying. If the lines get too long it makes it hard to subconsciously find the next line when you scan back. What's your solution? The only other option I can think of is multi-column newspaper style, but that's pretty fundamentally incompatible with the scrolling model of the web. That's probably why you only see multi-column formats in page-bas…

that's pretty fundamentally incompatible with the scrolling model of the web It isn’t though. If browsers supported overflowing text into a “next” container (defined via hierarchy, selectors, whatever), designers could just design repeating pages of layouts like they usually do with full-height marketing stripes.

I'm not sure what you mean. The only way I can think it would feasibly work is if you have multiple columns with the same content, but offset by the window height. That wouldn't require any container linking and would allow you to scroll normally, but I also think it would be pretty weird.

Something like this: https://jsfiddle.net/n87hkdf4/

I think anything else would require tedious scrolling up and down all the time or worse - horizontal scrolling!

Re: 58 bytes of CSS to look great nearly everywhere

#217

Post by [deleted] »

screamingninja wrote: post #12
mort96 wrote: post #9

Earlier quoted context omitted.

Default styling looks terrible and is hard to read. Humans are good at reading columns at around roughly 80 characters, while browsers default to filling the whole width of the screen with text, resulting in a column that's hundreds of characters wide. Text also gets easier to read when more spaced out; the default line height makes the text too close together. Browsers still ship the bad defaults because changing de…

> Humans are good at reading columns at around roughly 80 characters What makes you say that? Anecdotally, I prefer using the full width of my screen.

[deleted]

Re: 58 bytes of CSS to look great nearly everywhere

#218

Post by mort96 »

nottorp wrote: post #214
mort96 wrote: post #9

Earlier quoted context omitted.

Default styling looks terrible and is hard to read. Humans are good at reading columns at around roughly 80 characters, while browsers default to filling the whole width of the screen with text, resulting in a column that's hundreds of characters wide. Text also gets easier to read when more spaced out; the default line height makes the text too close together. Browsers still ship the bad defaults because changing de…

> 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?)

Re: 58 bytes of CSS to look great nearly everywhere

#219

Post by thiht »

baud147258 wrote: post #148
magnio wrote: post #45

A comparison using danluu's website: Default: https://postimg.cc/k2Zwffms With the 100 bytes version: https://postimg.cc/645d9vKT

I honestly prefer the default version. Less scrolling to do.

That's the wrong metric. Scrolling is less straining than moving eyes (or even the head in this case).

People complain a lot about "wasted screen estate" but the first version that "doesn't waste blank space" is completely unreadable to me on desktop, I want to stop reading after the first line.

Re: 58 bytes of CSS to look great nearly everywhere

#220

Post by thiht »

nottorp wrote: post #212
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.

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 horizontal. I guess columns would be somewhat ok on the web, but it's not really comfortable either... as we can scroll.

Coverage of the screen with text is the wrong metric regarding legibility.

Post reply on HN