5 CSS Properties for Eye-Catching Text Designs
CSS properties you should know for better text designs
Typography on the web can be more than just choosing a font. This article covers five CSS properties that add flair to text: `background-clip` for image-filled letters, `vertical-align` and `align-content` for precise alignment, `box-decoration-break` for styling broken lines, `letter-spacing` for creative spacing and animation, and `text-combine-upright` for vertical writing modes. Each property is explained with practical examples, helping you elevate your text designs.
In the late 2000s, the `text` value was introduced for the `background-clip` property, making it possible to mask background images (or gradients) inside live text.
- myfonj
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...
- addedlovely
Was expecting to see text-wrap:balance there.
Solve away your orphans!
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
- montroser
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...