CSS Unit Might Be a Combination

Summary

This post is part of a series on revisiting fluid typography: One thing I want to highlight from the last several posts in this series is that my solutions often involve combining and comparing units. In the post on user font-size preferences, I pointed out that em-based root font-sizes multiply the user setting. If we ask for a 20px font-size by calling it 1.25em, and then the user also asks for a 20px font-size, the result will not be agreement but a combined 25px font. If we switch to a px-only approach, we’re ignoring the user preference entirely – which is even worse. But if we stop doing the math in our heads, and provide the browser with both units, we can do a much more interesting and useful comparison: html { font-size: max(1em, 20px); font-size: clamp(1em, 20px, 1.25em); font-size: calc((1em + 24px) / 2); } In all three cases, there’s no conversion required. We state clearly the px font-size we’re aiming for, and then compare it against the user-provided em. The units have different meanings, and those meanings are useful for expressing more clearly the negotiation between site and user font sizes. I like to think of relative CSS units as browser-provided variables, allowing us to pass in a multiplier. We could write it out long-hand, if we had to: html { font-size: clamp(var(--user-font-size), 20px, 1.25 * var(--user-font-size)); } Thinking about units that way reminds me to think about the meaning rather than the assumed px value of the unit. Use the unit that means what you mean Once I’ve handled that user-preference negotiation on the root element, I can refer to the result of that elsewhere as 1rem. In my mind 1rem is a always a calculation with a variable in it: calc(1 * var(--negotiated-base-font-size)). Similarly 1em can be thought of as calc(1 * var(--current-font-size)). The difference between 1rem and 1em is like the difference between --brand-pink and currentColor. Both are variables, both are useful, but they describe entirely different relat...