Code library: Fluid typography

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

formaat-design / reshaped

Code library: Fluid typography #196