Good, but I'd replace that font with the default:<p>`font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif`<p>It'd remove the unnecessary font and still look good.
That's nice but really, the problem with css (or what's hard difficult about it) is not designing a single page that has a single column of text with some titles. Any large css files that this is supposed to counter will probable have very similar (and as small) css rules for that same thing. It becomes hard when you need a grid, templates, images, and other more complex designs.
There is a small accessibility problem with the CSS presented on this page. The author set `text-decoration: none;` on the links, relying only on color to identify them. This should be avoided.<p>C.f. <a href="https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/links/do-not-remove-the-underline-from-links/" rel="nofollow">https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-st...</a>
1. Please do not import external resources from Google Fonts if you don’t have to. (Hint: You never really have to.)<p>2. If you want to use as little CSS as possible, simply use `sans-serif`. Otherwise try this font stack: <a href="http://markdotto.com/2018/02/07/github-system-fonts/" rel="nofollow">http://markdotto.com/2018/02/07/github-system-fonts/</a><p>2. Fira Sans is actually quite nice, but please do not use `font-weight`s below `400` for continuous text. That’s really hard to read.<p>3. Since only the `300` weight is imported, the entire text will be thin – even headlines and `strong`.<p>4. Please leave the link text underlines for accessibility: <a href="https://webaim.org/techniques/hypertext/link_text#underlining" rel="nofollow">https://webaim.org/techniques/hypertext/link_text#underlinin...</a><p>bettermotherfuckingwebsite.com did a better job.
339 bytes which load an additional 241 bytes of CSS to load a 53k custom font...<p>What is the point people are trying to make with titles like this? It's like claiming "50 bytes to make a website" after you figure out that you can just iframe Google.
What is it with all those reduced font/background contrast styles? To me these are terribly hard to read. As a matter of fact a large part of my Stylish/Greasemonkey sets are just there to get back decent contrast on text.
Similar project yesterday<p><a href="https://news.ycombinator.com/item?id=19607169" rel="nofollow">https://news.ycombinator.com/item?id=19607169</a>
I really don’t like that Google font. Too lightweight and hard to read.<p>And if readability suffers, I’ll rather take the crude original motherfucking website over this.
Why such thin grey text? Why sacrifice readability as a matter of principle? What's wrong with black on white, like a regular f*cking book or newspaper?
Here is something similar: <a href="https://github.com/vladocar/Basic-CSS-Typography-Reset" rel="nofollow">https://github.com/vladocar/Basic-CSS-Typography-Reset</a>
Sometimes I wish some of those markdown viewers would come with such an effective CSS. For example, the KDE document viewer Okular can display markdown files but they look just awful.<p>Once I tried finding the source of the Okular style but ended up creating a custom script to convert Markdown files to PDF files with a custom CSS (via Chromium...).
All this CSS minimalism reminds me of Dan Luu's post about Web Bloat: <a href="https://danluu.com/web-bloat/" rel="nofollow">https://danluu.com/web-bloat/</a><p>His website is refreshingly light and fast, but that's still no excuse for Times New Roman. Maybe it's a retro irreverence thing.
Is there anybody here who is deeply in the frontend rabbithole and can recommend a JS free CSS framework that we can use for a project where readability & UX matters a lot? Somebody recommended material.io but is it not JS free. I was wondering if there is a JS free CSS framework that looks great.
fork of the fork JSFiddle: <a href="https://jsfiddle.net/abmnyjdc/1/" rel="nofollow">https://jsfiddle.net/abmnyjdc/1/</a>