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

151–160 of 254 posts

Re: 58 bytes of CSS to look great nearly everywhere

#151

Post by galaxyLogic »

sorenjan wrote: post #101
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.

Newspapers use columns for the same reason, to not get too wide lines. Unfortunately I don't think I've ever seen a site use columns, even though CSS supports it. https://developer.mozilla.org/en-US/docs/Web/CSS/columns

I think that shows that different mediums need different solutions and also different content.

Newspapers don't have scrollbars. So they use columns.

This may be why phone-apps are so popular, their content is designed to be viewed only through the app.

CSS columns is cool, I didn't know about it. But not sure where I would use it either.

Re: 58 bytes of CSS to look great nearly everywhere

#152

Post by wolpoli »

jcynix wrote: post #121
dwringer wrote: post #51

Earlier quoted context omitted.

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.

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.

Re: 58 bytes of CSS to look great nearly everywhere

#154

Post by Arnavion »

TheWoodsy wrote: post #98

It seems like I'm permanently in some sort of dystopian nightmare 'unpopular opinion' group where wasting two thirds of my monitors useful space is the right way about doing things. I have monitors either side of my primary in portrait mode specifically for looking at a bunch of code/text and it still wastes at least half of the useful display area. https://i.imgur.com/Qk7fM35.png If I wanted this, I'd press the read…

For real. I have a dozen style overrides for websites that are just variations of `max-width: none !important` to make them actually usable.

Re: 58 bytes of CSS to look great nearly everywhere

#155

Post by cerved »

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.

the maximum width for readability is in characters per line so it should be expressed in that

Re: 58 bytes of CSS to look great nearly everywhere

#156

Post by Arnavion »

Accacin wrote: post #104
TheWoodsy wrote: post #98

It seems like I'm permanently in some sort of dystopian nightmare 'unpopular opinion' group where wasting two thirds of my monitors useful space is the right way about doing things. I have monitors either side of my primary in portrait mode specifically for looking at a bunch of code/text and it still wastes at least half of the useful display area. https://i.imgur.com/Qk7fM35.png If I wanted this, I'd press the read…

But, you're the one wasting it, right? You have a huge monitor with one window open. I use a WM and very rarely have one window on a whole screen, because that would be a waste of screen. If that text was full width along your screen you'd be wasting vertical screen space instead. Will you ask them to write more to fill your screen up?

If resizing the browser is an acceptable solution then not setting the max-width already works. Setting the max-width only makes it worse for people who want the space to be filled regardless of their browser size.

Re: 58 bytes of CSS to look great nearly everywhere

#157

Post by SquareWheel »

sorenjan wrote: post #101
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.

Newspapers use columns for the same reason, to not get too wide lines. Unfortunately I don't think I've ever seen a site use columns, even though CSS supports it. https://developer.mozilla.org/en-US/docs/Web/CSS/columns

Personally I find column-style layout to be more difficult on the web. Though probably just due to lack of familiarity.

As one example, the "Golf with your Friends" subreddit always throws me for a loop due to its use of columns. I have no idea how to read it!

https://old.reddit.com/r/GWYF/

Note this example will only work on a widescreen desktop browser.

Re: 58 bytes of CSS to look great nearly everywhere

#158

Post by Arnavion »

IshKebab wrote: post #143
TheWoodsy wrote: post #98

It seems like I'm permanently in some sort of dystopian nightmare 'unpopular opinion' group where wasting two thirds of my monitors useful space is the right way about doing things. I have monitors either side of my primary in portrait mode specifically for looking at a bunch of code/text and it still wastes at least half of the useful display area. https://i.imgur.com/Qk7fM35.png If I wanted this, I'd press the read…

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…

>What's your solution?

I don't need solutions to problems I don't have.

If people find it hard to read long lines on my website they can make their browser window thinner. I don't feel compelled to impose my reading abilities (or lack thereof) on them.

Re: 58 bytes of CSS to look great nearly everywhere

#159

Post by skyfaller »

xani_ wrote: post #145
magnio wrote: post #45

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

That line spacing is obnoxiously big tho

Yeah, I agree the line spacing is far too much. Butterick's Practical Typography recommends 1.2 to 1.45: https://practicaltypography.com/line-spacing.html

Really the only reason to use a line spacing of 2 is if you are printing it and then editing the text with a pen. So... maybe in a print stylesheet in a very specific situation? But never on the web, IMHO.

Re: 58 bytes of CSS to look great nearly everywhere

#160

Post by michaelsalim »

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.

That's a great point. I gave it some thought and I think it's a matter of the relative distance from the start to the end from your perspective.

Billboards are meant to be read from far away. So even though the physical width is large, we perceive it to be much smaller. Maybe similar to a big banner on a Desktop monitor.

Imagine reading the billboard at a much closer distance, say 2 meter. You'll have to move your neck from left to right. It doesn't matter how big or small the font size is.

As a subjective test, I lowered the font size of a random article to see if I would have trouble reading it. Other than having to focus more to make out the text, I don't have problems reading the entire paragraph. On the other hand, removing the max width made it more uncomfortable to read.

So the distance from where the text will be viewed from is an important factor to take into account. Phones, Desktops & Banners all are viewed from different distances.

Post reply on HN