Blog

Responsive Font in DIVI

Responsive Font in DIVI

Anto Fernandez

Responsive fonts in DIVI? Is that even possible? YES!!!! What is more, you can do it with any font type! So today we would like to tell you a bit about the Divi responsive font. We will show you how to adapt the font size to your screen, no matter if you look at the screen from different devices or if you reduce the size of your browser. We will use the VW (View Width) measurement unit, which is quite unknown.

Have a look at this video! It will clarify everything 😉

The font size of the first text is 7.2vw and the second is measured in pixels, which is 135px. As you can see in the first typography, it starts to reduce as we narrow the window. On the other hand, on the second text, the size is permanent and it reaches a point where it doesn’t fit in our column and it overflows it. 🙁

What is the VW measurement?

I am not going deep into the explanation of the different measurement units of our web, I will simply say that with DIVI we mainly have the px and the em. We can also work with other units such as “VW”. If you are interested in knowing more about this topic I really recommend the following post by Mozilla.

VW is a measurement unit related to the width of our device. So this means that 100 vw is the total width of our screen. For instance, if our device’s width is 1920px, 10vw would be a total of 192px. If the user makes the window smaller or the website is looked from a mobile device, this measure will always be related to this size. 10vw will always be 10% of the width of your screen. If the window’s measure is 1920px then 10vw equate to 192px.

How do we use the responsive font size?

It is pretty simple, instead of writing the px or em, we simply write vh on the measure text box that we want.

3vKI7jOoZxveRuW7HrtIG Bftya92Jfm6VllJ3a32t3LgiW1TL9MgZ4qDPror b2 gmgyU1m76KnaQ etCOeKXuBAAhdyn2lzOCxo7YN9 IHB0P26m6YLMw665 UbaKkgZZzwCIkXU5 q2WOTkJBXPQ

Important! You can combine different unit measures and sizes for each device. In fact it will be necessary for you to revise the values in your tablet or phone to avoid wrong results.

When is it interesting to use the responsive font in DIVI?

Using responsive typography is highly advisable on big titles that occupy the entire screen so therefore we can avoid linebreaks. That used to happen to us in our online shop home page and after constantly bumping into that problem this idea was created🙂.

If you are interested in this theme and you know how to use CSS, we invite you to explore the recent Clamp that allows us to establish the different font sizes depending on the resolution of the device.

Did you know that you can adapt the size of your typography to any device? Was this interesting? We hope it was! Comment and subscribe to our list to get the best hacks and suggestions like this one in your inbox.

About Destaca Imagen

CHEMA & ANTO

We are brothers. As a designer and developer, we have decided have to join forces  to create plugins and themes for WordPress.

 

¡Apuntate a nuestra lista!

Los mejores trucos y tutoriales para Divi y WordPress en tu bandeja de entrada

Join our list!

The best tricks and tutorials about Divi in your inbox

On our shop

En nuestra tienda

Suscribe

The best tricks and tutorials about Divi in your inbox

Apúntate a nuestra lista

Los mejores trucos y tutoriales para Divi en tu email

También te podría gustar:

You may also like

Text over image in DIVI

Text over image in DIVI

Today we want to share with you an interesting hack to improve the legibility of the images that have a text over it in Divi. This tutorial is in our  Divi Basics and has been written for users that have just begun in Divi. Nevertheless we can tell you that there...

Full Height Section in DIVI

Full Height Section in DIVI

How do I create a section that fills the total height of the screen (full screen) in DIVI? In this post we are going to show you how to create the sections that occupy the entire height of the screen. This is ideal for creating more visual webs, powerful call to...

How to change the color of menu’s links in Divi

How to change the color of menu’s links in Divi

Divi is a popular WordPress theme that comes with a powerful page builder and a wide range of customization options. But it has some limitations and sometimes we need to add CSS code. In fact, we can edit from the back office the color's link, font-size, lettering...

How to change the order of the Divi’s columns in mobile?

How to change the order of the Divi’s columns in mobile?

Divi is a fantastic builder with a few options to create any website. At times it is also necessary to use CSS if we want to achieve the best results. In the example of this post we are going to change the order of the divi columns in mobile device. As we can see in...

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Select currency
Euro
$ United States (US) dollar

Get 5€ Off now!

Register now and get free coupon code.

 Register Now