Fluid sizes improve accessibility by making font size preference work like browser zoom
When users zoom in on their browsers, the site eventually reaches a new breakpoint and sizes adjust to prevent overflowing content. Normally, increasing the font size preference should behave just like browser zoom, triggering those responsive changes. However on Webflow sites, increasing the browser’s font size doesn’t activate the next breakpoint because Webflow uses PX breakpoints instead of REM. As a result, text and element sizes continue to grow and overflow without the responsive adjustments designed for smaller screens.
Using fluid sizing with clamp() can solve this issue. Since clamp() isn't based on PX breakpoints, it allows sizes to respond just like they would with browser zoom, delivering a more accessible and consistent experience.
Using autofit grids with fluid sizes can make the experiences of browser zoom and browser font size increase exactly identical.
Webflow Site Width
This is the maximum screen size at which sizes will stop scaling up. It should match the value of the site/width variable set in the variable panel. In most cases, the Webflow Site Width and Figma Design Width should be the same. If you want the design to scale larger than its original size in Figma, set the Webflow Site Width to be larger than the Figma Design Width.
Figma Design Width
This is the size of the Figma container plus any horizontal padding (usually the width of the entire Figma frame). This is used as the screen size that sizes should scale up or down from. If an element was 5rem in Figma, it will be this value at the screen size that matches our Figma Design Width.
Min Screen Size
This is the screen size at which sizes will stop scaling down. Our fluid sizes will all reach their smallest size at this minimum screen size.