Make your fonts responsive without javascript or media query

There are a couple of ways to make the fonts responsive. In this short tutorial, I jump right on a way to make the fonts responsive that in most cases works the best.

Did you know that you can implement your websites or landing pages with or without coding on DoTenX for free? Make sure to check it out and even nominate your work to be showcased. DoTenX is open-source and you can find the repository here: github.com/dotenx/dotenx.

You might think we can use media queries to make the fonts responsive. While this works fine in many case, the problem with this approach is that for a whole range of screen sizes your fonts will be the same which is not ideal.

.my-text {
  font-size: 16px;
}

@media (min-width: 600px) {
  .my-text {
    font-size: 18px;
  }
}

@media (min-width: 900px) {
  .my-text {
    font-size: 20px;
  }
}

In this example the elements with class my-text will have the same font-size on a screen size of 900 pixels, 1000 pixels, or 1400 pixels!

One solution would be to use vw instead of the absolute units like px.

.my-text {
  font-size: 2vw;
}

The problem with this approach is that the fonts can become too small or too large on some screens.

What's a better solution?

.my-text {
  font-size: clamp(2vw, 16px, 24px);
}

The clamp function takes three arguments: the minimum value, the desired value, and the maximum value. In this example, the minimum value is 16px, the desired value is 2vw, and the maximum value is 24px. The clamp function will return the desired value if it is within the range specified by the minimum and maximum values, otherwise it will return the minimum value if the desired value is less than the minimum, or the maximum value if the desired value is greater than the maximum.