Illustration of Dan Denney, by Ricardo Gimenes

The ex unit is a thing that exists

Today Andy Bell tweeted about creating a hero component and mentioned the ex unit. I hadn't heard of it and thought it was one of the newfangled additions to CSS. I was so surprised that the first result was a Stack Overflow from 11 years ago.

The ex unit on MDN:

Represents the x-height of the element's font. On fonts with the "x" letter, this is generally the height of lowercase letters in the font; 1ex ≈ 0.5em in many fonts.

Thankfully, he also shared a gist with some CSS for me to kick the tires on very quickly.

.cutout-hero {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
position: relative;
aspect-ratio: 1920/839;

.cutout-hero :is(img, picture, video) {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
object-fit: cover;

.cutout-hero__heading {
font-size: var(--size-mega);
width: min-content;
line-height: 1;
transform: translateY(0.8ex);

As I do, I made a CodePen right away. I'd recommend playing with it in full screen view.

See the Pen Untitled by Dan Denney (@dandenney) on CodePen.

I'll definitely try playing with this more. I've done this with `em` and `px` before, but I dig this more. Funnily, I probably have come across it before when I read Every Layout, but ¯\_(ツ)_/¯