This substack I wrote might be of help understanding what I'm talking about. substack.com/home/post/p-...

I saw that. I don't set a base size either, simply setting my base var as 1/16 of a rem.

font-size: calc(var(--base) * 16).
width: calc(var(--base) * 324);
padding: calc(var(--base) * 16) calc(var(--base) * 8)

It keeps my pages and components consistent and is more easily understood than all the variables Radix provides (--space-1 = 4px and --space-4 = 16px).

3/3

It allows for the same ratios and proportions regardless of whether a user has reset their base font size.

Modern libraries like Radix UI do it, but with multiple, not easily understood variables.

Since every designer thinks in 16px to a Rem, it makes it easier to translate from Figma.
2/3

I've run up against this lately. I've embraced what I call a base-16 system (assuming the base font is 16px), but then I create a 1px base variable --base: calc( 1rem / 16).

I use that variable everywhere (font size, spacing, width) calc(var(--base) * {pixels}).
1/3

I can see a whole bunch of people calling up the white house and asking who died.

I mean why spend anytime at all on making your stuff easier to use.