58 bytes of CSS to look great nearly everywhere

https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad9528b72c41

by thunderbong • 4 years ago

723 241 4 years ago

gist.github.com

metayrnc• 4 years ago

Would have been nice to have some examples showing it in action.

noizz• 4 years ago

Quick example of how it looks: https://jsfiddle.net/n8Lqypb7/

schemescape2• 4 years ago

Is there some way to view the result full screen, namely for viewing on mobile?

new_user_final• 4 years ago

result: https://jsfiddle.net/n8Lqypb7/show

Original page: http://web.archive.org/web/20210318102514/https://jrl.ninja/...

mort967• 4 years ago

The original page seems to be gone from the web, but here's an archive of it: http://web.archive.org/web/20210318102514/https://jrl.ninja/.... That shows the described CSS in practice.

sva_• 4 years ago

It also references this previous discussion: https://news.ycombinator.com/item?id=19607169

cerved4• 4 years ago

there's a lot of studies about optimal typography for readability in terms of fonts and characters per line etc.

Having dead space on the side is kind of a different problem, more on the lines of the appropriate default settings of the application (or system)

freediver• 4 years ago

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

djbusby• 4 years ago

Browsers ship with defaults that are now 20 years old - there was a cool post here about 8px body padding a while ago.

It's not "wrong" it's legacy.

postalrat3• 4 years ago

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

dagurp• 4 years ago

It would be nice if you could choose between defaults in the html tag <html style-default="2022">

cyral• 4 years ago

Without max-width the content will stretch across your entire screen, which isn’t great for readability. It’s faster to read when you don’t have to look across your entire monitor and move your neck/head.

mort967• 4 years ago

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 defaults would break existing websites.

screamingninja• 4 years ago

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.

zvmaz• 4 years ago

Humans are good at reading columns at around roughly 80 characters

Do you have some evidence backing this up? Thanks.

ravenstine2• 4 years ago

I much prefer the default styling other than that the margins are nearly nonexistent. Any time I come across a site that uses mostly default styling (such as some academic webpages from the 90s), I always think to myself "wow, this is pleasant to read."

Text also gets easier to read when more spaced out; the default line height makes the text too close together.

The opposite is easily true in my experience. Making text large, using ample line height, and even greater spacing between paragraphs, makes for text that is more readable but makes the experience of reading much worse. This is of course entirely subjective unless someone comes up with measurable evidence, like a study on the sentiment of users.

Something tells me that designers have been taking principles that are appropriate to hero page sections, advertisements, magazine covers and such, and applying them inappropriately to bodies of prose. Larger text with spacing and huge margins (or smaller max width) helps the reading impaired, but I don't really buy that people actually prefer it.

alerighi• 4 years ago

Humans are good at reading columns at around roughly 80 characters

Depends. The reason why it may seem better to have narrow column is so you can skip ahead more easily and thus read faster (reason why newspaper divide an article into columns). Otherwise it doesn't make difference.

To me it's absurd that this day the trend is to have wide screen displays (16:9 but nowadays even 21:9 is common) and then all the text is vertical in a column that makes it impossible to read.

I prefer to give the use a choice: after all if the user prefers narrow text all he has to do is to take the mouse and resize the browser window at the width that he likes! But doing the opposite is not possible (at least without an extension that modifies CSS), and thus you have to keep scrolling something that otherwise would have fitted in a single screen.

nottorp6• 4 years ago

Humans are good at reading columns at around roughly 80 characters

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

nawgz• 4 years ago

Nothing is explicitly wrong, but the spacing on lists and headers can look kind of silly. For instance, consider in Google Docs - the headers stack nicely, look clean, and lists have perfect indentation / spacing

Those changes pretty much cover all this does, and it doesn't do a great job IMO. I'd let them get away with "look slightly better than defaults nearly everywhere"

marginalia_nu4• 4 years ago

Historical reasons. Default browser styling still carry a lot of heritage from back when screens were 640x480 and you had to squeeze as many lines as possible onto the 14" screen.

Of course, if you change the default CSS now that 30 years of HTML have been written to rely on these defaults, almost every website will break.

marcosdumay3• 4 years ago

I doubt this. Almost every website overrides all of the relevant CSS attributes, because the default is just atrocious. Changing the default won't impact them.

Anyway, the browsers still can update the CSS and add a "reverse read mode" button that changes it back.

411111111111111• 4 years ago

