CSS HTML

How to make the font-size responsive according to the size of the screen

February 12, 2022

How to make the font-size responsive according to the size of the screen

In this article we will learn how to make the font-size responsive according to the size of the screen, that is, the letters will adapt based on the resolution of the browser or cell phone you are accessing.

font-size responsive according to the size of the screen cover

Hey you all guys, ok? Let’s learn to make the font adaptable to the resolution of the device that accesses the page!

You must be using the px unit of measure to size the fonts, and what ends up happening is that depending on the resolution the fonts are too big or too small

Then it comes the challenge, how to adapt these fonts to smaller or larger resolutions?

We have some possibilities, the first one would be the media query, but I should warn you before that there are easier ways

Responsive Font With Media Query

I use media query if the project is ready and I need to make small adjustments, in the case of font size, otherwise I don’t usually use this feature

Here’s an example of a media query:

p {
 font-size: 20px;
}

@media(min-width: 425px) {
 p {
  font-size: 25px;
 }
}

In this case we have p tags (paragraphs) with a font-size of 20px in the project

But we created a media query that will act when the screen gets smaller than 425px, making the style that is inside the media query take effect

That is, the paragraphs will have a font-size of 25px, increasing the font of all of them

This is an easy way to adapt the font to responsiveness, but depending on the amount of elements it can be difficult.

The other available ways would be to set the font-size with em and rem

Responsive font-size with em and rem

Let’s first understand the difference between each one of them.

Basically rem adapts to the font-size of the root element, hence the r of rem

That is, if we have font-size as 16px in the html tag, we have the following cases:

  • 1em = 16px
  • 2em = 32px
  • 3em = 48px

Thus, we can standardize all the fonts of the page elements based solely on the root element (the html)

Making it much easier to make the font responsive and not lose track of all project fonts throughout the project

Take a look at this example:

html {
 font-size: 16px;
}

h1 {
 font-size: 2rem;
}

p {
 font-size: 1rem;
}

As for em, we have a greater possibility of customization because it is linked to the font of the parent element of the element that is receiving the font

So if an element p, has a parent div with a font-size of 18px and the paragraph has a font-size of 2m, its result in pixels would be 36px

The multiplication scheme is equal to the rem, i.e. 2em = 2 * font-size of the parent element and so on

So now it’s up to you! The most used ways to adapt fonts to responsiveness have already been clarified, it will now depend on your project and how one of these ways adapts to it

Conclusion

In this article we learned  how to make the font-size responsive according to the screen size

We learn 3 ways:

  • media query: can be added to several break points, allowing great flexibility;
  • rem: measure of font-size that respects the size of the root element, the html
  • em: font-size measure that respects the font size of the parent element

Each one has its own way of using it, but if I were to start a project from 0, I would go with rem 🙂

Want to learn more about CSS? Click here!

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x