Docs
Overview
Features
Accessibility check for being able to double font size at max browser zoom
Accessibility check for font size increasing on each zoom
Reverse clamps (allowing smaller sizes on desktop and larger sizes on mobile)
Also reads fluid variables that were created outside of the app
Toggle between static and dynamic values
Get the App (affiliate link)
How Fluid Sizes Can Improve Accessibility
When users zoom in on their browsers, the site eventually reaches a new breakpoint where sizes are reduced to prevent overflowing content. Normally, increasing the font size preference would 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.
Setup
1. Select a size variable to apply a fluid size
Select any size variable from the dropdown and a fluid value will be applied to that variable in the variable panel
2. Set the max size
This is the largest that the size will be allowed to grow to
3. Set the min size
This is the smallest that the size will be allowed to shrink to
4. Set the max viewport
The size will stop scaling up at this screen size
5. Set the min viewport
The size will stop scaling down at this screen size
Other features
Connect the viewport max & viewport min to number variables
Connecting the viewport max & min to number variables allows us to easily edit the max and min screen size across multiple fluid variables
Ideally the max viewport should match the container's max width so variables stop scaling up when the container reaches its full width. The viewport-max variable can be used within the container's max width like this.
Static vs Dynamic
When the dynamic checkbox is checked, the viewport max and viewport min are saved within the variable value. So we can edit the max viewport, min viewport, max size, and min size outside of the app if needed.
Font Size Accessibility Check
This checks each font size to ensure the user can double the font size when reaching max browser zoom. If your font size variable has this red error, decrease the max size or increase the min size to pull the font sizes closer together. For any spacing variables, you can ignore this red error. This only matters for variables that will be used as a font size.
Screen Size Accessibility Check
This checks each font size to ensure the font size will increase each time the user zooms in. If your font size variable has this yellow warning, increase the max viewport size or decrease the min viewport size to push the viewport sizes further apart so the font size doesn't shrink too fast. For any spacing variables, you can ignore this yellow warning. This only matters for variables that will be used as a font size.
Last updated