Fluid typography is web text (or font size) that scales fluidly with the width of the browser. Typically, typography in responsive web design (or responsive typography) involves changing the font size at certain breakpoints via media queries. But this can be a tedious process whenever you are trying to get the right font size for various devices and screen sizes. With fluid typography, the idea is to have the font scale fluidly from a minimum font size and a maximun font size. This gives a more consistent design across various screen sizes without all the fuss. But to make a font size fluid, we need to employ CSS methods that involve using relative length units (like vw), CSS math functions (like calc(), min() and max()), and custom media queries.
In this post, we will help you understand fluid typography and how to create fluid typography in Divi using 6 methods.
Here is a quick look at the type of fluid typography we will design using various methods.
Download the Layout for FREE
To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.
Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
To import the section layout to your Divi Library, navigate to the Divi Library.
Click the Import button.
In the portability popup, select the import tab and choose the download file from your computer.
Then click the import button.
Once done, the section layout will be available in the Divi Builder.
Let’s get to the tutorial, shall we?
What You Need to Get Started
To get started, you will need to do the following:
After that, you will have a blank canvas to start designing in Divi. But before we start testing out some fluid typography examples in Divi, let’s start with a better understanding of what it is.
What is Fluid Typography?
Fluid typography, in the world of web design, is text content that scales fluidly with the size of your browser window (or screen size). Making typography (or text) “fluid” is the method of applying the practices of fluid web design specifically to web text (which is most commonly used in responsive design for scaling the width content containers like columns, rows, and sections). In other words, fluid typography is text on your web page with a font size value that is relative to the width of the browser window. So, as your browser width increases or decreases, so does the text on your page. To accomplish this, we must rely on using a relative length unit like vw (viewport width) instead of px (pixels) which is an absolute length unit. But that’s not all. We must also think about how to properly control that vw font size within a min and max font size.
Fluid typography is different from the traditional responsive design methods for abruptly resizing text at multiple breakpoints using media queries. In Divi, for example, we can add a text module and then use the built-in responsive text design options to set a font size for desktop, tablet, and phone. Although the font size is responsive in that it will change according to each device (or breakpoint), it is not fluid. Fluid typography doesn’t break or jump to a different size at different breakpoints. The font-size starts with a min value and then scales along with the browser until it reaches the max font size you determine.
Why Fluid Typography?
It seems that web design is leaning more toward fluid design practices rather than those of traditional responsive design. With the varying devices and screen sizes out there, it makes sense to have a “fluid” design that’s relative to the browser width. It takes the headache out of resizing elements on different devices. for example, rows and columns are now commonly sized with percentages rather than pixels. And for the most part, content can also be sized to adjust fluidly to their containers (i.e. an image with 100% width will scale fluidly with the column width).
Fluid typography is a helpful tool in web design because it allows font size to scale along with those other fluid design elements on the page (like rows, images, graphics, etc…). This ensures that the design remains more consistent on multiple screen sizes because those design elements won’t be moving (or jumping) around at different breakpoints.
But fluid typography is not as easy to accomplish.
The Unique Challenge of Fluid Typography: Setting a Min and Max Font Size
Using fluid typography in web design has always been a unique challenge for web developers because for a long time CSS didn’t provide a min or max size to a font until very recently. Thankfully, comparison functions like min(), max(), and clamp() have been introduced and are becoming more and more mainstream. But this hasn’t been the issue with other HTML elements like a div or section. For example, you can give a section a max-width and a min-width in CSS with no problem. But for text elements (p, h1, h2, etc…), we need some different methods.
Creating a Simple Divi Layout to Explore Fluid Typography Methods in Divi
Before we tackle the different methods for creating fluid typography in Divi, we need to create a simple layout with a few text modules to use as a template for testing these methods.
To start, add a one-column row to the section.
Then, add a new text module to the column. This will be used to text fluid typography on an H1 heading.
Add an H1 heading to the body content of the text module.
Then update the design as follows:
Next, add a new text module under the previous one. This will be used to test fluid typography on paragraph text.
You can keep the default mock body content for our testing purposes. Under the design tab, update the following:
That’s it! We will use this entire section, including the heading text module and the body text module, as a template to jumpstart each of our example builds in the next part of the tutorial.
Using the Template
If you plan to build each example, you may want to save this section to the Divi library so that you can add it back to the page after each build. Or you can simply duplicate the section before each new build.
Now let’s take a closer look at those fluid typography methods and then use them in Divi.
6 Methods for Creating Fluid Typography and How to Use them in Divi
#1 Using a VW Length Unit for Font Size (useful but limiting)
Using the vw length unit for font size is a key ingredient to fluid typography because the vw length unit is relative to the viewport (or browser width) so it will increase and decrease as the browser width changes. However, using the vw length unit for font size alone does not give you any control over the min or max font size. This means the font size will continue to scale with the browser (or viewport) width without limitation. As a result, you can easily get text that is way too small on mobile and way too large on big monitors.
However, using a vw font size by itself can work perfectly in some instances. For example, if you are wanting to display a fluid heading for your site, you can simply assign a vw length unit as the font size (something like font-size: 5vw). However, you must make sure the container wrapping the heading text has a width equal to the width of the browser window. So, if you were to use this in Divi, you must make sure the section, row, column and module will have a width of 100%.
Divi Example 1: Using the VW length unit After Phone Width to Create Fluid Typography in Divi
Here’s how to use this method in Divi.
The Heading Text
Using the layout template we built earlier, open the settings for the heading text module (the one that includes the H1 heading) and update the following:
The odd px value for the heading text size on phone is actually calculated based on the 5vw used. The actual breakpoint where phone display turns into tablet display is at 767px. And 5% of 767px is 38.35px. This gives me the exact size of the font needed at the breakpoint so there will be no jumping in font size on the transition.
Once the heading text size is set, save the module.
The Body Text
Open the setting for the body text module and update the following:
Example 1 Result
Here is a preview of the result when adjusting the width of the browser window (or viewport).
Notice that the min font-size is 16.1px on phone display and then once it gets to the 767px tablet breakpoint, the 5vw font-size kicks in and continues to font-size continues to scale with the browser.
Main Limitation
If you have a font size with a vw length unit inside a container that has a max-width of 1080px, the font will continue to grow with the browser width while the container stays at a 1080px width which will lead to some design inconsistencies (like having really big text in a small row on large monitors).
#2 Using Calc() and VW Length Unit for Font Size
Using the calc() CSS function to calculate a font-size value with a vw length unit will allow you to designate a min font size while also allowing the text to scale with the browser window using the vw length unit. The limitation is that there is no max limit so although you have solved the min font size problem, you still may find the text getting too uncontrollably big on large monitors.
Divi Example 2: Using a Calculated VW Length unit to Create Fluid Typography in Divi
The Heading Text
Starting from a fresh version of the layout template we built originally, open the setting for the heading text module.
Then update the heading text size:
Then head over to the advance tab and add the following custom CSS to the Main Element:
The em length unit is relative to the element’s font size. So we give the heading text size a value of 1em which is relative to the font size set for the body text of the module which is 14px by default. So that means in our calculation, 3em is 3 times 14px which is 42px. This font-size calculation value gives you more control over starting font-size by adding 2vw to the font-size which is 3em. This will make the text fluid while also making sure the font will never get smaller than 3em.
The Body Text
Next open the body text module and update the text size:
Then add the following CSS to the Main Element:
Example 2 Result
Here is a preview of the result when adjusting the width of the browser window (or viewport).
#3 Using Divi’s Built-in Responsive breakpoints with calc(), and vw for Fluid Font Size on Tablet Display
With Divi, breakpoints are predetermined (built into the theme). But we can still target each of these breakpoints using the built-in responsive tabs for desktop, tablet, and phone displays. This will allow us to add a min font size on phone display, a fluid font size on tablet display, and a max font size on desktop display.
Here’s how to do it.
Heading Text
Using a fresh layout template, open the heading text settings and update the heading text size:
Under the advanced tab, add the following custom CSS to the Main Element:
Desktop
Tablet
Phone
This will set a min font size of 40px on phone, a fluid font size on tablet, and a max font size of 80px on desktop.
Body Text
Next, open the body text module settings and update the body text size:
Under the advanced tab, add the following custom CSS to the Main Element:
Desktop
Tablet
Phone
This will set a min font size of 16px on phone, a fluid font size on tablet, and a max font size of 24px on desktop.
Example 3 Result
Here is a preview of the result when adjusting the width of the browser window (or viewport).
This method is really just a warmup for the next method because it limits the fluid font size on Divi’s built-in tablet breakpoints (between 767px and 980px), but it is helpful for getting a fluid font size on tablet display in Divi. It also introduces the idea of how you can add a fluid font size at certain breakpoints which we will explore further in our next method.
#4 Using Custom Media Queries with calc(), and vw for Fluid Font Sizing at Custom Breakpoints.
For a more customizable and complete fluid typography solution, we must add some custom breakpoints (using media queries) that will extend the area that we want to engage our fluid font size to whatever we want. This will allow us to set a min font size at a small breakpoint (like 480px width) and a max font size at a large breakpoint (like 980px). Then we can use the middle area between the small and large breakpoints to give the font a size that is fluid using a calculation that incorporates the vw length unit. The trick is to use the right calculation in the middle area so that the font size starts becoming fluid (or scaling with the browser width) at the min font size (set at the small breakpoint) and stops at the max font size (set at the large breakpoint). For more info, check out the post on fluid typography by CSS Tricks.
Here’s how to do it.
Using a fresh layout template, open the settings for the heading text module and give a custom CSS Class:
Next, open the body text module and give it the same CSS Class:
Add a code module under the body text module.
Then open the settings for the code module and paste the following code inside the code box making sure to wrap the code in the necessary style tags:
This will give our heading (.fluid-text h1) a min font size of 3em on a screen size below 480px, a fluid font size between 480px and 980px, and a max font size of (3em + 40px) above 980px.
You don’t have to use em length units for the size but I did for this example because it does give you the added bonus of being able to change the font size of the heading and body text using Divi’s built-in text size option, instead of having to update the custom CSS code in the code module.
For example, to adjust the size of the heading text on the heading text module, simply update the body text size (not the heading text size; em is relative to the body text).
To update the body text module body text size, you can simply adjust the body text size in the module as well.
Example 4 Result
Here is a preview of the result when adjusting the width of the browser window (or viewport).
#5 Using min() and max() to Create Fluid Typography in Divi
In addition to calc(), more advanced math functions have been introduced that simplify how we create fluid typography in CSS. These include the min() and max() functions.
On the plus side, creating fluid typography using the min() and/or max() functions to generate font-size is a much simpler solution that doesn’t require media queries. Using basic math, you can establish min font size, a max font size, and a fluid font size that scales between the min and max.
Let’s see this in action using the Divi Builder.
Heading Text
Using a fresh template layout, update the heading text module settings as follows:
Under the advanced tab, add the following CSS snippet to the Main Element:
Body Text
Next, open the body text module settings and update the following:
Under the advanced tab, add the following CSS snippet to the Main Element:
This will assign a min font size of 16px, a fluid (or scaler) font size of 4vw, and a max font size of 24px. The 4vw font size will kick in whenever that value falls between the min and max values.
Example 5 Result
Here is a preview of the result when adjusting the width of the browser window (or viewport).
#6 Using clamp() to Create Fluid Typography in Divi
If the min() and max() functions aren’t simple enough for you, then you might as well use clamp(). It is extremely easy to use, understand, and, in my opinion, more intuitive than using min() or max(). The clamp() function has everything we need in one place, a starting point to set the min font size, a middle area to place to set the fluid font size, and an ending point to set the max font size. These three parameters are a perfect solution for fluid typography.
Now let’s see how easy this is to use in Divi.
Heading Text
With a fresh layout template, open the heading text module and update the heading text size:
Under the advanced tab, add the following CSS snippet to the Main Element:
This will set a min font size of 40px, a fluid font size of 8vw, and a max font size of 80px.
Heading Text
Next, update the body text module text size as follows:
Under the advanced tab, add the following CSS snippet to the Main Element:
This will set a min font size of 16px, a fluid font size of 4vw, and a max font size of 26px.
Example 6 Result
Here is a preview of the result when adjusting the width of the browser window (or viewport).
Browser Support
For the most part, the fluid typography solutions in this article are supported by most browsers. All browsers (even IE) seem to support calc() in CSS, but Safari seems to be a little buggy in that it doesn’t scale when adjusting the browser but will show the correct size on page refresh (weird). However, this bug seems to be solved using custom media queries as we did in method #4 above. The min() max() and clamp() functions (featured in Methods #5 and #6 above) are surprisingly well supported. But they also seem to have the weird safari bug and aren’t currently supported by IE.
So if you are looking for a clear winner on browser support, I guess method #4 is probably the best so far. But if you don’t mind leaving IE in the dust, using clamp() for fluid typography is an amazing solution!
Final Thoughts
Creating fluid typography in Divi has a bit of a learning curve, I’ll admit. However, the benefits of having a fluid font size can be crucial to the overall design of your website. Plus, it takes out the headache of adjusting the font size using a ton of media queries to get it just right for every device. Hopefully, these methods will help you create fluid typography on your own Divi project.
I look forward to hearing from you in the comments.
Cheers!
This content was originally published here.