https://www.youtube.com/watch?v=8VEg9fBrfvQ

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)

Fluid Builder App - Webflow Apps & Integrations

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