Introduction
Setting font sizes in Divi 5 can quickly become a lot more work than expected. Even with all the improvements in variables, presets, and responsive editing, you still end up spending a surprising amount of time configuring typography throughout your website.
In this post, I want to show you two easier ways to handle global text sizes in Divi 5, from managing typography settings in one place to automatically scaling responsive text across every screen size.
▶️ Please watch the video above to get all the exciting details! 👆
Variables And Presets In Divi 5 Definitely Help
To be fair, Divi 5 does provide some really good tools for improving typography management, especially with variables, presets, and responsive editing controls. In fact, we recently published another blog post and video showing how to use variables and presets together to create a more consistent typography system in Divi 5, and those features definitely help streamline the workflow.
Check Our Full Guide!
Check out our full tutorial on using variables and presets in Divi 5!
Using variables and presets makes it much easier to keep your typography more organized and consistent throughout your site, especially compared to manually setting font sizes everywhere from scratch.
The Manual Work Still Adds Up
Even with presets and variables, there is still a lot of manual setup involved. The biggest issue is that you still need to manually add and manage those values throughout all the different text fields in Divi, and once you start building real pages, you quickly realize just how many fields there actually are.
You still need to define your font sizes, create your variables, build presets for each text type, and apply those settings throughout your layout. Variables and presets help organize the workflow, but they do not remove the work itself.
Typography Settings Are Everywhere In Divi
Once you start building larger layouts, you realize typography settings appear everywhere throughout Divi. There are H1, H2, H3, and H4 headings, body text, title text, button text, menu text, blurbs, accordions, tabs, testimonials, and many other module fields that may need font size adjustments.
And then you have responsive breakpoints to manage as well: Tablet. Tablet Wide. Phone. Ultrawide. You need to set the variables for every breakpoint in every module!
The Result Is Still Based On Fixed Values
It adds up fast. By the time you finish configuring every heading field, every body text field, every module, and every breakpoint, you realize how much time can be spent simply managing typography across a website. At that point, it becomes clear that this is not just about how to set global text or responsive design. It is about finding a solution to reduce the manual work required to maintain it.
And even after all that setup, the result is still usually based on fixed values at each breakpoint rather than text that scales naturally and smoothly across all screen sizes.
We recommend the two solutions below. If you find them helpful, you can choose one based on your site and setup that makes the most sense for your workflow.
Option 1: Set Global Text Sizes With The Divi Assistant Plugin
If you have been using Divi for a while, or following our blog, videos, or plugins, you probably already know about Divi Assistant. We created this flagship plugin with hundreds of tools to make your life easier when working with Divi. One of those tools is our Styles Helper, a set of features that lets you configure your Divi website’s text and font settings from one place.
Set Global Text Sizes And Styles
Use the Styles Helper feature in our Divi Assistant to automatically set text sizes and font styles everywhere in Divi.
Our settings include options for everything you would normally find in the Divi Modules, but with the advantage of setting them once, and they automatically apply everywhere.
Export And Import Global Text Sizes
Something that is super powerful but easy to overlook is the ability to import and export the settings you configure in Divi Assistant. Most likely, if you have preferences for tools and options that you enable on one site, you will also want ot use those on another site.
Option 2: Automatically Scale Responsive Text Across All Screen Sizes
Typography is one of the areas where responsive design can become repetitive very quickly. Setting font sizes across multiple breakpoints takes time, and it is easy to end up with values that feel slightly off between sizes.
Automatic Global Responsive Text
Use the Fluid Text feature in our Divi Responsive Helper to automatically set responsive text across all screen sizes in Divi.
Fluid typography simplifies that by letting you define a minimum and maximum size and letting the text scale naturally between those values. It removes a lot of manual work and produces a smoother result without needing constant adjustments. Simply enable the setting, and all your text will automatically be set consistently; there’s no need to painstakingly add values to every module in every heading and body text field.
Once our settings are enabled, you can enjoy the results without any extra steps. To check this, open your browser’s developer tools and inspect some text. You’ll see that the font sizes are set according to the math based on the largest and smallest font sizes set in the settings. If you resize the screen, you can see for yourself how it works.
Video Example Setting Fluid Text Across Divi 5
In this video below, you’ll see the whole process, starting with turning on the setting and ending with the changes on your site’s frontend. I think you’ll find this feature really helpful and enjoyable!
Can you not add styles in the customizer that clamps all of this? It seems like it would be a one and done thing. Well, except how randomly difficult it is to override Divi’s own theme css.
Hi Judy,
The Customerizer is a thing of the past. That became about 95% irrelevant around 5 years ago, in both divi and WordPress, and is not really needed anymore at all in Divi 5.So that’s why we would not add any of our features there.