That's true, but there could theoretically be more then one default. I'm not arguing in favour of it, just pointing out the possibility. it would be pretty simple to create a <html styling="modern"> so that it's opt-in.

I personally just don't see the point. There are a lot of bare bone frameworks around and if you're doing a static website (which would likely be the only type to benefit from that)... The <10 kilobytes gzipped css won't matter for the most part.

wpietri• 4 years ago

Allow me to go off on a tangent and say:

30 years of HTML

holy fucking shit

amelius• 4 years ago

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

The problem with browser default styling is that there should be another level: user default styling. I.e., the styling as chosen by the user.

phil2942• 4 years ago

I think this is a valid point. For example, I have always wondered why default browser styles don't at least adjust to the OS's theme - be it Metro, Material, Qt, Gtk, whatever. It would solve a lot of issues for bare-bones websites, while still allowing full configurability for websites via override. And if we really cannot have nice things because of backwards compatibility, make OS integration optional via <meta> tag etc.

Why does every website have to reinvent the wheel?

mikewarot• 4 years ago

I've got a screen that is much wider than it is tall, this throws away so much of it. It's as bad as Facebook, where the stuff you want to see is a band about 1/4 the area of the screen.

ricardobeat• 4 years ago

In theory sites could optimize for wide screens by adding columns, but 1) its a very small audience 2) most content is not suitable for that (how would you scroll a feed that spans 3 columns?)

shadowofneptune2• 4 years ago

https://www.nasm.us/xdoc/2.15.05/html/nasmdoc2.html

The NASM website is an example of this. Personally, I don't like it and would prefer a single column.

hoherd• 4 years ago

This whole design pattern of wasting screen real estate in desktop browsers drives me crazy. If I want narrow text I'll make my browser window narrow.

On mobile, so many times it ends up creating a bad UX, but I will say that it does make more sense there where you can't change your browser width.

clairity2• 4 years ago

browsers have been working on multiple column text for a while now[0], so by employing a container/media query, you could have multiple columns for wide screens and content containers. i experimented with it a couple years ago and found quirks (which i can't remember offhand) that made it not quite ready for primetime then.

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

phil2942• 4 years ago

Hope you don't mind the self-promo: Here's a GH project of mine which attempts to provide styles for popular websites to remove large paddings and max-widths: https://github.com/phil294/density-userstyle

mwcampbell4• 4 years ago

Do you still have to explicitly add CSS to do something appropriate for the user's dark mode setting? I'd rather not specify any colors at all and just let the browser use system defaults, but last time I checked, that used black-on-white even in dark mode.

wildrhythms• 4 years ago

That would introduce yet another set of defaults that developers would then need to inevitably override.

mwcampbell4• 4 years ago

I'd accept that. The user-agent knows better than I do what the user needs. Especially if the user is low-vision, color-sensitive, or whatever.

schemescape2• 4 years ago

Yes. Sadly, iOS Safari defaults to dark blue links on a dark background for dark mode.

curlftpfs3• 4 years ago

You do, via `color-scheme` or media query

jraines2• 4 years ago

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?

Herodotus382• 4 years ago

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/

jraines2• 4 years ago

Amazing! Thanks :)

sdoering• 4 years ago

Instantly thought of the same ressource. Still something I recommend regularly to people.

dmitriid• 4 years ago

Great, with one nitpick: "Black text on a white background can be harsh on the eyes. Opting for a softer shade of black for body text"

Why are people so afraid of black text on white background?! In the end, after all the colors and custom fonts the website has gray text with poor readability which instantly fails WCAG AAA. Had he kept #555 (which is still not ideal), the author would have had a WCAG AAA-compliant design with minimal effort.

coffeeblack• 4 years ago

Well done step by step presentation.

But I still prefer how the page looked initially, without all the styles.

joeriddles• 4 years ago

Perhaps this or this? Excuse the language.

[1] http://motherfuckingwebsite.com/

[2] http://bettermotherfuckingwebsite.com/

WallyFunk• 4 years ago

And this: https://watercss.kognise.dev/

FrontAid3• 4 years ago

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;
    }

dwringer• 4 years ago

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.

FrontAid3• 4 years ago

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.

I would think so. And because of that, accessibility is an essential topic. Luckily, this snippet will automatically follow your zoom level and/or font size settings.

rch2• 4 years ago

