Live data from Hacker News

58 bytes of CSS to look great nearly everywhere

gist.github.com

31–40 of 254 posts

Re: 58 bytes of CSS to look great nearly everywhere

#31
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.

Here's a literature review on the topic: https://www.researchgate.net/publication/234578707_Optimal_L.... The article content is inaccessible, but from the abstract:

> Research has led to recommendations that line length should not exceed about 70 characters per line. The reason behind this finding is that both very short and very long lines slow down reading by interrupting the normal pattern of eye movements and movements throughout the text.

And a document on the topic from the US government: https://www.usability.gov/get-involved/blog/2006/08/line-len...

> The best available research suggests that users will read fastest if the line lengths are longer (up to 10 inches). If the line lengths are too short (e.g., two and a half inch columns), the line length probably will impede rapid reading. Users tend to prefer lines that are relatively short (about four inches).

Wikipedia cites a whole bunch of studies on the topic (https://en.wikipedia.org/wiki/Line_length):

> Legibility research specific to digital text has shown that, like with printed text, line length can affect reading speed. If lines are too long it is difficult for the reader to quickly return to the start of the next line (saccade), whereas if lines are too short more scrolling or paging will be required. [...] One proposal advanced that, in order for on-screen text to have the best compromise between reading speed and comprehension, about 55 cpl should be used.[11] On the other hand, there have been studies indicating that digital text at 100 cpl can be read faster than text with lines of 25 characters, while retaining the same level of comprehension.

There's a decent amount of variance, but common across all research in this area is that many hundreds of characters per line is never found to be the optimal length of a text column.

Re: 58 bytes of CSS to look great nearly everywhere

#32

Earlier quoted context omitted.

Why is it legacy though? Shouldn't browsers be free to change it?

Web browsers have a hard constraint of backwards compatibility. Eventually we could see some CSS directive which enables "modern" default styling, both for mobile and desktop, but it would be opt-in so that existing sites which rely on defaults do not break.

I bet if they did an experiment where they changed the default styles a bit very very few would complain. Most people visiting tiktok or whatever wouldn't even notice.

Re: 58 bytes of CSS to look great nearly everywhere

#33
post #21

Shot in the semi-dark: there was a blog post posted here —- I haven’t been able to find it with HN search —- some years ago that started from scartch/browser-defaults and proceeded in like 5 steps to some nice minimal defaults. Not exactly a plain reset; there were some opinionated choices. Step one was something like the parent article. Anyone have an idea what this was, or have some similar recommendations?

I had to through my saved favorites, but I knew what you were talking about. From 5(!) years ago:

https://jgthms.com/web-design-in-4-minutes/

Re: 58 bytes of CSS to look great nearly everywhere

#34
post #16
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 Do you have some evidence backing this up? Thanks.

I collected a few links here: https://news.ycombinator.com/item?id=32972710

80 is somewhat arbitrary, I could've said 50 or 70 or even 100, but it's in the ballpark of what studies find. Studies never find 400 characters per line to be optimal.

Re: 58 bytes of CSS to look great nearly everywhere

#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 on tiny screens */
      padding: calc(1vmin + .5rem);
      /* shorthand for margin-left/margin-right */
      margin-inline: auto;
      /* fluid sizing: https://frontaid.io/blog/fluid-typography-2d-css-locks-clamp/ */
      font-size: clamp(1em, 0.909em + 0.45vmin, 1.25em);
      /* use system font stack: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family */
      font-family: system-ui
    }

    /* increase line-height for everything except headings */
    body :not(:is(h1,h2,h3,h4,h5,h6)) {
      line-height: 1.75;
    }

Re: 58 bytes of CSS to look great nearly everywhere

#36
post #21

Shot in the semi-dark: there was a blog post posted here —- I haven’t been able to find it with HN search —- some years ago that started from scartch/browser-defaults and proceeded in like 5 steps to some nice minimal defaults. Not exactly a plain reset; there were some opinionated choices. Step one was something like the parent article. Anyone have an idea what this was, or have some similar recommendations?

I had to through my saved favorites, but I knew what you were talking about. From 5(!) years ago: https://jgthms.com/web-design-in-4-minutes/

Amazing! Thanks :)

Re: 58 bytes of CSS to look great nearly everywhere

#37
post #21

Shot in the semi-dark: there was a blog post posted here —- I haven’t been able to find it with HN search —- some years ago that started from scartch/browser-defaults and proceeded in like 5 steps to some nice minimal defaults. Not exactly a plain reset; there were some opinionated choices. Step one was something like the parent article. Anyone have an idea what this was, or have some similar recommendations?

I had to through my saved favorites, but I knew what you were talking about. From 5(!) years ago: https://jgthms.com/web-design-in-4-minutes/

[deleted]

Re: 58 bytes of CSS to look great nearly everywhere

#39
post #21

Shot in the semi-dark: there was a blog post posted here —- I haven’t been able to find it with HN search —- some years ago that started from scartch/browser-defaults and proceeded in like 5 steps to some nice minimal defaults. Not exactly a plain reset; there were some opinionated choices. Step one was something like the parent article. Anyone have an idea what this was, or have some similar recommendations?

Perhaps this or this? Excuse the language.

[1] http://motherfuckingwebsite.com/

[2] http://bettermotherfuckingwebsite.com/

Re: 58 bytes of CSS to look great nearly everywhere

#40

Earlier quoted context omitted.

Web browsers have a hard constraint of backwards compatibility. Eventually we could see some CSS directive which enables "modern" default styling, both for mobile and desktop, but it would be opt-in so that existing sites which rely on defaults do not break.

I bet if they did an experiment where they changed the default styles a bit very very few would complain. Most people visiting tiktok or whatever wouldn't even notice.

Most people visiting tiktok don't do it in their browser
Post reply on HN