CSS properties you should know for better text designs

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

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=1656784 [2] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...

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.

(If you want another reason: letter-spacing is incompatible with ligatures, not so often used in sans-serif faces, but in serifs things like fi not having the ascender and dot collide messily is often valuable.)

Was expecting to see text-wrap:balance there. Solve away your orphans! https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...

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

- practise what you preach maybe?

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.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...

At this point I don’t use photoshop anymore, I just make a html document to make the image and then I can easily translate it to 50+ languages

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…

Imho this is a reason why markdown and other rich-textual formats appeared.

Btw is there a some “w3schools” for recent CSS?

CSS has come a long way. On several sites I’ve been able to completely remove JS for things like popups, mobile menus, and open/close interactions.

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.