How to apply fluid typography in a WordPress theme using theme.json

Find out in this tutorial how to use fluid typography in a WordPress theme using the theme.json file.

One of the most complex things as an implementer or web developer is having to deal with an almost infinite number of screen sizes (and their respective resolutions). For this reason, until recently we were forced to use media queries to make the font size fit the screen.

But that can change thanks to fluid typography. This has the advantage that it adapts to the screen size (viewport) dynamically.

What allows this “magic” to work is the CSS function clamp(), which performs mathematical calculations using a minimum and a maximum. This function has been around for a while but is now supported by all major browsers (+94%).

Thanks to this broad support and the use of the theme.json file, WordPress 6.1 has included in the core instructions that will make it much easier to implement it in any WordPress theme.

And yes, I said any theme. Because this functionality is not reserved for block themes but can also be applied to any classic theme.

In fact, below you can see the result of applying it to a classic theme:

Let’s see how to achieve it:

Instructions for implementing fluid typography to a WordPress theme

A. Add or modify the theme.json file

In case the theme doesn’t have it, you have to create a file called theme.json and place it in the root of your theme.

Once you have done that, add the following code :

Using this snippet, you add the 4 sizes to the typography settings shown in the editor.

There are several points to note:

• You have to activate the fluid typography by giving the true setting to the fluid attribute (inside typography).
• You have to define different properties:
  • “size": font size
  • "fluid"(optional):
    • “min": minimum font size
    • “max“: maximum font size
  • "slug": slug to be used to create the CSS variable.
  • "name" (optional): name that will appear in the editor.

The interesting thing is that, just by adding a minimum and maximum, the WordPress core takes care of the rest to create the typography. As I mentioned at the beginning, using the CSS clamp() function. This is the result you get when using the code above:

--wp--preset--font-size--small: clamp(0.9rem, 0.9rem + ((1vw - 0.48rem) * 0.577), 1.2rem);

--wp--preset--font-size--medium: clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3.3rem);

--wp--preset--font-size--neutral: 2.8rem;

--wp--preset--font-size--large: clamp(3.5625rem, 3.5625rem + ((1vw - 0.48rem) * 6.851), 7.125rem);

As you can see, it uses the slug to create the CSS variable --wp--preset--font-size--slug and inserts the maximum and minimum values into the clamp() function.

If in a size the fluid property is set to false, as in the case of the “neutral” in this example, the clamp() function is not used and the same font size (2.8rem in the example) will be displayed on all devices.

And in the case that you do not declare a minimum and maximum (if the fluid property has not been defined as false), as in the “large” size, WordPress is responsible for making the calculation using the value you enter in "size". The result is a font that also adapts to the screen size.

This is just an example to let you know all the possibilities. But the idea is that you adjust it to your needs and create the font sizes you want (with the properties you choose).

B. Modify the theme.json file

In case your theme already has a theme.json file you can add the fluid typography in a similar way. To do this, place the following code after "typography": { until its closing (}).

3. Interface in the block editor

Once you have added these lines, either by adding a new theme.json file or modifying an existing one, you will see that in the typography section of the editor sidebar you can choose between the font sizes you have created:

Once you have done this, you will see how the text adapts fluidly to the screen size:

Conclusions

Being able to take advantage of fluid typography in a WordPress theme is easier than ever. With a few lines of code you can choose the minimum and maximum font size to dynamically adapt according to the screen size.

Now you can now leave media queries aside.

In addition, you can apply it to both blocks and classic themes.

Any questions? Let me know in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