Code library: Fluid typography

[ferocchi]

Is your feature request related to a problem? Please describe.
A site cannot be fully accessible if it is based on pixels, as you are ignoring the user's preferences to update their browser font size settings. Furthermore, working in pixels does not make the UX fluid: the elements will scale only at certain breakpoints, creating awkward design scenarios on certain devices.

Describe the solution you'd like
Having the ability to set the html font size when creating a new theme, and then setting body to 1 rem by default. The snippet will look like something like this
html { font-size: calc(0.625rem + 0.41666666666666663vw); }
@media screen and (max-width:1920px) { html { font-size: calc(0.625rem + 0.41666666666666674vw); } }
@media screen and (max-width:1440px) { html { font-size: calc(0.8126951092611863rem + 0.20811654526534862vw); } }
@media screen and (max-width:479px) { html { font-size: calc(0.7494769874476988rem + 0.8368200836820083vw); } }
Please see here for more details https://finsweet.com/client-first/docs/fluid-responsive
The benefits are multiple (please see video below and link above):

• UX benefit: designs are fluid and consistent with Figma prototypes without awkward breakings at certain breakpoints
• DX benefit: simplification of development sizing tokens as by using only rems, we ensure everything will scale down and up depending on viewport and keeping the design coherent with the Figma prototypes (we use rems not only on font sizes but also on paddings, widths, margins, etc.)
• Accessibility benefit 1: we respect the user's preferences to update their browser font size settings
• Accessibility benefit 2: we respect a user's browser zoom controls

Describe alternatives you've considered
This video goes at length on why this solution makes a lot of sense https://finsweet.com/client-first/wizardry-comparison

[blvdmitry]

This is finally happening in v3 🚀

https://x.com/blvdmitry/status/1802807116153172069