:root {
font-size: calc(1rem + 0.25vw);
}https://jameshfisher.com/2024/03/12/a-formula-for-responsive-font-size/
With modern CSS, we can just write that function! It’s calc(1.0625rem + 0.2604vw). I round this to 1rem + 0.25vw.
Sharp-eyed readers might wonder: doesn’t my CSS have circular reasoning? If rem is defined as “Font size of the root element”, how can we use 1rem in the definition of font-size on the root element?! It turns out it’s a special case:
When specified in the font-size property of the root element, or in a document with no root element, 1rem is equal to the initial value of the font-size property.