Font-size 1px to use with rem units

Question

I'm going after a layout that would scale nicely along with zoom (user pressing ctr/cmd + [plus]). For that I need dimensions to scale along with font-size. Using em units is too tricky, so I'm thinking of going with rem (and duplicating every dimensional property for old ie).

My initial idea was to set font-size on html element to 10px and then use 1/10rem as a pixel replacement. But since font-size on body is set arbitrary in px, the one on html would be used exclusively for rem measurement. So why not set it to 1px?

The advantages are obvious - ease of writing duplicated declarations and maintainability.

As for disadvantages (apart form duplicating declarations) I can't think of any. But maybe I'm missing something. Are there any pitfalls in this approach?

Answer 1

Since you've defined an inheritable font-size in your body, you're safe to change the html font-size as you see fit. Currently, this only affects rem values, but if something else utilizes this value, then this 1px nonstandard config will break something else and be difficult to fix.

This may have an impact on 3rd party libraries utilizing rem, and some confusion may come from using em and rem interchangeably.

Personally I think, if working with vanilla CSS (sans preprocessor), using this nonstandard method greatly simplifies the use of rem as 1:1 rem:px values are extremely intuitive.