There are many articles and established CSS best-practices that rely on determining the correct or best units to use. Now that comparison functions are well supported in CSS, we don’t have to choose.
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 Copy permalink to “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)) .
... continue reading