Overview
The Fluid Text Scaling feature in our Divi Responsive Helper plugin allows your headings and body text to scale smoothly across different screen widths, rather than jumping between fixed breakpoint values.
In Divi, it is common to set one font size for desktop, another for tablet, and another for phone. While this works, it can become repetitive and difficult to manage as your site grows.
Fluid Text Scaling simplifies this process. Instead of defining separate values at every breakpoint, you define the smallest and largest sizes your headings and body text should be. As the screen width changes, the text scales fluidly between those values. The result is more natural typography and fewer manual adjustments across different devices.
The plugin handles the complex math and CSS automatically in the background. You do not need to understand functions like clamp() or calc() to use this feature.
NOTE: This feature is only available in Divi 5 and is not available in Divi 4. Limitations in Divi 4 made it difficult or impossible for third-party developers to extend or customize certain functionality. We’re excited that Divi 5 provides more freedom and opportunities to build advanced features like this, and we hope you enjoy the new features we are able to create now.
Accessing The Settings
To start using the responsive content editing restriction and improvement features in Divi 5, go to the Pee-Aye Creative menu in your WordPress backend, then select Divi Responsive Helper. In the plugin settings interface, open the Fluid Text Scaling tab from the left sidebar. From there, enable and configure the settings as needed.
Setting Your Heading and Body Text Sizes
Once Fluid Text Scaling is enabled, you will define the size range for your headings and body text. Instead of entering separate values for each breakpoint, you simply choose the smallest and largest sizes your text should use. The plugin automatically scales the font size between those values as the screen width changes.
This approach creates smoother typography and reduces the need to manually manage multiple breakpoint values. As visitors move between different screen sizes, the text adjusts gradually rather than jumping between fixed sizes.
If you are unsure which values to start with, consider comfortable reading sizes. For body text, something like 16px on smaller screens and 18px or 20px on larger screens is a common starting point. For headings, you might begin around 24px on smaller screens and scale up to 40px or 48px on larger screens.
There is no single correct choice. These values are simply suggested starting points. You can use values that fit your design, just as you normally would when setting font sizes in the Divi Builder. You can experiment with different sizes and preview the results as you design your layout.
Heading Text
The heading settings control the fluid scaling range for your main heading (H1). The plugin uses the size range you define to automatically generate a full heading hierarchy.
This means you only need to define the H1 range. The plugin then calculates the sizes for H2 through H6 using an internal typographic scale. As the screen width changes, each heading level scales proportionally while maintaining the correct visual hierarchy.
In practice, this allows your headings to remain balanced across different screen sizes without requiring you to manually configure each heading level individually.
For example, if your H1 grows from a smaller size on mobile screens to a larger size on desktop screens, the other heading levels will scale proportionally so that H2, H3, and the remaining headings maintain their relative sizes.
If you ever need a different size in a specific module, you can still enter a custom font size in the Divi Builder. Manual values entered in modules will override the fluid scaling.
Body Text
The body text settings control how paragraph and general content text scale across different screen sizes.
Just like the heading settings, you define the smallest and largest sizes for body text. The plugin then smoothly scales the text between those values as the viewport width changes.
This ensures your body text remains readable on smaller screens while still allowing it to grow slightly on larger displays where additional space is available.
Since body text does not have multiple levels like headings, the scaling is applied directly to paragraphs and content text throughout your site.
Optional Viewport Controls
By default, the fluid text scaling uses a viewport range that works well for most websites. In many cases, you will not need to change these values.
If you enable Show Viewport Controls, you can manually define the screen widths at which the scaling behavior begins and ends.
The Smallest Viewport Width determines the screen width at which text begins scaling down to the smallest font size. Screens narrower than this width will continue using the smallest size you defined.
The Largest Viewport Width determines the screen width at which the text reaches its largest size. Screens wider than this width will continue using the largest size you defined.
These settings are useful if you are designing for unusual screen ranges, such as extremely large monitors or very narrow layouts. Otherwise, the default viewport range should work well for most designs.
Most users can leave these values at their defaults. You only need to adjust them if you have a specific layout requirement, such as designing for very large screens or limiting how quickly text grows between smaller devices.
If you are unsure, it is best to keep the viewport settings unchanged. The default range is designed to work well across typical device widths.
