MailChimp: Grow sales with Customer Journey Smarts
leading-trim is a suggested new CSS property that lets us remove the extra spacing in every font so that we can more predictably style text. Ethan Wang has written about it — including how Microsoft has advocated for it — and that it’s now part of the Inline Layout Module Level 3 spec.
You’d use it like this:
text-edge: cap alphabetic;
This is telling the browser to look at the font file, dig into the OpenType metrics, and effectively do what Ethan demonstrates in this gif:
Why do we want to do this? Well, it would let us space text inside a button properly without any strange hacks and we’d be able to set predictable spacing values between different typefaces too. I’m pretty excited about this spec and the CSS property because it gives us yet one more tool to control the use of typography on the web — like taming line height.
It was once famously said that the web is 95% typography. You can't be a web designer and ignore type! Frontend Masters has an in-depth course on web typography from Jason Pamental getting into things like responsive styles, variable fonts, font loading, and more.
The related posts above were algorithmically generated and displayed here without any load on my server at all, thanks to Jetpack.