letter-spacing is massively overused. I have Firefox set to only use my chosen fonts (and highly recommend it: it makes the web much better), and this reduction in variation makes non-zero letter-spacing much more obvious to me. At typical body sizes, I will tend to notice (and be displeased by) letter-spacing changes of less than 1% (I notice even 0.1px often).
There are only three places where I hold letter-spacing of any kind to be acceptable:
1. Art. (This is pretty much the intended context of the article, but I just know it’s going to be taken out of that context.)
2. In large headings, slightly reducing letter-spacing may be reasonable, as fonts are often spaced for smaller size usage. But whereas reducing line-height is all but essential, reducing letter-spacing is of marginal value at best. Ideally you have a variable font with optical sizing (the opsz axis), so this is handled automatically.
3. In all-caps, small-caps or all-small-caps text, as fonts are generally spaced for runs of lowercase letters. https://practicaltypography.com/letterspacing.html suggests 5–12% (which you can spell in CSS as 5% or 0.05em). Ideally you have a font that optimises this itself within the caps, smcp and/or c2sc features.
Do not, under any circumstances, set non-zero letter-spacing for body text. It’s just wrong. If you feel your preferred font is too spacious or too tight, fix or replace the font.
myfonj 8 hours ago [-]
Some caveats worth mentioning yet missing there:
1. many, MANY implementation bugs in `background-clip: text` across browsers, especially Firefox [1], basically safe only for simple cases with no additional transforms or filters.
2. `color: transparent` ensures the text will be invisible in every browser that does supports the `transparent` keyword (i.e. basically every single one, presumably) but not support background-clip:text yet, or fail to load or interpret the background-image (like in high contrast/forced colours mode). Use `-webit-text-fill-color: transparent` instead. (Yes, that vendor prefix is necessary, and yes, it is de-facto standardised and implemented in Chrome and Firefox [2]. And yes, it is as absurd as it gets.)
3. Touching the `letter-spacing` turns off all ligatures, logically. Could be a good thing, actually, but worth knowing. (Anthropic used to use negative letter-spacing thorough its webpages, but now it seems they abandoned that.)
Recommendation (2) assumes any UA which supports background-clip supports -webkit-text-fill-color. That seems rather dodgy.
Wrapping the rule in a feature query to make it “atomic” seems a lot cleaner and more reliable.
vivzkestrel 2 hours ago [-]
- for a website that talks a lot about web, css your pagination is broken
- did you know that https://master.dev/blog/page/65/ onwards till page 70 there is not a single article on any of your pages and yet the pagination keeps going to older posts?
I think their heading `box-decoration-mode` is actually meant to be `box-decoration-break`. That's the real property that exists, and is documented on MDN.
> I always tell myself that I should use backwards-compatible CSS only.
>
> I vividly remember IE and many hacks to have css elements properly working in it…
The common advice now is to only use CSS that is supported in the last two major versions of each major browser. You can check any css property's support here: https://caniuse.com/
> Imho this is a reason why markdown and other rich-textual formats appeared.
Markdown is a superset of html and through it contains css through the style element
> Btw is there a some “w3schools” for recent CSS?
CSS is constantly changing, I'd recommend the following for how to apply new CSS features:
- Reason: All other social networks only have webdevs who sip the coolaid of whatever trend is happening at the moment, they're not actually interested in learning what CSS can do. However, the web devs in the fediverse are actually interested in what CSS can do.
There are only three places where I hold letter-spacing of any kind to be acceptable:
1. Art. (This is pretty much the intended context of the article, but I just know it’s going to be taken out of that context.)
2. In large headings, slightly reducing letter-spacing may be reasonable, as fonts are often spaced for smaller size usage. But whereas reducing line-height is all but essential, reducing letter-spacing is of marginal value at best. Ideally you have a variable font with optical sizing (the opsz axis), so this is handled automatically.
3. In all-caps, small-caps or all-small-caps text, as fonts are generally spaced for runs of lowercase letters. https://practicaltypography.com/letterspacing.html suggests 5–12% (which you can spell in CSS as 5% or 0.05em). Ideally you have a font that optimises this itself within the caps, smcp and/or c2sc features.
Do not, under any circumstances, set non-zero letter-spacing for body text. It’s just wrong. If you feel your preferred font is too spacious or too tight, fix or replace the font.
1. many, MANY implementation bugs in `background-clip: text` across browsers, especially Firefox [1], basically safe only for simple cases with no additional transforms or filters.
2. `color: transparent` ensures the text will be invisible in every browser that does supports the `transparent` keyword (i.e. basically every single one, presumably) but not support background-clip:text yet, or fail to load or interpret the background-image (like in high contrast/forced colours mode). Use `-webit-text-fill-color: transparent` instead. (Yes, that vendor prefix is necessary, and yes, it is de-facto standardised and implemented in Chrome and Firefox [2]. And yes, it is as absurd as it gets.)
3. Touching the `letter-spacing` turns off all ligatures, logically. Could be a good thing, actually, but worth knowing. (Anthropic used to use negative letter-spacing thorough its webpages, but now it seems they abandoned that.)
[1] https://bugzilla.mozilla.org/show_bug.cgi?id=1656784 [2] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
Wrapping the rule in a feature query to make it “atomic” seems a lot cleaner and more reliable.
- did you know that https://master.dev/blog/page/65/ onwards till page 70 there is not a single article on any of your pages and yet the pagination keeps going to older posts?
- practise what you preach maybe?
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
I vividly remember IE and many hacks to have css elements properly working in it…
Imho this is a reason why markdown and other rich-textual formats appeared.
Btw is there a some “w3schools” for recent CSS?
No better resource than MDN: https://developer.mozilla.org/en-US/
I also like https://css-tricks.com
There's also https://modern-css.com/.
The common advice now is to only use CSS that is supported in the last two major versions of each major browser. You can check any css property's support here: https://caniuse.com/
> Imho this is a reason why markdown and other rich-textual formats appeared.
Markdown is a superset of html and through it contains css through the style element
> Btw is there a some “w3schools” for recent CSS?
CSS is constantly changing, I'd recommend the following for how to apply new CSS features:
- https://www.youtube.com/@KevinPowell
- https://ishadeed.com
- https://www.joshwcomeau.com
MDN is the best technical reference: https://developer.mozilla.org/en-US/
- You can search any css property in there and it will return all the rulesets for that property.
To see how people are using CSS, I'd recommend:
- https://codepen.io/
- Mastodon/fediverse
To see future CSS:- You can see the proposals here: https://github.com/w3c/csswg-drafts/issues
- Proposals often require experiments which you can find on mastodon/fediverse. For example: https://front-end.social/@kizu
There's also the yearly State of CSS survey to get an overall sense of it: https://2026.stateofcss.com/en-US/
There's a much easier way—Baseline: https://web.dev/baseline
CSS features that have been available for 30 months for Chrome, Edge, Firefox and Safari are "Widely Available" and are safe to use.
Commonly used tools like Browserslist and Stylelint support checking for Baseline compliance.
The fact that modern CSS and native browser APIs can handle so much of this makes the web feel simpler and more capable at the same time.