A new kind of cap?

Loads has changed in the world of CSS and one area that’s developed is CSS Units. One of the newcomers is a relative font unit called ‘cap’. Let’s dig deeper! It’s all about measuring the distance from the baseline to the top of capital or uppercase letters, typically the height of letters with flat tops. A neat use case for this one? Say you want to align an icon next to your text and make sure they’re both the same height and size.

Look at this:

<p>
  Good Vibes Only
  <svg>SVG icon in here</svg>
</p>

p {
  font-size: 2rem;
}
svg {
  height: 1cap;
  width: auto;
}

What height will the icon have? It’ll match the height of the font exactly, and the icon will always automatically align with the baseline of the font. No matter if the font grows or gets smaller due to new CSS or browser settings.

Kind of nice!