When working on T332151: docs: Redesign tokens presentation table and T373200: docs: Implement new design for tokens table I remember talking with @AnneT about this idea to add in px and rem values in all places, especially on the Spacing and Size pages, where they differ. Anne, can you remind us why we didn't do this, and provide any information which might help us resolve this task?

@DTorsani-WMF Size tokens come in rem (relative) units, because the size of elements should typically scale with font size so that these elements are legible. Spacing tokens come in px (absolute) units because spacing between elements should not scale with font size to prevent interfaces from becoming overly large at larger font sizes. Whether a token is a relative or absolute value is important to know when using them, in order to understand what will happen at different font sizes. So, if we show the equivalent px or rem value for a rem or px unit, we need to make it very clear that it is an equivalent, not the actual value of the token. The actual units are important here.

Another problem with the equivalents is that they are only true at one font size. If we say that 1rem is equal to 16px, we need to make it clear that this is only at a 16px base font size, so people won't expect that to be true when working in a 14px context.

In order to include this information, we would need to find a concise and easily understandable way to communicate it. I'm not sure everyone would understand what "16px in design" means, and it doesn't communicate that the value is only applicable at a 16px base font size.

I wonder if a message at the top of the relevant pages explaining all of this would be more effective.

Thanks for providing this @AnneT. It sounds like it would be best to leave everything as-is, to avoid confusion or misrepresentations of values. In that case, @bmartinezcalvo are we okay with declining this task?

@AnneT I agree that "16px in design" is not clear enough, but I think it's important to show the px values in this Size tokens page since there is no way now to check the px values there and it's important for some type of users such as designers. I wonder if we could show an "Equivalent to 16px when the base font-size is 16px" as a tooltip when hovering the size token. Is this something that we could easily do?

@bmartinezcalvo yes, adding a tooltip would be easy! That's a good solution.

Perfect! @bmartinezcalvo do you mind rewriting this task to encompass the addition of the tooltip in places where "rem" is referenced?