We all have a story to tell and here's mine: I am a philosopher by training, a customer success engineer by trade, a dog dad by choice, and a sour beer connoisseur by chance.
OK, I'm back, and I don't think there's a CSS solution using just rems/ems because of how calc works and that vw is rendered in pixels. To achieve something similar, which respects any user-defined font preferences, you have to use JavaScript. I added this solution to the post.
It allows the dev to define values, including min/max breakpoints and font sizes. Those values will be used, creating the same fluid typography scale as with the SCSS solution, unless the user has defined a default font size. In that case, the function will determine the same ratio between the user-defined min font size and maximum (using rems) to maintain a similar fluid design scheme.
Nicolas Hoizey has an article about the importance of respecting default font sizes; he also uses a technique on his site for fluid typography using CSS variables, which might be appealing. Inspect the root element to see the variables.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
OK, I'm back, and I don't think there's a CSS solution using just rems/ems because of how calc works and that vw is rendered in pixels. To achieve something similar, which respects any user-defined font preferences, you have to use JavaScript. I added this solution to the post.
It allows the dev to define values, including min/max breakpoints and font sizes. Those values will be used, creating the same fluid typography scale as with the SCSS solution, unless the user has defined a default font size. In that case, the function will determine the same ratio between the user-defined min font size and maximum (using rems) to maintain a similar fluid design scheme.
Nicolas Hoizey has an article about the importance of respecting default font sizes; he also uses a technique on his site for fluid typography using CSS variables, which might be appealing. Inspect the root element to see the variables.