Content on the web used to flow pretty well irrespective of those factors. The 'liquid' layout in Adobe's pdf reader works as it should, as does the simplified view in Chrome (which is suspiciously only offered on sites without ads). So, I'm optimistic that simplified layouts are worth pursuing.

jcynix2• 4 years ago

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.

DaveInTucson• 4 years ago

hopefully not too dumb a question, but why put this on html instead of body?

FrontAid3• 4 years ago

Au contraire. That is good question. Everything in the snippet except the font-size should also work with the body selector. The font-size is an exception here as it defines the root font size that the `rem` unit is based on. And that has to be defined on html.

https://css-tricks.com/html-vs-body-in-css/

antics9• 4 years ago

This will work in obscure browsers like Netsurf as well:

html{ margin:0 auto; max-width:80ch; padding:0.6em; font-family:serif; line-height:1.6; background:#FFF; color:#222 } h1,h2,h3{color:#444} img{width:100%}

logifail• 4 years ago

Hence, a lot of screen space is wasted and the user has to scroll more

Unfortunately that appears to be the case for a great many sites when viewed on a mobile device.

My current pet hate is British Airways, https://www.britishairways.com/travel/home/public/en_gb/ has so much wasted space that on my Pixel I have to scroll to reach the buttons "Manage My Booking" and "Check In". Further down the page the "Your account" and "Sign up" bits are so large and generously padded that they fill my mobile device's screen all by themselves.

Is this by design? Maybe in some warped design brief "scrolling" = "[potential] customer interaction" = a KPI gets fulfilled?

b1124• 4 years ago

I bet you think autos should not have wood interiors, too! Heathen!

(I wonder if it is a "posh / classy" style or what not?)

maccard• 4 years ago

Frankly my pet hate is that page takes 7 seconds to load on a 500Mb WiFi connection on a high end android device.

alberth2• 4 years ago

body :not(:is(h1,h2,h3,h4,h5,h6)) {

That seems both clever and hard to maintain over the long run.

taberiand• 4 years ago

What would make it hard to maintain? (honest question, I'm rather ignorant of CSS)

sholladay• 4 years ago

I like this but given the max-width: 70ch, how do you prefer to handle things that you do want to take up the full screen width, such as pictures or header/footer with a background color? Explicitly set each of them to 100vw? I've tried the opposite approach, setting the max-width only on p,h1,h2,h3 (etc) but it's error-prone. I've never quite found a set up that feels simple and robust.

chrismorgan2• 4 years ago

max-width: 70ch;

OK. This will probably be in the range 640–780px where it caps out (taking the font-size scaling for that width into account), but it depends on the font (and the viewport aspect ratio because of the font-size vmin component). Acceptable.

padding: calc(1vmin + .5rem);

Assume the browser em is 16px (almost always true) and the above values for 70ch, and you end up with this reaching almost 15px at 700px, down to 11px on a 300px viewport (which is about the narrowest realistic viewport). I reckon a bit more is warranted at both ends, and tying it to viewport width only rather than vmin. I’d prefer just `padding: 1rem` (16px everywhere) or `padding: 4vw` (12px at 300px, 28px at 700px). Maybe a mixture like `padding: calc(3vw + .2rem)` if you really want to get fancy (12.2px at 300px, 24.2px at 700px).

Actually, a correction (though I’ll leave that paragraph alone): you haven’t touched the body margin in this stylesheet, so you’ll get an extra 8px on every side, so I’d either adjust that or reduce this padding by approximately 8px in each case. In light of the extra 8px, calc(1vmin + .5rem) is actually a bit much on tiny viewports, rather than too little.

margin-inline: auto

But be aware this is new, March 2019 in Firefox up to April 2021 in Safari: https://caniuse.com/mdn-css_properties_margin-inline. Where unsupported, you’ll lose the centring of the document column.

Also this won’t do what you want in a vertical writing mode language. :-)

font-size: clamp(1em, 0.909em + 0.45vmin, 1.25em);

This is typically 16px until 323.5̅px, 18px at 768px, 20px from 1212.4̅px. I would generally prefer to cap at 18px, but this scaling is acceptable. Actually, since it’s using vmin rather than vw, it’s seldom going to reach even 19px because almost no one has viewports that are both even 1000px wide and tall.

Again this is new, mostly early 2020: https://caniuse.com/css-math-functions. Where unsupported, it’ll stay at the typically-16px value.

font-family: system-ui

I object to this. system-ui is problematic because there’s no guarantee that the font it resolves to is suitable for your content language. In Chinese Windows setups, this is likely to get you a font that renders English fullwidth, basically equivalent to massive letter-spacing. Use `font-family: sans-serif` instead. At present it will commonly resolve to a font that is subjectively not so “pretty”, but it will always provide a reasonable font, and it’ll be even better for users that have chosen their own default fonts.

system-ui has often been being used as a proxy for nicer-looking default fonts, but it has semantics attached to it, and those semantics actually make it an unreliable choice.

Also again comparatively new in the scheme of things, with Firefox the latecomer having only had it for twelve months: https://caniuse.com/font-family-system-ui. Where unsupported, you’ll get the default font, which is likely to be serif. Even if keeping system-ui, I would recommend adding a fallback, e.g. `font-family: system-ui, sans-serif`. (Incidentally also, remember the semantics of system-ui and that it might not be a sans-serif. It could be a serif, or even something more exotic. It could be Comic Sans. Do you really want your website shown in Comic Sans? Wonder if that’s the angle to take in dissuading people from system-ui! :P)

line-height: 1.75;

Too much. Much too much. I’d suggest something in the range 1.2–1.5.

:is() is also new, last couple of years, https://caniuse.com/css-matches-pseudo. So this excessive line-height is comparatively unreliable. A more compatible spelling of the selector would be `body :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)`.

teo_zero2• 4 years ago

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?

7steps2much2• 4 years ago

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

chrismorgan2• 4 years ago

You are correct not to get it. system-ui has been abused from the very start as a proxy for prettier default fonts, but it has semantics, and those semantics make it unsuitable for use as a body font. https://infinnie.github.io/blog/2017/systemui.html gives a simple demonstration of how it can go wrong.

So stick with something like serif or sans-serif.

lelanthran3• 4 years ago

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

nottorp6• 4 years ago

Yep. Test on your parents or elder colleagues.

marcosdumay3• 4 years ago

And it sets a text color, but no background color, ensuring it will fail on most non-standard color schemes.

Not really "everywhere".

makeworld• 4 years ago

Also restated here: https://www.swyx.io/css-100-bytes

worldmerge• 4 years ago

Does anyone know what theme that blog is using? It looks really nice.

swyx3• 4 years ago

uh wow, this is the first time anyone's complimented anything I designed lol!

it's a handrolled theme, with a lot of inspo from @leerob of vercel. i keep a clonable version here https://github.com/sw-yx/swyxkit/

magnio2• 4 years ago

A comparison using danluu's website:

Default: https://postimg.cc/k2Zwffms

With the 100 bytes version: https://postimg.cc/645d9vKT

mod• 4 years ago

Thanks for taking a minute to do this, it gives a nice side-by-side for a real-world example. What a great improvement.

c0mptonFP• 4 years ago

Line spacing is atrocious

xani_• 4 years ago

That line spacing is obnoxiously big tho

skyfaller• 4 years ago

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.

rossjudson• 4 years ago

I think the line spacing is "comfy". Approved. For me.

collinmanderson3• 4 years ago

Yeah when I saw 2em padding and 1.75 line height in the css I thought "too big". I think 1em padding and 1.5 line-height are a bit better for general defaults.

It often can look better to have more whitespace, but it lowers information density. It depends on the situation.

baud1472582• 4 years ago

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

_def• 4 years ago

But more horizontal eye movement, which at least I find unpleasant

phist_mcgee• 4 years ago

Try reading his site on a 21:9 and your eyes start bleeding.

thiht3• 4 years ago

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.

desertlounger• 4 years ago

Can't help but think that both would look a lot better w/ text-align: justify on paragraphs.

wirrbel• 4 years ago

I will never understand inflated line height. It doesn’t make Text more legible.

civilized• 4 years ago

So long as we're talking about making websites legible, why is it that so many websites these days have content that's too wide for a mobile screen and there's no horizontal scroll, so the content simply can't be seen?

zora_goron• 4 years ago

A little more heavy and less generalizable than this, but I’ve used this Drop-in Minimal CSS bookmarklet [0] several times to quickly try out drop-in CSS frameworks on my projects!

[0] https://dohliam.github.io/dropin-minimal-css/

pronlover7232• 4 years ago

I'd add

    :root {
      color-scheme: light dark;
    }

This makes the browser choose dark colors for those that prefer them, including form widgets etc...

stevebmark3• 4 years ago

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.

swid2• 4 years ago

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.

xcambar2• 4 years ago

Have you ever seen a long text on a billboard?

I guess not.

cerved4• 4 years ago

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

michaelsalim• 4 years ago

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.

jmull• 4 years ago

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

isaacremuant• 4 years ago

I don't like that. I can adjust the full text width by adjusting my window but if have a big wide screen and you limit it, then I'm wasting a lot of what I can see.

Give me customization, not "alleged optimization" that turns out not to be so

stevebmark3• 4 years ago

Don't confuse constraining an entire website's width for constraining the text reading width. You can gracefully have maximum reading width text columns with other content to the left and right of it to maximize real estate.

Also, don't ask users to resize their browsers to accomodate for a site's poor UX. That's called "blaming the user."

cerved4• 4 years ago

paragraphs are less readable past 90-100 characters width

sorenjan3• 4 years ago

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

galaxyLogic• 4 years ago

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.

SquareWheel• 4 years ago

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.

robertoandred• 4 years ago

Columns like those are a bit awkward when combined with scrolling long blocks of text. When you reach the bottom of one column, do you need to scroll back up to get to the top of the next? Or do you have the column fit the height of the screen and have some sort of horizontal scrolling for as many columns as it takes.

vehemenz• 4 years ago

Yes, they've been around forever, but browsers have never properly supported column breaks and orphan control. This tends to make any content with CSS columns unsightly, which is why no one uses them.

WorldMaker3• 4 years ago

I've used it on my personal blog for many years at this point, because it is my personal blog and I can be weird with it, including using horizontal scrolling by default. https://blog.worldmaker.net

I really love multi-column, and appreciate horizontal scrolling. I've got an ultrawide screen, and I love that my site is one of the very few that makes an interesting use of a screen that wide. (There are articles on my blog you can easily read with no scrolling at all.)

I've gotten so many complaints over the years about my use of multi-column, including here on HN. It seems a very polarizing thing, even as I wish it were more common. The one time one of my posts trended it got a lot of hate about my blog CSS. That was a revision ago, though. I've made a bunch of adjustments to it since then, because I did read all of them, and tried to find some tweaks (including a few bits of JS) to smooth the experience a bit.

dv_dt• 4 years ago

Large margins are also distracting and a waste of human time. I wish browsers or sites would automatically flow the text into n columns depending on the view window size. It's not trivial but if one is optimizing for reading, then extra window scrolling to get to newer sections of text is not particularly optimal either.

ryandrake3• 4 years ago

Web sites should just serve the text and let the user-agent make the readability decision and decide how to appropriately render it. Browsers have handed over way too much layout and stylistic control to web developers.

nottorp6• 4 years ago

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.

thiht3• 4 years ago

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.

growt• 4 years ago

“max-width: 38rem it appears that the default font size for most browsers is 16px, so 38rem is 608px. supporting 600px displays at a minimum seems reasonable.”

I’m not an expert in CSS, but I don’t think this makes sense. Why base the width on the default font size when you know you’re aiming for 600px? Just write 600px. Also that’s a max width, so what makes this support 600px screens at a minimum?

breck• 4 years ago

Love things like this. This is why I can't stop reading HN.

I disagree about the font-size. I say go very small (pack more info on a screen). Very easy for people to make it bigger. People have known this for hundreds of years (old newspapers pack in the text, older readers can wear spectacles or use magnifying glass).

coldtea• 4 years ago

I disagree about the font-size. I say go very small (pack more info on a screen)

Why, is it a contest who can cram the more? People can always scroll, and they know how to do that better than they know how to increase the text (not to mention most read on mobile phones, were even fewer know how to change the text size)

old newspapers pack in the text, older readers can wear spectacles or use magnifying glass

Seems like the worst argument one could chose in favor of this idea...

simonw• 4 years ago

"Very easy for people to make it bigger"

I wonder if that's true for the average (non-nerd) user on a smartphone though. They can likely pinch-and-zoom, but that's a terribly way of reading text since you constantly have to pan back and forth. Have they definitely found the text size adjustment buttons?

shadowofneptune2• 4 years ago

I've moved towards a larger size with the knowledge that I'll have trouble reading small text in 20 years. With the state of modern medicine, most people reading this will be old for a long time.

pGuitar• 4 years ago

I tend to agree but modern designers are doing the opposite and post the least amount of content in a specified amount of space. I bet that they will come to their senses eventually.

r3trohack3r• 4 years ago

I really like the minimal CSS on Nat’s website, I frequently reference it when styling my own content: https://nat.org

bawolff• 4 years ago

it appears that the default font size for most browsers is 16px, so 38rem is 608px. supporting 600px displays at a minimum seems reasonable.

I dont get the logic here. If the goal is 600px, why are we using rem?

cantSpellSober• 4 years ago

If the units don't match, changing the user's base font size will only affect one of them. Part of why we stopped using rem.

Why are we even setting a font-size on root of we want to base the width on the "default?"

Why are we even setting a max-width? Just split text into columns to maintain a legible line length.

evandale• 4 years ago

Does this actually look great to people? I can't stand forced line lengths and these ones feel way too short for the text size. This seems that it looks great for mobile, not desktops.

TheWoodsy2• 4 years ago

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 reader button in Firefox or squish my browser window. Why? Shakes fist at sky

zahllos• 4 years ago

I think this is due to the desire to fall in the approx 40-75 characters per line that are considered ideal (numbers vary depending on the source of the study but broadly fit this definition) for users to read. It is also why some prefer double-columns in academic papers, because each 'column' has closer to ideal lines, rather than have wide margins on the page.

Of course, this looks like wasted space when you have a landscape-oriented monitor... I personally very rarely maximize my browser so that I read in more of a portrait-style mode, regardless of the orientation of my display.

Accacin• 4 years ago

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?

TheWoodsy2• 4 years ago

Well, OK sure. I'm not the most effective communicator but in the end I'm still genuinely 'not getting it' though.

In my image you can see that either portrait or landscape orientation, there is considerable 'dead' area (edit: either side), by default, even if the text was many paragraphs long.

The usual solution is to smash "ctrl numpad +" four times til things fit perfectly at (usually) 150%. It's actually uncanny how I'll do this without even thinking while browsing.

Arnavion3• 4 years ago

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.

wruza3• 4 years ago

There’s no easy way to organize lots of windows, and there is no way your approach would work nice with all web apps, sites and articles in different tabs of the same window.

What would be nice is a special element <viewport sizeable style=“width:n”> so a user could either enjoy a default width or drag one side of it to resize its margin at both sides, without resizing a window. Or, instead of an element it could be purely a browser viewport-resize feature, like they do for textareas.

Meta: it’s really frustrating that every time an argument about web ui starts, nobody thinks of how to actually make it better and just holds on some particular use case or preference.

ryan-duve• 4 years ago

We're in the same group if that makes you feel any better. BTW, since you mentioned reader view in Firefox, here's the userContent.css that I've been using for the past few years:

    @-moz-document url-prefix("about:reader") {
        .container{
            max-width:100% !important;
        }
        .toolbar-container{
            display:none !important;
        }
    }

Make sure to set your preferred size/color first.

jccalhoun2• 4 years ago

yep. I hate it. I've seen people say this is a result of studies but I've never been able to find the studies that claim this is better. It seems to have been stated in elements of typographic style and taken as truth http://webtypography.net/2.1.2

iLoveOncall• 4 years ago

Well you must have not searched very hard if you didn't find studies, because it took me a grand total of 3 minutes: https://www.semanticscholar.org/paper/Optimal-Line-Length-in...

There are many citations that lead to other studies on the same topic.

demindiro• 4 years ago

I limit the width on my website because I find moving my eyes constantly from left to right annoying. For me it's harder to find the beginning of the next line if lines are very long.

Besides, the other half of my monitor is usually taken up by another window or two.

IshKebab2• 4 years ago

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-based media like physical newspapers and PDF papers.

Arnavion3• 4 years ago

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.

wruza3• 4 years ago

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.

croes• 4 years ago

Even worse when the text has things like code examples that aren't completely readable without horizontal scrolling.

Arnavion3• 4 years ago

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

mikl• 4 years ago

Why? Because so many users just run the browser in full screen mode because they don’t how or simply can’t be bothered to manage windows, not because they actually want their screen filled edge to edge with text.

So because long lines are hard to read, line length is clamped to at least provide a decent experience to all those users.

hisyam• 4 years ago

I use a browser extension called Window Resizer where I create 2 resolution profiles (1440x1080 and 1600x1080) and then use CTRL+1 and CTRL+2 keyboard shortcuts to alternate between them.

hoseja• 4 years ago

Thank you! This is a particularly annoying design trend. I regularly hunt in the dev console for the offending max-width element and nerf it with extreme prejudice.

enriquto• 4 years ago

This is useless bloat.

Default browser styles are perfectly alright.

When they aren't, this is mainly a self-inflicted problem by your browser (that can set whatever default it wants), and by yourself (who can easily override the default browser style with either a personal css file or just by CTRL+scrolling to change your text size). Text size, window width, margins, should never be a responsibility of the website.

zzo38computer2• 4 years ago

Default browser styles are perfectly alright.

Well, almost. The only problem (as far as I can think of right now) is that pictures which are included in a document are not limited to the width of the viewing area, by default.

When they aren't, this is mainly a self-inflicted problem by your browser (that can set whatever default it wants), and by yourself (who can easily override the default browser style with either a personal css file or just by CTRL+scrolling to change your text size). Text size, window width, margins, should never be a responsibility of the website.

I fully agree.

achn2• 4 years ago

Is there a html/css only way to automatically “columnize” text into multiple columns of reasonable width?

iza• 4 years ago

There is the columns CSS property: https://developer.mozilla.org/docs/Web/CSS/columns

You probably don't want to apply it to a whole document because then you need to scroll back to the top to read the second half. But it can be effective to columnize text sections between headings.

achn2• 4 years ago

Thanks. I’d love to see automatic pagination as well so it builds full window columnized “pages”.

swyx3• 4 years ago

I wrote my version here last year: https://www.swyx.io/css-100-bytes

    html {
      max-width: 70ch;
      padding: 3em 1em;
      margin: auto;
      line-height: 1.75;
      font-size: 1.25em;
    }

if you have 100 more to spare:

    h1,h2,h3,h4,h5,h6 {
      margin: 3em 0 1em;
    }

    p,ul,ol {
      margin-bottom: 2em;
      color: #1d1d1d;
      font-family: sans-serif;
    }

explanation in the blogpost

curlftpfs3• 4 years ago

Element-based selectors, setting the root font-size, mixed units, text color with no background color...I guess the assumption is that you won't add ANY other styling? Big headaches down the road if you do.

swyx3• 4 years ago

well yeah thats the gimmick with these things, ultra minimalist drop in css. its not like its hard to modify later on

uhtred• 4 years ago

We bloat websites with ridiculously huge js frameworks but sure, let's focus on a few bytes of css

divbzero• 4 years ago

Could the default style in browsers be adjusted so nearly any webpage can look great with plain HTML?

zzo38computer2• 4 years ago

In my opinion, it does already, without needing much CSS except to limit pictures to the width of the viewable area (you can click on them and select "view picture" to zoom them, if desired). I rarely need to add my own CSS code to web pages that do not already have CSS; it is those that do, that I need to fix.

I made up a attribute feature="usercss" which is supposed to mean to use the user-specified CSS (or suitable defaults for semantic HTML) instead of this one, if the client supports that feature; it can also use the user-specified CSS (or suitable defaults) if the web page does not specify any CSS at all. As far as I know no browsers implement this, but some of the people making up some newer browsers (the less common ones) might consider to add such a feature when user-specified CSS is implemented.

Blackthorn2• 4 years ago

People who use that accursed max-width style are the bane of my existence. Let it fill the entire browser! I have no idea how this became a trend.

RobbieGM• 4 years ago

Isn't it more readable not to have really long lines?

curlftpfs3• 4 years ago

We can have both! Wide containers with narrow line lengths.

We call them "columns" and they're part of CSS now.

thunky2• 4 years ago

People are using 48+ inch OLED tvs for monitors now. Someone reading full width text will look like they're watching a tennis match.

Blackthorn2• 4 years ago

People can set the exact width they're comfortable with by making the browser window the size they want. But the moment that max-width is added, the choice is removed.

ranger_danger• 4 years ago

no example screenshot or demo page? really?

javchz• 4 years ago

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.

imran0• 4 years ago

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

pgt• 4 years ago

font-family: Georgia;

OJFord• 4 years ago

Should you take this sort of advice from someone using block quotes for explanatory sections?

That oddity aside, seems the explanation didn't start 101 enough for me - I've not come across `main` before! Though it's not at all new: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma...

hit8run• 4 years ago

Line height 1.75 lol no thanks.

gardenhedge• 4 years ago

this is too narrow for my liking

quickthrower22• 4 years ago

58 bytes of CSS to look great nearly everywhere

Related Stories