How to implement a CSS unit based on rem+px (e.g. include a scale factor)?

Question
  • Most recently I always used a fraction of rem thinking I could control the whole document's scale factor by changing the <html>'s font-size.
  • I just discovered px is already a logical pixel, so I don't need to account for retina screen's density myself.
  • px doesn't account for the device's scale factor ("make everything bigger"). Thus, I still believe I need rem as I can control the scale consistenly (since CSS3 scale and transform: scale(...) are just geometrical-transformations that do not account for the layout).
  • However, rem relies on px, since html { font-size: <n>px }.

To clarify, I'm thinking of implementing my own UI design framework over the web, which will have to implement a runtime-incorporated CSS dialect that reuses the browser's underlying CSS. I wanted the default measurement unit to be a logical pixel, but influenced by a scale factor as well.

What does a scale-factor-accounted logical pixel need to be then?

Posted Jan 31, 2026, 1:34 PM UTC

06
Loading comments…