How to set root font size

I am using Vaadin v23 with Lumo typography. Over time the website I am working on has a mixture of rem and em font-sizes across various components. I am trying to standardize on rem, to match the luno font-size variables (since they use rem). So the goal is to replace all em’s with either a rem value or a lumo font-size variable.

The problem I am having is that the rems keep using 16px as the root font-size. Even though I am setting font-size in the index.html for the html block. For example doing this has no effect on any of the rems… they still use 16px as the root font-size (so that 1rem is 16px).

      html {
          font-size: 10px;

To add more details to my ultimate goal… once everything has been converted to rem, I would then control the root font-size value for different screen sizes. Its becoming whack-a-mole to get the fonts just right across every page. It seems like using em would have been best, cause I could then set the relative font-size for that page (without affecting other pages), but I want to play nice with lumo variables (which use rem).

Is it this… --lumo-font-size: 10px;

I’m not a CSS export to explain why it doesn’t work., But if you specify all lumo font sizes seen here if works

Awesome, thank you!!! I notice it sets the html block’s font-size using the lumo-font-size variable. If I set that variable it does what I need.

Quick question, is there a recommended way of adjust the font-size for smaller screens in either lumo or Vaadin? If left to my own bad designs, I would just use @media queries to set the lumo-font-size variable to different values.

Using media queries would be the recommended way even tho there are no real recommendations available as far as I know :sweat_smile:

Thank you @quirky-zebra for taking the time to answer my questions. Its really appreciated.