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).
