Pardon my dust! I just migrated my website to the fantastic Eleventy and am recording the redesign process of adopting my design system for our AI & Design Systems course.

A rare use case for em units

[text-decoration-offset](https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset) is a good use case for em units. Most of the time we favor rems over ems, but in this case we want the text underline offset to proportionally scale with the `font-size` property. Here's a quick demo:

See the Pen Text decoration offset by Brad Frost (@bradfrost) on CodePen.

This little nugget came from some fun in-the-weeds typography design token chats with a big publisher client today. They were looking at setting up text-decoration-offset-specific tokens. Part of me tells me this is overkill, but the other part understands that links and underlines is very much a core part of their business.

We proposed trying to avoid text-decoration-offset tokens if they could help it in order to reduce the number of tokens they have to manage. There are already plenty of tokens to manage, and this particular organization has 40 themes to support, so the fewer moving parts the better. So hopefully the humble em can help make their system a bit more maintainable.

Brad Frost Hey there! Brad Frost brad@bradfrost.com

I'm Brad Frost, an independent creator, web designer & developer, teacher, speaker, writer, musician, and artist based in Pittsburgh, PA.

Check out my courses AI & Design Systems course Atomic Design Certification Course Subatomic: The Complete Guide to Design Tokens course Get my newsletter

I like connecting with people directly without algorithms and machines getting in the way, and my newsletter helps me do that. Subscribe to get my latest thinking and interesting links about design, technology, music, art, creativity, and some random fun along the way.

Around the web