Make your font size responsive using CSS.

One big challenge for frontend web developers is to keep the responsivity on different devices used in portrait and landscape positions or when you use the browser and another app sharing the screen.

For the website structure, we have some tools that help organize our layout in a very dynamic way, but it is a little tricky to make the text content follow this responsivity.

Responsivity using breakpoints.

It is the first approach to adapt all content to different screen sizes, setting breakpoints using media query.

Example changing paragraph font size depending on the screen size breaking point:

@media (min-width:500px) {
  p{font-size: 15px;}
}
@media (min-width:700px) {
  p{font-size: 30px;}
}
@media (min-width:1000px) {
  p{font-size: 50px;}
}

Viewport Sizes

On CSS, we have the fantastic possibility of sizing things in relation to the browser size on the screen.

Viewport units are the values where one unit is 1% of the viewport axes size, this can be very useful for responsive layout.

The viewport can be used for many layout structures, even texts.

Take a look at how to add it to your CSS file:

/* calculated from height */
h1 {
  font-size: 3.8vh; 
}

/* calculated from width */
p {
  font-size: 0.75vw; 
}

Fluid Text

In my opinion, the most efficient way to make responsive text is using Fluid Typography.

Fluid Typography is basically a mix of the two methods that we mentioned before. To make a fluid text, you combine vw and the font size units like px, em and rem using the CSS calc() function.

Example on CSS file:

/* Fluid */
p {font-size: calc(15px + 1.8vw);}

Using this method to add content to your page, you may find more accurate variations that better adapt the text to the responsive layout.

Following, you can see de differences between the methods:

Open the following example on a new tab and change the screen size to compare:

Remembering that the way how the fluid typography was exposed in this post was the simplest possible way to show how this works. We have tons of variations and forms alt there to combine the units and values that can make a deep math calculation to make your page have a very accurate layout.

Thank you for reading.