A recent tweet by Eric Meyer led me to explore a CSS measurement system that was previously completely unknown to me, and I assume to most other web developers: the Q unit.

Q Who

A single unit of q is a tiny linear, absolute measurement, representing a quarter-millimeter, or 1 / 40th of a centimetre. As such, Q is perhaps best-suited at making very small optical adjustments, such as kerning between letters:

h1 { 
    letter-spacing: 4q;
}

The result, in supporting browsers:

As such, q might be particularly effective at making small adjustments in print stylesheets, or in @media queries for particularly small viewports.

Q Do

As of this writing q has very narrow browser support - only recent versions of Firefox recognize the unit. However, pre-processors like Sass are working on support, I’d also expect post-processors, such as PostCSS with CSSNext, to support the unit soon, converting it on the fly to other units for inclusion in processed stylesheets to provide greater browser compatibility.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.