Kevin Powell makes wonderful content. I am saddened by the negative responses here. This article is a great intro for the absolute beginner to dip their toes into CSS.
I've been writing CSS for 25 years and still I bookmarked this link. Unless you're a masochist and keep up to date with frontend dev, there is always something new to learn. I didn't know about the `color-scheme` attribute - saves me a lot of work! Never heard of `margin-inline` either.
It's kind of crazy how many properties there are... I've been working with CSS for a long time and have never heard of “margin-inline” either.
The man is a legend. I remember watching his videos when I was just starting out.
I would tolerate some js to implement dark mode with a class rather than a media query. It allows more control with a toggle if user wants some site dark some light. Edit: it's covered in the article actually.
An old article, in some regions still relevant, on why not to use system ui font family.
Interestingly Bootstrap has removed "system-ui" in 2017
https://github.com/twbs/bootstrap/pull/22377/files
but it's back in the current one:
https://github.com/twbs/bootstrap/blob/main/scss/_variables....
It was added back in 2020 by https://github.com/twbs/bootstrap/pull/30561
Unfortunate, because I like websites using my font choice
“sans-serif”, “serif” and “monospace” still resolve to your chosen/preferred font too.
So the strongly worded argument is just because on one locale of an unsupported proprietary system, which renders their entire desktop and applications with an abysmal font, you might get your website rendered with an abysmal font?
What if you get a terrible font choice on the standard `font-family: sans-serif`? Should all my visitors have to download 100 KB of external fonts because Microsoft are inept?
Meh, for my personal website, I'll keep using system-ui.
The issue is broader than that. The article's addendum points out that both Bootstrap and GitHub removed system-ui from their font stack, and another comment in this subthread mentions that Bluesky has done the same. In each case there's a link to comments and/or a PR which gives reasons.
Bootstrap later added it back, but in the PR discussion it was pointed out that this is still an issue on Chinese and Korean Windows, at least.
> Meh, for my personal website, I'll keep using system-ui.
Well sure, but in that case you could also use your own personal language that no-one else knows.
I wasn't aware of this phenomenon. I did some digging and this is apparently indeed still an issue on CJK Windows.
This PR to Bluesky has more recent discussion about it and offers workarounds:
Interesting, though I'm not sure I want to take font advice from a website which such an awful st ligature!
Or if you want to go even more extreme. Without CSS: https://nocss.club/ Without HTML: https://no-html.club
Something similar to plain text can be created with the <pre> tag in HTML if you like to add metadata to your page.
Make sure to linewrap on your prefered 50-70ch limit for our reading pleasure, otherwise I will be adding the style="width:70ch" locally to your body tag.
font-family: System UI;
font-family: system-ui;
Also, if the name had been two words, it would need to be quoted, right?
e.g. this wouldn't work either?
font-family: Times New Roman;
The matching is very permissive, and the example just works: https://codepen.io/leo848blume/pen/RNrppdj
For me it defaults to Times New Roman when it doesn't understand the font, so to check if it indeed works I had to change the default font in my browser
yknow what's also cool is specifying the font you want, so your website looks the way you want it to. This is generally referred to as "design" and, while considered an antipattern among people who entirely spurn aesthetics, it has something like a 3000 year history of getting people to engage with your content, assuming you have some.
Or you can leave the default so that the reader gets the font they want, because they are the one reading it so it doesn't really matter what the author thinks looks good unless it is somehow relevant to the text.
How often is the default the font the reader wants, as opposed to the one that just comes with their OS?
Counterpoint: I never notice what font I'm reading unless someone changed it to an ugly one.
This is generally referred to as "what pretty much everyone else thinks about your stupid font".
Counter-counterpoint (from someone who minored in typography): The purpose of a font is to be transparent as glass to the data being transmitted to your eyes. That is why if you notice a font and think it's stupid, the designer has made a mistake. Also if you notice a font because the designer left it in your default Times New Roman, that is a mistake. If a layout artist does a good job, you should never notice a font in the body of text you're reading. You should only notice a font occasionally if they really want to highlight a header or something. The font is a carrier of information - lighting on the stage, not the main actor. And it must never assume the role of an actor unless the designer specifically intends it to.
If you're a coder, you understand this extremely well, implicitly: You set up your IDE fonts and colors in a way that helps you see through the code. You don't want to be looking at letter forms when you're trying to grok something.
This is also the job of designers: Creating typefaces and layouts so that people see through the text, to the meaning.
Leaving your website in the system standard font basically screams "I do not give a shit about what is written here" and also possibly "I run a quacky conspiracy website" and me and most people will scroll past your writing as quickly as possible.
But there is no font that has no connotation. Every font has subconscious meanings to readers. Knowing what these are is important. Times New Roman screams, "I'm still using Windows 98". Whereas Comic Sans screams, "I work in a shitty real estate office". Simple examples. But the art is much deeper than that, because Optima Sans and Univers read very differently to the general public in ways that I could spend another few pages explaining. Every choice you make with type implies something that sits as a layer on top of the text that's written in that typography. But if you do your job well, you make the artisanship transparent, and allow the content to shine.
This is why typography is a bit of a black art, and why it's powerful. It subtly influences people in ways they don't notice and don't understand, while they're absorbing written information. Dig:
https://en.wikipedia.org/wiki/Antiqua%E2%80%93Fraktur_disput...
I was with you up to "I do not give a shit"
What font has been more tested for quick pass-through of data than the default system fonts? To me, this simply screams "This is the main body. You can find your information here"
No. System fonts have completely different reasons for existing than fonts you would want to use to communicate with the public. System fonts were initially created for legibility at certain screen resolutions, for dot-matrix printers, etc.
But it's worse than that. What I'm trying to explain is that every typeface, even the most innocuous one gives subtle, subconscious cues to the readers. Every font. The associations can range from some childhood Disney movie to a font you saw at a hospital while you were having a really serious medical problem. But after 30 years of everyone on earth looking at system fonts, readers now get the cue when they see a system font that they are looking at a shitty MS Word document their boss just pinned to the felt board. Or else they assume the author did not bother or did not have the skill to make it look good.
I'm a writer. I've written 6 novels. I love words and ideas, unencumbered by visuals. I've written at least 500k LoC on in my life, maybe double that, I don't know. That's all pure thought and logic. So I get the agitation: All I want to get across to you, my reader, my employer, is the information, my distilled ideas. That's all that's important. Read it or don't, I don't care, it's good and the logic works.
I'm also trained as a designer. My first several jobs were in ad agencies, since I was 14 years old as an intern. How will people subconsciously interpret the ancillary visual aspects of this is something I learned early on: what will they construe? Because bad design can prejudice someone against a great piece of writing, and vice-versa.
No visual thing you can make has zero cultural reference; everything you make that other people will see drags some bundle of pre-understood tropes into it. You can't make one without referencing some aspect of culture that affected you. The job of a designer - what makes a designer different from someone who just has aesthetic chops and can tell if a web page looks good - what constitutes the black arts of design - is to know every single cultural trope you are dragging in front of the customer's target audience and to understand how it will psychologically affect their state while they read the content, so you know how to trigger certain emotional resonances in them while they absorb the information the client is trying to get across.
That's what "giving a shit" means in terms of communicating visually.
Could you recommend any good books, video series, blogs, or other training for those that who need to understand fonts at your level professionally? Or maybe you could write one?
I know someone that is trying to break into this space but doesn’t have the past experience, and it’s almost impossible to catch up. I’d love to provide them with a resource.
In defense of Comic Sans, it’s not just for realtor pages. It can be effective for local, casual communication by appearing friendly and approachable. If I saw a flyer pinned to a corkboard advertising a fish and chips special in Comic Sans in a seaside town, my mouth would be watering, because I’d know that’s a mom and pop place that focuses more on the food and taking care of people than the marketing.
Facebook cares, right? Given their impact, their resources, their objectives, they of all companies must "give a shit". Right?
So here are the fonts of the Facebook posts listed on a Facebook user's wall:
> Helvetica, Arial, sans-serif
> system-ui, -apple-system, BlinkMacSystemFont, Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif
Observe how there's no custom font, no weird font, and no "associations with some childhood Disney movie" to be found on a page seen and used by 2+ billions of users daily.
Funny you should bring that up, because FB is a perfect example of a visual relic from the late '00s which didn't age well. Much of the post-dot-com-crash world of design in the web and early mobile space was defined by a rejection of the excessive - wild crazy idiotic irreverent and often incoherent - typography and design of the '90s web. So, super basic fonts, white backgrounds, and what they thought was "minimalism". However, because they relied on the tooling rather than creating their own cues, (and also because their UI turned into a towering nightmare of crap) Facebook looks extremely dated to most people's eyes now. It looks like a 20 year old website...and not a particularly good one.
My outside opinion is that Meta does not give a shit at all about how Facebook looks at this point. I'm not here to make the case that revolutionizing their design would improve their onboarding rate now or something. I'm making the case that if you are some nobody with no network effects and no billion dollars, you have a better chance at getting people to read your content if you take the time to (a) get it out of system-ui fonts and (b) make a bunch of other aesthetic decisions that trigger certain pleasing feelings in your audience.
When I think of quirky conspiracy sites, I picture yellow-on-blue text and bright red text inside a blink element and links at the bottom to lycos and altavista.
This is the example of people trying too hard to make things "scream". Just plain Times New Roman or system font conveys a slightly different form of illiteracy...
Eric Meyer, the CSS guru of all times
I wouldn’t have made any sense of the CSS box model without him back in 2002.
Ironically, that page does not render well on Chrome/Windows, at ~1920x2160 (that's half a 27" 3840x2160 monitor), with an excessive empty margin on the left pushing the book list to the right, causing a horizontal scrollbar, which when scrolled to its rightmost causes the right side of the website to scroll and leave an awkward empty space.
I guess this says something about the evolution of web standards.
I’ve seen this one a few times and something about it doesn’t agree with my eye. It’s somehow in the weird awkward zone of not old enough to truly feel simple and functional, but not new enough to look modern minimal/clean. Might just be the font also, but I don’t find it very easy to read. Could just be me though.
I mean, it's a reset, not a complete style. You're supposed to apply your styles on top (well, underneath, as styles cascade; but hopefully you know what i meant).
CSS reset stylesheets are just the first step towards unmaintainable 'add to' stylesheets, laced with the word 'important' everywhere.
I think it is best to take the Kevin Powell approach, as per the article, where you will be leaning in on browser defaults. Clearly you have to do your cross-browser and cross-platform testing, however, after almost two decades of everything coming with a CSS reset lurking in the stylesheets somewhere and mountains of cruft on top (remember frameworks), it is so liberating to get rid of the lot and to use the modern CSS tools such as CSS Grid and CSS variables.
Nowadays CSS is my favourite 'LEGO set' and I love the creative opportunities. This contrasts with the olden days where I hated the hacks based on hacks that was CSS. I have gone from practically drowning despite wearing armbands to being able to effortlessly glide through the water. CSS reset is one of those 'armbands' and it takes courage to go without such things. Same goes for those awful CSS pre-processor things.
I've recently chosen plain CSS for a project at work. Haven't got that far yet as it's been mostly backend work so far but for what had been done it's been good. I'm just a bit worried that it's going to look wrong in different browsers but I guess I'll burn that bridge when I get to it. Luckily I don't think there's going to be any safari users.
Note this website itself uses way more CSS than what it is proposing in the article. I count at least 300 lines all up. Still a good baseline though.
Thanks for doing the detective work for your friends on mobile. This fact severely diminishes the message of this medium. I’ll check for myself later; but until then, I will hope it leverages the techniques it describes.
The article emphasizes multiple times this is a baseline example to be built upon
What are good static site generators (SSGs) to create a simple minimalist academic-like website?
It seems Astro or Hugo (potentially with Tailwind to customize CSS) are good options. Astro felt more complex than needed, on the other hand, writing html/css manually doesn’t work well either (predefined layouts and easy to use style customization options would be needed). I couldn’t find a suitable Astro theme either (most themes seem to be made for companies, or needlessly fancy, and a few for individual blogs).
In the process of figuring this out, I was surprised how complicated designing a website has become. There are so many frameworks, components, integrations and significant dependancies that I wondered how web developers keep up in this ecosystem.
If you really believe things were easier in the past, then just do what you did back then. It'll all still work.
Ask LLM to write a 50 LOC program to convert directory of markdown files to directory of html files using pandoc.
This actually might be the "correct" solution these days. Pre-LLMs I wrote myself a python script to that converts markdown to html with custom headers and footers and rest of the junk, but today I would for sure give LLM a go first and see if what it produces.
Having done a fair amount of LLM webpage generation, it does an okay job, but repeats a lot of "best practices" that are a few years out of date. Specifically around meta tags.
If I were doing this, I would have it do Deep Research or similar on the most minimal, efficient set of tags to include in the `head` tag in late 2025.
It's possible you can get away with a bunch of .md files, but you will need a file to store site-wide metadata and/or YAML "front matter" in the MD to define page-specific variables.
Quarto (https://quarto.org/) is well regarded in academic publishing and supports website projects: https://quarto.org/docs/websites/.
Thanks for mentioning it, it has relevant templates, including an interesting one for a class.
Maybe look into Eleventy [0] or Zola [1]. Both are relatively recent developments and have a skilled and forward thinking userbase.
It is a natural entropy of web system.
We could not hope that everything would remain simple. Thanks for all the open standards and frameworks that we don't have to license.
And yes, it is a paralysis of choice.
Not that you need more choices, but franklin.jl hit my sweet spot for “handles math and code inline well, otherwise is clean and gets out of my way”
This line of conversation is distracting people from the embarrassing state of the WWW.
If anything good is left outside the temples of Facebook, etc, it's not much, and I'm embarrassed.
There are many threads here on HN about that as well. But this thread here is about CSS styling.
No need for a SSG. Just copy something like this: https://thebestmotherfucking.website and make every page by hand like you are some 80 year old greybeard.
Yeah, I got fed up with all the dependencies and processes and workflows and configurations and just manually made my site like it's 2004, just hand-written HTML+CSS+JS. As long as it's a small personal site, this is very robust and there is no constant churn and deprecations and change for the sake of change.
I have a couple of 100% handwritten sites as well. The challenge is when they go beyond about a dozen pages. If you want to change something across pages that isn't a find & replace, like adding a meta tag, it starts to be a drag. I'm going to be converting one of those sites to Swift Publish soon, as it's a low-dependency framework that hasn't been updated in years.
I experimented with customizing a flat page by writing HTML and CSS manually, with some help from LLMs. Using this approach, it’s possible to create something resembling the website you linked.
The result is decent, though the organization of the long page could be improved. In my view, a good personal website would include space for a photo, name, and affiliation, along with a simple menu for sections like biography, publication, projects, with a professional style (font and colors), but no more complex. The publication page could have a style for presenting papers in a clean well-formatted list. That may require a theme that comes with a layout and a degree of customization and novelty.
A lot of themes I looked into are not quite professional.
if you've been ai-pilled, just have Claude generate it for you from the .MD files you wrote by hand
> img { max-width: 100%; }
This must be paired with `height: auto`, or your image’s aspect ratio will be messed up if the width gets capped.
> img, svg, video { max-width: 100%; }
… but beware, Chrome 141 has CSS width/height work on nested SVG elements, and auto is being miscalculated. Workaround is to change the `svg` to `svg:where(:not(svg svg))`.
> We’ll just use a basic system-ui for this example. It has pretty good support these days, and looks good on every system without having to worry about loading in any extra fonts.
Please don’t. system-ui is a font for matching the system UI. The UI font is often not good for long content, and in some less common OS/language combinations it’s almost unusable. Stick with sans-serif if that’s what you want. People have been using system-ui as a proxy for a maybe-better sans-serif. This is not what it is, and it is bad to use it so.
> In general, the font-size is a little small as well, so we can bump it up
This is acceptable for larger screens. I reckon 18–20px is a reasonable target, so 1.25rem is fine. But on small screens, please don’t go above 1rem, it’s the platform’s customary size and you don’t have the space to waste.
> the default line-height is always a bit tight, so anything within the 1.5 to 1.7 range should do
Ouch. 1.7 is huge on smaller displays. If you want a single value, I suggest 1.4–1.5. If you want to vary by width, 1.4 on small displays up to 1.6 on large will be reasonable.
> font-family: System UI;
That’s a second glaring error you should instantly observe if you use the stylesheet. I am not encouraged about its quality.
> Some people prefer a dark system theme, but light website themes, and vice-versa.
Sensible browsers let you separate the two. Firefox defaults to having content follow the system theme, but you can change it to just light or just dark.
> main { max-width: min(70ch, 100% - 4rem); margin-inline: auto; }
This is effectively giving a minimum 2rem margin. Well, actually 2rem + 8px once including the default body margin. That’s way too much, and applied in the wrong way.
If you wanted to apply it to the main element, it would be easier and I think more logical to use padding:
main {
max-width: 70ch;
padding-inline: 2rem;
margin-inline: auto;
}
body {
margin: 1rem;
}
main {
max-width: 70ch;
margin-inline: auto;
}
Realistically much of those layout differences and fine tunings would be handled by media queries, but by that point the amount of code compared to a decently written website with a "regular" amount of CSS would be pretty minimal.
Still need a lot of the reset stuff - to at least get a baseline consistency.
If you only target modern (5 year window) that one popular reset can be trimmed.
It's not about consistency, it's about basic readability. On different platforms / browsers things will differ, but remain readable. Not necessarily aesthetically perfect, but more usable than with defaults from 1994.
Resets are overrated. You don't really need all that much consistency between platforms when you're talking about a minimal setup for something like a personal blog like the OP is doing. Resetting for consistency is mostly just designer-brain not being able to accept that things can look slightly different in different places and be completely fine.
Yes! That's the whole "when in Rome" idea but I've never gotten any team at $work to accept that.
A drop down menu on an iPhone SE is supposed to look different than on an ultra wide monitor on a desktop!
I am personally a big fan of the https://every-layout.dev philosophy.
I love these websites as they highlight not only the complexity of modern web design but also that the web is made for writing content. There are so many variations on this "motherfuckingwebsite" concept with a lot of different opinions that I would recommend everyone interested in webdesign to google that term and read through a bunch of them.
Yep, this is my standard.
>> ...on an iMac or a motherfucking Tamagotchi...
LOL.
Interesting comparison in the context of the top rated discussion about setting width. I'm with @kmoser. The original actually looks better--to me--and I like that I can manage it.
I think the first one is better. What's the purpose of having all the text crammed in a thin column in the middle of the page anyway? If I'm reading the page on a wide screen, let me use all of the motherfucking screen.
I have posted a link to a research paper in a different comment, however it generally accepted that 50-70 CPL (characters per line) is optimal for reading. Fast readers preferring shorter lines.
Layout wise this is why newspapers arrange their text in columns and books also generally comply with this restriction.
Eyeball muscle speed limits how fast you can read or, well; at least for me). My eyes simply can't go left and right as fast as I can read, plus keeping track of which line I'm on is extra overhead. YMMV.
max-width: min(70ch, 100% - 4rem); Results in one tiny column of text on desktop, both sides are empty margins. Its an interface exclusively for mobile phones.
`100% - 4rem` is for mobile. `70ch` is for desktop. The tiny column is intentional. It offers a better default reading experience than a widescreen monitor full of text.
It's an implementation of an old recommendation to never have more than 80 characters per line, ostensibly to limit horizontal eye movement but mostly stemming from legacy 80-character terminals and punch cards.
The value of that recommendation is rather dubious considering today's high-resolution displays that allow for smaller font sizes. 80 readable characters at 768p are not the same as 80 readable characters at 4K.
The 50-70 CPL is, in general, just well suited to reading. This has been researched, and by quickly searching I can find the following (beautifully layed out) paper: https://journals.uc.edu/index.php/vl/article/view/5765
To my surprise the paper actually concludes that fast readers prefer shorter line length.
Edit: Usually books are also more or less in compliance with this convention and those where around since before computers where a thing.
As someone who uses screen zoom tools constantly, I vote in favour of the 80ch column width recommendation. If you want to support extra wide monitors, consider using multiple columns, rather than a single, wider one.
Multiple columns don't really work with websites, as web content almost always going to be vertically scrollable.
Columns work great for things like a navigation sidebar or an image grid, but it just doesn't play nice with long-form blog content.
It actually goes back to mechanical typewriters, which were limited to 70 to 90 characters per line. Commonly used punch cards also had 80 columns. Both were the inspiration for the 80 characters in computer terminals.
Weeel, actually! ... It dates back to the early days of the printing press, and has been a general convention since then.
Rules can be broken, but not without consequence.
58 bytes of CSS to look great nearly everywhere https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad...
100 bytes: https://www.swyx.io/css-100-bytes
(i collect a lot of these design advice. more: https://github.com/swyxio/spark-joy/)
Like, this is a clever enough way to play golf and find an average that works between major browsers and come out with something that should generally be legible. "Look great" is a bit of hyperbole, because it'll always look like shit. Legible shit, probably.
> ...it is a best practice to allow users to manually toggle the color-scheme as well.
> Some people prefer a dark system theme, but light website themes, and vice-versa.
Is this common? Why don't those people configure their browser to use a light theme? Or if they prefer different websites to be different themes, use a browser plugin?
...a more general issue is that every website has to re-implement many things. It's a small issue, but it discourages newcomers, and the redundancy on every website adds up. Ideally, a site should look decent with no CSS, but in order to support legacy sites (a good thing) the default styles are the legacy ones (a bad thing); keeping what even back then would probably be considered "bugs" (except, like how crimes become legal, they managed to become "features" by being discovered too late), such as large images causing horizontal overflow. Honestly, is there a single good reason to make the default font Times New Roman 16px?
Browsers _should_ have been set up to allow per-site toggling of the dark mode CSS preference, much like how they allow per-site zooming.
Configuring the whole browser to have a light theme is the wrong solution - some websites look better in dark mode and some look better in light mode. Also, the browser setting also affects the UI of the browser itself, not just website contents.
These are of course solvable problems, but the most obvious and trivial way to handle this is just to store an extra flag per-website in the same place as the zoom preference.
Obligatory "there is a way, it's just that your browser refuses to implement it".
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
Is that persistent? As in, if I select a style sheet for a website, will it use that same style sheet if I reload the website or navigate back at a later date? Browsers do this all the time with zoom levels, but it would be really useful for much more than that.
Browser extension that do that require full access to the contents of the website. That’s why some people decide not to use those extension.
If I want to use an extension that needs full permissions on sensitive websites, I just download it and install it manually after looking at the source code. I rarely have to update them, and I'm not worried about future injections at that point.
It’s been a while since i mucked around with browser extensions, but i assume they don’t have network access by default. Surely there is an extension with page read access and without network access, no?
Edit: this looks pretty harmless https://github.com/the-code-rider/dark-theme-extension/blob/...
Browser extensions that modify webpages are just javascript code injected in the page; They can definitely access the internet.
I don’t think that’s an accurate description of browser extensions. Content scripts work that way, and many browser extensions include content scripts… but not all browser extensions use content scripts.
Anyway, a quick readthru of the code of the extension i linked shows it does use content scripts, but also it doesn’t do any network access.
Listen to this guy defend trash web browsers to support google! Tell me more about how traditional forums are unacceptable and your daddy with billions for shareholders but not customers has the right idea.
I think the default styles are OK; I do not think they are so bad as some people say. However, the thing I would add (for web pages that have pictures) would be:
img { max-width: 100%; }
I prefer light at day and dark at night. I have scheduler that turns on OS like that and all other stuff follows (e.g. apps with auto setting and browser with dark reader).
This is particularly important on mobile, as dark is very reflective at day, and light blinds you at night.
I like this. But a screenshot after each step would be nice.
Ok but what happened after that. It's been years with no word.
I didn't even read the article, but the answer is clearly zero.
Default styles are barely usable on mobile, especially when it comes to images. They said “decent looking,” after all.
Browsers default to serif.
Would this seriously stop you from reading something? How on earth did you survive your college textbooks and lecture slides?
Yes it would. People have no choice but to read college textbooks. They do have a choice when it comes to the usability of your site. You might not care, but you are not your users.
Serif is meant to be printed, on paper, with the ridiculous DPI of printers.
These fonts have not been designed for pixelated displays. Yes, it's better on Retina / HiDPI displays (I even enjoy some serif fonts on those), but those have to be designed with pixels in mind. But they usually are atrocious on "classic" pixel densities.
And tangent: the print industry has a much wider typeface selection than "just" Times New Roman, which is rather rare in my personal experience (sample size of one, though).
if people hate it that much then maybe we should consider changing the default?
"we" the applooglezilla mediators..
Which is an option browsers give you.
Improve the readability and bring clarity, then work on modernity.
More sites should be like this
Why? There’s a huge amount of JavaScript bloat, but I’ve never really had an issue with css on any site. If anything, I wish more sites supported a dark mode.
CSS bloat is there also, perhaps not as big a deal. I think that complexity is the main enemy (both JS and CSS and React and npm …) or over on the WordPress plugin morass. I like that the OP is aiming for a simpler world, kind of like the HTMX and Pico CSS ideas that I currently prefer.
> perhaps not as big a deal
If I load CNN.com right now and scroll to the bottom, I receive 26.9 MB over the wire.
Of that, 52.2 kB are CSS.
5,547 kB are JS.
CSS bloat is not as big a deal.
52K of CSS should be an opportunity for optimization but you're right, we're so far gone on javascript we should really focus on the mountains before the molehills.
Use lite.cnn.com instead.
I'm curious how much of that JS is functional and how much is adware.
The adware is typically injected onto the page by 3rd parties so it's nothing the web devs can do anything about.
> how much of that JS is functional
Lots of sites become more functional with JS disabled.
It is the web devs' responsibility to say no to bs. However, very few do, and some even welcome the bloat as a job guarantee.
Tailwind v4 tree shakes too so even thats not technically bloated anymore
Tree shaking is actually a sign of bloat. It is a tool on top of a bloated mess, to fix that mess. It would be better not to make a mess in the first place.
Tree shaking and bloat are different concerns. And, technically, is tailwind tree shaking? I thought they only built styles that the compiler could find being used rather than removing styles the compiler couldn't find being used.
Tree-shaking really only works for languages that are designed to be tree-shakable, which no web language is.
Why not? Code is liability. Less code to maintain also enhance engineer's ability to reason the code and implement better website.
Code is a liability lends well to tech debt, wasting time refactoring css to reduce the size by tens of kilobytes has no real world return on investment in most cases.
But even a small bit of css can slow down page rendering. https://www.granola.ai/blog/dont-animate-height
If a small amount of CSS can, then so can a similarly small amount of JS, since JS can set styles.
I think that’s moot. Everyone agrees there’s a pretty big bloat problem in JS, not so much because of single costly lines (though, they exist) and more the entire ecosystem of includes
That article refers to literally one line of css. Cutting down the volume of css does not have value, cutting down on animations and other expensive directives does.
this is a must
* { box-sizing: border-box }
I prefer the following to ensure the interoperability of external libraries:
`body, html { box-sizing: border-box } * { box-sizing: inherit }`
The least amount can be zero.
reset.css
I still believe there should be a `unset user agent styles` that could be set somewhere in the document. Why make devs ship reset CSS if they are going to be undoing all your pretty janky default styles anyway? Here's a list of arguments and refutations I know this suggestion is going to get:
> But a browser should have a minimal set of default styles!
They always have done. My suggestion does not affect that.
> Websites shouldn't be able to turn off default stylings!
Many already literally are, either through CSS resets or simply doing h1 { color: red }.
> What's the point!?
There's a dozen or so popular CSS resets that literally overrides all the browser default styles. It would save time and data to not ship the same styles over and over again.
> It's impossible!
No, no it is not. Simply inform the browser to apply no styling at all. This would be a straightforward feature for browser implementors to create.
What about
all: unset;Unfortunately efficient CSS is a lost cause. I love doing this kind of work and making single page efficient product. Unfortunately no one cares how you spend your bytes because it's a battle between sociopaths and everyone tired of their shit.
I could make cool websites for the losers who rob everyone around them but the type of people who make a business out of online behavior are actually terrible greedy folks.
You are speaking from my soul, man.
The least amount of CSS for a decent looking site is prefers-color-scheme: dark.
You hear this, HN?
Please don't do that. I should be the one to decide whether I read in dark or light mode. If you want dark mode, change your browser defaults. Leave us normal people alone.
Sure but right now we can't choose right? And no, I don't want to use any extension for a feature that simple.
If a website forces a dark theme on me, I just close it. I hate dark themes because they make all text an unreadable blurry mess for me.
Just use dark reader, you can't educate the world.
> To make the website more readable, we’ll limit the content width
Please don't do this. Despite what usability studies say, I prefer wide content over scrolling every few seconds and having to make my eyes follow the moving text. I, the user, can already control the content width by resizing my browser, thank you very much.
Resizing your browser resizes your browser. The rest of the page content, the tab you're on (in every major browser), and the window holding those tabs, all resize with it. This is so misguided, I can't help but consider it to be just a thin veiled plea at making sites more frustrating for everyone in support of your supposed preference.
I'd know, because this is exactly how I temporarily "fix" rubbish, outdated sites that have all their 80 column text appear on the left: I resize my browser window to move the text in to the center of my display. It's immensely annoying. It's annoying enough that sometimes it compels me to spend the (short but anger filled) time and override the site's stylesheet rather. At which point, may as well have served me some plain text instead. Speaking of, I do sometimes just toggle reader mode on too.
If you personally don't like how wide a text is, you can of course apply your own preference in various ways: (1) responsive mode, (2) user stylesheets, (3) reader mode. Maybe there are others as well. But don't try to force your preference onto everyone please.
> you can of course apply your own preference in various ways
See above...
> But don't try to force your preference onto everyone please.
Limiting column width is already the predominantly established pattern, even all the way back to print, so this is nonsensical. Unless I interpret it as the cheap, childish clapback that it is. Which I have to say, really befits the take.
So anything that is not like the way things are now, is automatically nonsensical? That seems a very ... progressive mindset. And everything anyone else says, that goes against current trend is ... childish clapback? Wow. You sir are truly an enlightened being. Thanks for sharing your wisdom with us today.
> So anything that is not like the way things are now, is automatically nonsensical?
No. Claiming that I'm trying to force something to happen that is already the given way is what's nonsensical. Because you see, it has already happened. I can at most reinforce it, contributing to it remaining established, which is really not the model you've been playing along in.
> That seems a very ... progressive mindset.
I'd go as far as to say it's downright tautological!
> And everything anyone else says, that goes against current trend is ... childish clapback?
No. Riding off what I said to coyly make your point instead of just directly sharing them, in order to get a rise out of the other, is what constitutes the childish clapback there. You know, like what you're doing again.
> Wow. You sir are truly an enlightened being.
Unfortunately, I fall way short of that. If I was truly enlightened, I wouldn't give conversations like this the time of day, as they're intentionally crafted to be asinine, to waste people's time and care. Or is that not your whole idea?
Because I have to say, could have fooled me! Repeating after me that I have the amazing options of simulating a different device, injecting my own styling, or using reader mode, blatantly ignoring that these are workarounds and right after I did explicitly list 2/3rds of them off, surely you can appreciate comes across as more than just a little insulting and disingenuous. So does reflecting back the subjectivity of the topic, while conveniently ignoring that e.g. stylesheet injection or browser extension use go both ways, and they could use those too. So is everything just fine as is then, or is there a change needed? Make up your mind, please?
> Thanks for sharing your wisdom with us today.
Cheers! I would say any time, but hopefully for not much longer.
> I, the user, can already control the content width by resizing my browser, thank you very much.
But I, the user, do not. And I will not. Because there are a bazillion websites that I want to browse in a maximized browser window. So limiting the content width help people like me who cannot/would not resize my browser.
Please don't listen to this. You are in an incredibly small minority with that preference. Most readers prefer a line length of 50-75 characters, similar to a novel. Newspaper columns are even narrower than that for easier scanning. If I have to move my head or resize my browser to read your content, it's poorly formatted.
> I, the user, can already control the content width by resizing my browser, thank you very much.
Nearly every techie and non-techie I know has a bazillion tabs open 100% of the time. The likelihood that even the top 10 are all single-column text is 0%. And I'd sooner read web pages hot off a dot matrix printer than constantly pecking at the edge of an un-maximized window, resizing it like some kind of meth-addled chicken.
Note: I may be overstating slightly for effect.
The art of opening windows instead of tabs appears to have been lost to time.
Oh the irony that lots complain that mainstream OSes window managers are oh so poor when all people seem to be able to do is fullscreen everything and then tab around.
Meanwhile, macOS gave up on the absolutely brilliant if misunderstood Mac OS X green + a.k.a "zoom" which would miraculously resize windows to the maximum size of its content but no more.
> macOS gave up on the absolutely brilliant if misunderstood Mac OS X green + a.k.a "zoom"
It’s still there. Window > Zoom from the menu bar, or ⌥ + click the green window button.
It's almost like window management is primarily being used for facilitating inter-app interactions, rather than intra-app interactions... almost like tabs were invented for a reason...
Did people lose the old art, or have you never managed to grasp the "new" one?
It wouldn't be a problem in the first place if we hadn't migrated away from 4:3 aspect monitors to these ridiculous widescreen things. ;)
Maybe someone should invent a tiling tab manager for the web browser.
I actually prefer limited content width for prose content. Full width content on wide screens requires moving eyes all the way from one side to another for every line.
The real problem is that the browser won't let you control the width of a tab without resizing the browser window, which is a bit fiddly, exposes stuff behind the window, and makes you resize the window again and again when moving between tabs.
If you could easily shrink a tab, I would prefer websites to not limit text width. Since you can't, I sorta prefer them to do it, though it's much worse than the user controlling it in a nice per tab way
(1) reader mode (made for that purpose)
(2) user stylesheets (permanent solution, but you could have multiple and use an extension to enable disable different widths)
(3) responsive mode (in dev tools, most flexible, but most cumbersome to reach)
(4) Other extensions
There are easy ways to resize the viewport, so the premise is false.
you can "pop out" a single tab to a new window.
You could use the browser's dev tools to emulate a narrower viewport.
It should also be almost trivial to create a browser extension for this, if it doesn't even exist yet.
I use the developer tools right panel for that.
I use firefox's sidebar (vertical tabs) which makes resizing quite natural imo
Right, if you have wide columns then you have to move eyes BOTH from left to right AND when you reach the end of the line you have to move them back to left AND down to next line. Whereas if the line is narrow enough to read without moving eyes horizontally you only need to move your eyes down after each line.
This bookmarklet to shrink the width has been in my toolbox for a long time: javascript:(function(){%20var%20myBody%20=%20document.getElementsByTagName('body')[0];%20var%20myBodyWidth%20=%20myBody.style.width;%20if%20(!myBodyWidth%20||%20myBodyWidth%20===%20'auto'%20||%20myBodyWidth%20===%20'inherit')%20{%20myBody.style.width%20=%20'1200px';%20myBody.style.marginLeft%20=%20'auto';%20myBody.style.marginRight%20=%20'auto';%20myBody.style.position%20=%20'relative';%20myBody.style.cssFloat%20=%20'none';%20}%20else%20{%20myBody.style.width%20=%20'auto';%20myBody.style.position%20=%20'static';%20}%20})();
Thanks that's an interesting trick.
This is beautified if somebody wants to see how it is done.
function() {
var myBody = document.getElementsByTagName('body')[0];
var myBodyWidth = myBody.style.width;
if (!myBodyWidth || myBodyWidth === 'auto' || myBodyWidth === 'inherit') {
myBody.style.width = '1200px';
myBody.style.marginLeft = 'auto';
myBody.style.marginRight = 'auto';
myBody.style.position = 'relative';
myBody.style.cssFloat = 'none';
} else {
myBody.style.width = 'auto';
myBody.style.position = 'static';
}
}This summarizes the web ghetto pretty neatly.
Right, there is a reason why print magazines use columns even for long multi-page articles. With long lines, readers tend to get lost when navigating from the end of one line to the start of the next line, and the reading experience suffers. You can help this somehow by increasing spacing between the lines, but the general recommendation is to have 45-75 characters per line.
This being the top comment really shows you cannot take HN advice seriously.
It feels so much against the spirit of the site as well. "Ignore the actual research in favour of my N=1 preference, and don't worry your users will jump through various non-obvious UX hoops to get the same behaviour that could have been default."
Actually, you are doing the exact thing you criticize. You are suggesting to prescribe your personal preference to users, while they argued for not doing so and letting the user choose, while leaving it unspecified, how the user is supposed to make that choice of viewport/content width.
I much more sympathize with them tbh. Let browser makers figure out how to give the easy to use controls to users. Let them add some override for the number of columns and columns max width and gap and so on. Or let extensions handle that. Whatever. But don't rely on each site prescribing how I have to read it.
What am I doing exactly? I'm saying to take UX studies more seriously than anecdotal preference, and to recognise that very few people are going to manually resize their viewport to navigate your website.
If your website requires a browser extension to be nicely readable you are doing it wrong
I felt it was pretty fitting for HN to find a comment like this at the top. I'll have to admit it's also fitting to find one like yours below it. That it's the most discussed argument is the cherry on top. The comment section feels like a carousel for nearly a decade now.
Have you ever read a newspaper? Or you don't even have to read one, just look at the layout
I don't mind limiting content-width. I do mind the trinity of plz-scroll-to-read-two-words: content-width limiting, bigger fonts, bigger line height.
Most websites abuse the latter two, and makes my mouse wheel spin like a meth addict without a dose.
Please keep the default font size. It's aligned with the system's size, and is precisely what a browser's zoom function will scale.
I mean it’s in your comment. The usability studies mean more people prefer it the other way. You SHOULD cater your default style to something that’s more widely usable.
And no, I absolutely do NOT want the content I’m reading to be full width on my 32” monitor. I have loads of other sites that I’m jumping between which do need to take up the full space.
I mean newspapers have a narrower columnar layout than any website and they’ve been around for centuries.
I've been on the internet since the 90s and this might be the worst opinion I've ever encountered.
you can also just display text with multicolumn.
solves the paragraph width "usability" and uses the full screen space
not sure why its never used.. I also really dislike the current trend of giant white sidebars
Because it would make scrolling more frequent? For multicolumn text to reduce scrolling, the column height would have to match the available viewport height. And if your text exceeds what can fit in multiple columns on a single screenful, scrolling also becomes awkward, because you'd have to scroll exactly to the next screenful to have any consistency. Multiple text columns only make sense on extremely restricted layouts, or where the volume are entirely independent instead of a single flowing piece of text, or where there is still a direct horizontal relationship (like annotations or translations beside the main text).
> And if your text exceeds what can fit in multiple columns on a single screenful, scrolling also becomes awkward, because you'd have to scroll exactly to the next screenful to have any consistency.
That used to be a solved problem, before every website started to include multiple oversized "dickbars" floating over the real content and taking up 15+% of the available vertical space. Pressing the "Page Down" button on a keyboard would scroll down by exactly one screenfull. We also used to have scrollbars that on most operating systems would let you scroll down by exactly one screenfull with a single click.
>you'd have to scroll exactly to the next screenful to have any consistency.
Or to the right. (That might be even worse though, I don't know.)
Interesting idea. Maybe we could have a standard action of moving one column further.
oh good question
i have never hit this issue bc you need a massive amount of text to fill the whole screen. I have some natural breaks and subheaders. Each section is wrapped in its own columns
I want this and am eventually going to try harder to implement it, but the reason is basically because CSS can’t do it. What do you do when you still have more content than fits on the screen? If you just stick with default CSS behavior and make the columns taller than the screen, now you’re scrolling all over the place constantly, it sucks. If you add more columns off to the right, you already probably need to use JS for layout, and it still isn’t nice on desktop, you need to scroll more for each bit of content and most desktops don’t have intuitive side scrolling controls. What you want is viewport-sized “pages” with a dynamic number of columns per page, but this is basically a whole extra layout mode that you need to implement in JS. There was a whole project to let JS plug into the layout engine better, I think it’s stalled now, I don’t know if it got far enough. Then there’s the weird bottom right -> scroll -> top left jump, you probably want to implement a hint or UI there, maybe even column to column since we’re breaking norms here. Scroll snapping is thankfully in CSS now, so we don’t have to worry about scrolling precisely to the next screenful, but we do cost people the ability to put what they want where they want it within the viewport. You’ll need to implement something to make anchor links work again, users can no longer just look at the top of the page. Everything’s going to go nuts when users resize the window, and maybe even more nuts due to browser attempts to keep them “in the same place”, you need to make it some semblance of ok. As soon as you want something non-text your columns will be too narrow, so you’re really going to have to implement complex column-spanning stuff off the bat. CSS thankfully has tools for controlling things like “don’t split this across columns”, but I bet they’ll prove inadequate if you dig into it. You’ve also reduced linearity, it’s now much less true that what’s above is before and what’s before is above, etc.
I’m still interested in this layout, but that’s why nobody does it: it’s far more complex from the web dev’s perspective, bad if not executed perfectly, and still has downsides even if perfect.
I think it’s still popular in places where the viewport size and content are both known at design time.
I remember somebody championing css features, I think Adobe, to make it possible to have overflowing content spill over into another container, like it is (was?) possible to do in Publisher. I'd love something like that, and have wanted it several times. But it was abandoned...
Never knew that. I think that in combination with CSS grid auto fill, that may have solved a huge chunk of paged columns.
I find shift + scroll quite intuitive. Works on almost everything where there is a horizontal scrollbar.
It's a little annoying to change from 3 to 2 to 1 columns when someone does resize, though. I just let people resize the window itself on my blog if they want to compress the text down.
No. No no no. I browse hundreds even thousands of pages every singe days, and I either just close such sites or go the extra mile to write custom css for them when they are disgustingly wide.
While we're on the subject of "the user needs to become the programmer to have an acceptable experience" (sites needing my custom css added to be usable), my pet peeve is when the scrollbar is present but intentionally offset from the right edge of the screen by one pixel.
So then you hug the right edge of the screen, looking for it, where it looks like it is, and where it's been for like the entire history of computing, and then you click, and there's just nothing there.
This is a special case of Fitts's law, where a button at the edge of a screen becomes effectively infinitely wide, as far as ease-of-clicking goes.
This was used intentionally with great effect on usability in the 90s and 2000s. (Scrollbar, start menu, show desktop, etc.)
In the last decade however the trend appears to have reversed: it is now fashionable be to make the scrollbar as difficult to click as possible, by offsetting it, making it narrower, or hiding it altogether.
There is a browser out there which does something like that for every site. It has a separate area for the tabs, instead of using the full window. That could be okay. But it has a margin around it. Which means that every single scrollbar for every single page does not go to the edge of the screen, completely sabotaging easily hitting the scrollbar. Welcome to the genius of the zen browser.
https://github.com/zen-browser/desktop/issues/1126 is the issue, closed as they won't fix it (thus my snark).
> In the last decade however the trend appears to have reversed: it is now fashionable be to make the scrollbar as difficult to click as possible, by offsetting it, making it narrower, or hiding it altogether.
Afaik Ubuntu jumpstarted it with their minified GTK scrollbar, used in their Unity DE. But that thing was actually smart: It slimmed down visually, but as soon as the mouse entered its region you got the scrollbar handle at the mouse pointer's position. So it made manipulating the scrollbar even easier than a fullsized scrollbar (for at least some usage) while looking nicer. Ofc that usability aspect is something the CSS reskins and other adaptations promptly and completely forgot.
No offence, but "please don't do X" where X is favoured by the big majority of users AND has a broad scientific base sounds a bit... entitled?
It has nothing to do with entitlement. If you choose an arbitrary width based on usability studies, you may make a large percentage of users happy, but if you let users set the width by resizing their browser, you make 100% of users happy. Why not choose the latter?
You won't make 100% of the users happy. In fact if argue you would make the majority of the users unhappy. I don't want to have to realize my browser for every web site. Is rather have a website that is fairly easy to read without me doing anything. I think most people would want that.
My windows stay maximized and I’m not about to faff about, resizing them. When I come across an Ultra Panavision website I usually just open the dev tools with a single F-key to squish it.
If the user needs to set their own width by resizing the window they can also set the width by right-clicking -> inspect element -> disabling the CSS style on the div that gives it a max width. Which is only a couple more clicks than resizing the window and affects a lot less people.
Often not so easy to do with nowadays bloated designs and tons of patronizing frontend devs making websites. You might have to remove 10 styles for all the bloat containers they used to contain fancy text. Better to not prescribe any preference and enable the user via standard browser tooling, which definitely would spring up, if users showed significant interest in such.
Resizing browser is cumbersome and will definitely NOT make me happy. Especially since I have tiled desktop but even without it.
If you really want to please everybody here, introduce an option that is remembered in a cookie (reading preference, trivial to implement). There is no one size fit all here.
I’m not going to resize my browser each time I follow a link or switch between tabs.
> but if you let users set the width by resizing their browser, you make 100% of users happy
It's very ignorant to believe 100% of users are happy with having to resize their browsers just to get a pleasant rendering of the site.
Nonsense. People almost always use browsers maximized. And many people have 2.5k or 4k screens. Even on 1080p screens full width text is unreadable.
I seriously doubt there are any people who resize their browser window every time they switch tabs.
Right, there is a reason newspapers long ago realized multiple columns is better than full-width text. Imagine reading New York Times if it had only one full-width column. People would stop subscribing to it.
it what's also nonsense is, to firmly associate browser window width with tab content width. The user can control these independently. Maybe it should be made easier to do so, or more comfortable. At some point though we should take a step back and ask ourselves how we can solve the problem without dumbing down the interface so much, that capable users suffer.
If a text-heavy website does not constrain the width of its content, what do you tend to resize the browser to? Does it depend on text size? Or other factors?
I don't get it. I mean, yeah I get wanting to make extremely minimal web pages that are readable on every screen. But if that's your goal, the solutions are pretty well understood. Who's the target audience for this, i.e. who are the people who are trying to make a bare bones web page but just struggling with `max-width` - and why's it at the top of HN?
Me. I'm a backend developer who occasionally wants to make a web frontend for a side-project but knows essentially no CSS. The solutions are not "well understood" by me because I know no CSS.
> occasionally wants to make a web frontend
In that case I'd say the problem is exactly what you state
> knows essentially no CSS
The solution is quite obvious then too: learn some. It's not hard. Understanding the basics is a afternoon job. Diving a bit deeper a day, and learning about some often-used more in depth features like "responsive" or flexbox, another day. For a software developer/engineer that builds backends, CSS really isn't that hard.
That's not to say a basic CSS set and some explanation like in TLA, isn't useful.
It's my pet-peeve that in software development, I'm convinced we should understand the stuff that we work with. Not all, and certainly not everything in great detail, but enough to know where to find the info and details when working with it. From sysadmin to the concepts of cryptography and from accessibility to how an OS writes stuff to disk. Even if that means constantly learning.
> The solution is quite obvious then too: learn some.
That’s the whole point of this article. CSS is a huge language. Where do you even begin? This article is a perfect response to that very natural question.
C'mon. I'm a full stack dev but this is like me saying I just want to code something quick in C++ but don't know anything about it. Maybe I don't know how to tell a pointer from a shared_ptr or what a destructor is. Even if I don't know how to do them, I'm pretty aware that these things are very well understood and documented by a huge community, to the point that I probably wouldn't rely on some AI-written article with almost no useful information to show me how to do what I wanted to do... I'd want to actually learn what was going on under the hood... and if I did somehow find such an article useful to explaining pointers in the most vapid way possible for my use case, I certainly wouldn't post it to HN. And if I did post it to HN and it suddenly ranked to the top, I would think something had gone completely wrong with the universe.
> very well understood and documented by a huge community
Is this article not someone in the community documenting what's understood? I'm sorry if it doesn't meet your expectations, but it's fine for me.
> who are the people who are trying to make a bare bones web page but just struggling with `max-width`
Anyone making a personal website?
If you want to make a personal website, you have two routes: Use a template thing like wordpress, with a GUI, or learn at least a bare minimum of HTML, CSS and probably some Javascript, as well as how to set up a server. What's offered in this article is not very useful to making a personal website... it's like if you wanted to bake a cake, and you read an article saying that frosting is made from sugar and butter. This isn't news and it's it's not particularly useful to baking your cake either.
Just to like, follow up: 99% of the point of making your personal website is, like, making it fucking personal which is to say that you put your own time and energy into learning something in the process. Copy/pasting random CSS from the web is not learning. Also, copy/pasting this particular CSS is not even showing the slightest bit of interest.
So consider: Why would anyone care about your personal website if you don't care enough to learn how to make it, you know, personal by actually learning a tiny bit about the art you're trying to put into practice?
And none of this even starts to explain why this junk would be popular here. There are some brilliant CSS hacks in the wild that deserve attention, but this is sub-par even for child's play that might teach you how to do something useful. It's not even a lesson. It's just some crap you don't understand that you might copy and paste, with almost no explanation.
I can't really enjoy an article on CSS where the third thing he does is to override the USER'S PREFERRED FONT SIZE.
Arrogant.
But not as bad as those jerks that use smaller and smaller, progressively lower contrast text as the actual content gets more important. Huge readable repetitive headings, microfiche gray-on-gray for the stuff that mattered.
At least they're making the font size larger than default, not smaller. The users preference will still scale that up or down.
Hell, Hacker News sets the comment font size smaller than default.