If you use Divi theme (and Divi Builder), there’s a number of handy ways to implement fluid typography. I suggest studying the excellent Elegant Themes article The Complete Guide for Creating Fluid Typography in Divi (6 Methods).
The most convenient method (number 6 in that article) is to use the clamp() function. The way this method is described in the article suggests you have to add custom CSS (e.g., font-size: clamp(16px, 4vw, 26px) !important;) to every text block you want to make fluid, and you’ll need to separate out all heading text from body text, putting each into its own text module. That is likely to be very tedious and time consuming.
Looking through the comments on that article, I see a number of people asking how to make the clamp() method more universal, to avoid having to apply it to every text module and, most importantly, to avoid having to separate out heading text and body text into their own modules.
The Universal Approach
Using Method 6 from the article in a way that’s universal is relatively simple. In your child theme style.css file (or in Divi Theme Options > Custom CSS) you need to set up declarations for your headings (H1, H2, H3 etc.).
Here’s an example:
H1 {
font-size: clamp(30px, 4vw, 60px) !important;
}
H2 {
font-size: clamp(25px, 4vw, 45px) !important;
If you need to vary the font settings for a particular instance of a heading size (such as H1, you will need to set up a Custom Class on that instance, and then add the necessary CSS in your styles.
You might then add something like this to your styles:
.custom-h1 h1 {
font-size: clamp(20px, 4vw, 40px) !important;
}
You now have universal fluid typography using
clamp().
If you have any questions, let me know.