CSS clamp() With em in the Preferred Value: Components That Scale Themselves

I keep a card component that ships in two sizes. The large variant bumps the font size to 1.25rem, and for a long time I wrote a second padding rule to match. Then I changed one line and deleted the second rule for good:

The em values resolve against the element's own font size, so the large variant's padding scales up with its type automatically. No second rule, and no drift when someone changes the scale six months from now. Using em in the preferred value ties the fluid expression to the component instead of the page, and that is the whole trick.

What each slot does with em in it

Minimum and maximum in em keep the floor and ceiling proportional to the component. The preferred value is where the interesting part lives: 0.75em + 2vw means the fluid middle grows with the viewport but stays anchored to the component's type size. Double the component's font size and the entire clamp range roughly doubles with it. The viewport part still does its job at every size; the em part just moves the whole range up or down with the component.

The decision rule: em for the box, rem for the type

Here is the rule I use. If the value should track the component's own font size, card padding, button padding, badge border-radius, the gap inside a sized container, put em in the preferred value. If it should track the user's global text setting, body copy, headings, page-level spacing, use rem.

The reason is the accessibility contract. Guidance for fluid type says the preferred value should include a rem component so the fluid part keeps responding when a user raises their browser font size. A preferred value built only from viewport units can freeze the scaling relative to the user's setting. For text itself, keep the shape clamp(1rem, 0.5rem + 2vw, 2rem): rem endpoints, rem anchor in the middle. Use the em pattern for the box around the text, not the text.

Where it breaks

Nesting. A child component with its own em-based clamp inside a parent that scaled its font size multiplies the scaling, because the child's em resolves against the parent's already-scaled size. The padding comes out larger than either declaration suggests. Devtools will not help much here: the computed panel shows a px value that hides the relationship entirely, so you have to read the declared value to see the compounding.

Two fixes. Reset the font size at the component root so the em has a known anchor, or switch the nested component to rem. I do the first for leaf components like buttons and badges, and the second for anything that gets composed inside other components, since I cannot control what font-size context it lands in. Either way, the rule is: one em-anchored component per stacking context of font sizes, not two.

The pattern is one line and it removes a whole class of variant overrides. It belongs on component chrome, not on text sizing, and not inside nested font-size contexts.