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;
}
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.
I have a state of the art Macbook too, and a good monitor, but I still find light grey text hard to read. Because I have old eyes with suboptimal eyesight.
Anyway, it would be reasonable if designers tested their designs with other people on other hardware, instead of thinking "looks fine for me" … at least that's what I learned about design, user interfaces, etc ;-0
> 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.
But it would be better still if browsers offered an opt-in modern default style, to relieve us developers of having to make assumptions about the user's visual needs, which should be the domain of the user agent.
Firefox had that for a long time, hidden in a menu, but discoverable eventually. It also used to have a menu for Alternate Styles when a webpage included named LINKs to alternate styles (allowing pages to have a heavy, preferred default but offer the user other options, without needing to add a "theme picker" in the HTML somewhere).
Outside of dedicated "Reader Views" it seems like we've given up on the idea that might be something the browser should do. (Which, I appreciate the "Reader View" as an easier to discover way to do this, even if I think moving it into a "modal" with its own liminal space continues the narrative of the browser moving away from being a "user agent" to being an "application runtime".)
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.
Designers want the latitude to place ads where they're likely to be effective. How does an ads company which incidentally also provides a browser balance that interest?
> Will people (and you?) pay for Chromium browser to compensate its development? It's _expensive_, by the way, to develop that complex project.
This sounds like an argument for breaking up Alphabet, not an argument against it.
You're effectively saying that Google is using their resources to give away something really expensive, which means that no competition will ever arise.
The Linux kernel is OSS, yet magically gets build collaboratively. And many large OSS projects exist, often more complex than a browser, without a sole source, single corporate backer.
Or, gasp!, even a corporate backers at all.
The modern stack is built upon, and relies upon OSS. Even chromium draws code taken from other projects, and also, relies upon a myriad of OSS libraries and toolsets.
And beyond all of that, Firefox exists is an immensely cash flush environment.
There are endless business models, and OSS development models, without business involvement to make a browser.
The world was doing just fine before chromium came onto the scene. Chrome was pushed by Google's search engine, bundled with Chrome books, Android, on TVs, and more.
Chrome is market dominant partially due to Google's aggressive push for market share.
All this said, your fears are unfounded, and currently one of largest threats to our way of life, to freedom, to democracy, is the entire ad ecosystem.
This ecosystem, in its curent form, simply must die. There are no patches, no fixes which involve any data collection on the user, that allow for co-existance with personal freedom and democratic principles.
Ads need to be served with zero knowledge stored and collected about users, and anonomization is meaningless and proven useless.
Whether Google is broken up or not, Chrome will die soon enough, as a personal spy, and a collection device.
Google's best move right now, is to discover profitability, research how to enable it, without data collection.
Because what has happened to Meta is only the start, what is happening to Google and others in the EU, is coming to the rest of the West, and this business model is over. It's done. Finished.
Execs who are not planning for a corporate future without data collection, are poorly managing, and living in the past.
Google's best move is to see where the market will be without data collection, and use its immense power to move there now.
> 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?
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.
in my personal css framework, i only do fluid type on headers, not body text, as i found the effect to be too subtle to matter. but header text can be overwhelming on small devices without it.
then you can let the user (agent) set the default font size on root/html.
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.
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.
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.
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)`.
> 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.
I still don't get it. You don't know what users select as UI font, how can it be universal? On the other hand, you do know what font they like for text, but decide to ignore it and serve them text rendered in what they selected for buttons!
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.
I like my code to be explicit. Meaning, you are clearly defining explicity what you code should DO.
But using the ":not(:set())" operator, you're making your code implicit. Because you're telling your code what NOT to do (and instead rely on defaults or other side effects to define what will happen to your headings line-height).
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.
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.
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.
That website really grinds my gears. He's the equivalent of an HN influencer I guess, because I seem to come across him every three days. Like the Stratecherry guy. And it's so naff. It's clearly designed to look like that on purpose and it's kind of a thumbing-your-nose at your audience thing. "My words are so important that you can get fucked if you want max-width". It REALLY annoys me way more than it should. After all, it's just another dude on the internet.
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.
Fair enough. But your point requires discussing nonetheless.
You seem to suggest that fontsize should adapt to width to fill the space (seemingly to a billboard, as per your example).
If the billboard technique was used on the web, I guess we might not have more than a handful of lines on screen (on a 16:10 or so). That would disable skimming on long texts and even more, barely display a single paragraph (that's a gut guessing).
Plus, and more importantly, the distance to the screen is such that a font too big is not more readable. There's a tradeoff to he found for the fontsize that not only has to take into account the size of the screen but also the distance of the reader from the medium.
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.
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.
Why not limit the height of the columns so they fit on the screen, and wrap around to new columns lower down? So when you reach the end of the rightmost column, you scroll down the page and continue reading at the leftmost column.
I've experimented with this style on Wikipedia, with separate columns under each headline. It usually works well.
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.
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.
One browser did have amazing column break/orphan control: the IE11/Spartan (Edge Classic) renderer. It's amazing/sad how much the web regressed in CSS multi-column support rather than improved since then.
(Some group or groups at Microsoft during Windows 8 development must have passionately loved multi-column text and proper "newspaper inspired" typography and wanted to see it succeed, and they did not seem to survive the backlash against Windows 8, sadly.)
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
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."
As a user, I expect to use my browser window to resize the content in my browser. Please don’t second-guess my preference.
9X% of web sites don’t do anything sophisticated, with columns or otherwise. They hard limit the content width regardless of the user’s window size, resulting in a tiny sliver of text.
I hear this a lot, and as a user I simply don’t care.
I deliberately bought a giant high resolution monitor that I want to fully use. If I stretch my browser window full screen, I expect your web site’s content to expand to fit. I don’t care what some researcher thinks is “readable”.
I wish web developers would stop second guessing the user.
The web is optimised for the bulk of its users, that’s why 90% of the websites limit line length at a ‘researched’ optimal width, and some legacy or (legacy) tech enthousiast focussed websites wrap at the end of the available width.
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.
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.
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.
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 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.
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?
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.
Sure there is: Tiling window managers. Available for every desktop OS in some form or another. I assume people who are power users enough to have large, multiple monitors can help themselves.
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.
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.
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.
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.
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.
That offset would cut lines in half most of the times. Here is a visual diagram of one of examples of such layout:
0vh
margin
column 1 column 2
text text
text text
margin
100vh
margin
column 3 …
…
200vh
Content flows naturally through column 1, 2, 3 and so on. No lines are cut in half horizontally (in a sense of overflow-y). When a window height resizes, content reflows accordingly - no scrolling required to read a full page at any window height.
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.
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.
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:
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.
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.
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.
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
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?
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.
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.
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.
I would still appreciate an opt-in "modern" default that browser developers should feel free to change going forward. For me, it's not about minimizing download size; it's about maintaining a proper division between content and functionality, which are what I as an author and developer provide, and appearance, which should be up to the user agent, to best meet the user's needs and preferences. Sure, since I work on accessibility and am visually impaired myself, my perspective on this is skewed. Still, there are clearly others who wish the browser would have more sensible defaults.
It's probably hard to get everyone to agree on the defaults, especially the width / line-length of content. I think it makes sense to default to no width constraint, zero padding rather than picking something arbitrary. I personally start with 1em padding whereas the author seems to prefer 2em, (or 1.5, or 2ch which is roughly 1em)
Browsers used to default to adding margin/padding automatically to documents (Quirks Mode), but modern html includes a doctype to use "Standards Mode" which is more sane.
At the same time it would be nice to default to sans-serif typeface and line-height around 1.5 but it starts getting arbitrary very quickly and it's nice to build on something that doesn't change over time.
It will (maybe) matter in five years when standards have changed and that bare bones framework you grabbed isn't maintained.
IMHO it's a fairly big miss that default styling is bad, we're missing basic controls like drag & drop, and there's no native layouts like heros or hamburger menus and so on. A lot of cumulative effort has gone into reimplementing these things thousands of times.
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.
They override the CSS attributes that don't fit what they are doing now, but changing the defaults would introduce new attributes, which may not presently be overridden.
As I understand it, it won't protect you. What will protect is actually setting the value (and most sites do that, at least for those few commonly changed ones with bad defaults).
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.
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.
I feel that large text with large line heights makes small pieces of text (maybe a couple paragraphs maximum) easier to read, but makes comprehension of a larger piece of text more difficult. It makes you loose overview of the larger structure.
It's very well possible that it's all different for different people, but I much prefer having a larger piece of text in view; smaller font, smaller margins and smaller line height all help with that. Longer lines of text too. All within reason, of course.
You know how books for children have ridiculously large fonts and spacing, in stark contrast with (most) books for grown ups? It seems there is a trend now to make websites look like the books I had when I was just a little kid. I don't like it.
I was just thinking; maybe large font size, wide margins, and bigger line height may serve to inflate "engagement" because they make it more difficult for a user to be able to glance at the majority of the page and get a sense of whether it's worth reading. If scrolling and getting a big picture view of an article takes some effort, users may be more likely to either read through the content or scroll slowly. Either way, it's a win for the designers because whatever tracker being employed will provide some fancy charts to convince the suits and ties that their work "increased engagement." It may also get users to look at more ads. All of which will certainly be pitched under the idea that it's accessible.
I really hate this if that's true, because the net effect does seem to be that I have to spend more time on a page to determine if the content is garbage or not. With physical books, you could flip through pages and catch things you're interested in by glancing over large areas. The modern web, for whatever reason, is doing quite a bit to prevent that from being possible on our screens without hacking our own browsers to fix the mess.
> 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.
> 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).
> 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.
There is a huge amount of research devoted to this. Of course personal preferences exist, but there are physical constraints like the degree to which your eyes can move without turning your neck and other things. It’s somewhere between 60-120 I think, with 80 right in the sweet spot.
I can’t think of a source for this so take it as you wish but at some point in history it was attempted to mitigate this by changing the reading direction every other sentence so you’d be able to read in a continuous stream. It failed for obvious reasons.
There has been over a century of research into this. It's why newspapers print their stories in columns, instead of across the entire page, which would be easier.
> 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.
The problem with your preferred solution is that it requires changing the window width for each web page. My web IRC client requires a somewhat wide window, since it has a sidebars of channels on the left and a sidebar of users on the right, both of which provide utility and I don't want to hide. Reddit is unreadable on narrow screens. But blogs would need an 80 column window (I.e 1/4 the width of the screen) to be comfortable, unless the blog has some sidebar which makes that too narrow. I don't know about you, but I switch between tabs frequently, and I'm extremely happy that I don't have to resize my browser for every tab switch.
I keep my browser window maximised (usually on a secondary screen). I like that all web pages are more or less readable in that configuration.
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.
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.
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.
Think for a moment. This has nothing to do with tiktok. This has to do with your favorite personal website which hasn't been updated since 2001.
And any change in default styling would be immediately noticed. Pages suddenly centered, or half the width? Increased padding?
And "most people wouldn't notice" is a harmful mentality in web design which allows minorities to suffer. Most people aren't blind, either. Should we not worry about them when designing websites?
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?
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.
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"
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.
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?)
That has a small number of long columns down the entire page, which doesn't give any of the benefits of having columns. Actually, it's only worse in terms of readability, as a big factor is how well your brain can spatialize the location of what you're reading for backwards jumps or subconscious memory palace stuff. Here that's complicated by the mental overhead of "I'm halfway down the page, but the page is really twice as long as it is, so that's actually 1/4 of the way through."
Proper column layout involves limiting columns to screen height, probably by paginating. Then the reader can perceive the text as a tree of Page > Column > Paragraph > Row. Tangentially, I think there are studies positing that this, helped by the notion of physical pages in space, is what's behind the readability advantage of books.
Alternative to pagination is scroll-direction: horizontal. Now the experience is even closer to reading a book. And to Windows 8! IMO there's a shortage of novelty sites with true (non-slideshow or carousel) horizontal scrolling.
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
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.
“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?
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.
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.
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!
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.
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?
FYI: It took me an embarrassingly long time to realize that vertical margins overlap to the largest value. So doing p { padding: 1rem 0; } will only separate paragraphs by 1rem, not 2rem as you might think if you add both top and bottom margins. However, there are rules, so throw them into a display: flex and suddenly all your paragraphs have 2rem in between.
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.
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.
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.
Had a very tiny error page I was making this morning with absolutely no CSS and remembered this from 2 days ago, dropped it in and it looks great! I just added font-family Trebuchet MS :)
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.
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).
>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...
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?
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.
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.
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.
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.
A snippet that could work better in my opinion is the following: