I will explain in an easy-to-understand manner how to specify the maximum and minimum values ​​at the same time while changing the font size responsively using “vw” that can specify the size with respect to the width of the viewport.

With media queries, it’s easy to change the font size in steps like 14px → 18px → 24px. You just need to specify the font-size for each resolution by CSS Media Query.

So how do you change the font size smoothly according to the size of the screen? Yes, let’s use vw.

What is “vw”?

Viewport Width unit (vw) is based on the width of the viewport. A value of 1vw is equal to 1% of the viewport width.

For example, if it is displayed in an environment with a width of 1280px

100vw = 1280px
50vw = 640px
3vw = 38.4px

In this way, you can specify a numerical value based on the width of the screen, which is useful when creating a responsive website. By the way, if you use the unit “vh”, you can specify the numerical value according to the height of the screen. I often use it for the main visual of full screen display.

And since this unit called “vw” can also be used with the value of font-size, it is possible to dynamically change the font size if used properly.

Specifying vw for font-size

First of all, it is a display result that only specifies 3vw for font-size

<style>
  font-size: 3vw;
</style>

<div>Sample Text</div>

If you change the size of the browser, you can see that the font size changes smoothly.

However, at this rate, the characters are too small on a small screen like a smartphone, and the characters are too large on a high-resolution environment like a 4K monitor.

To resolve this issue, you need to specify a minimum and maximum font size.

Specify the maximum and minimum values

Let’s consider a specification method that can satisfy the following conditions:

  • Fixed font size to 16px in an environment with a width of less than 640px.
  • Fixed font size to 36px in an environment with a width of 1200px or more.
  • Smoothly change the font size between 640 and 1200px.

Here is how to specify the font-size that meets these conditions:

div {
  font-size: 16px; // Minimum value
}
@media (min-width: 640px) {
  div {
    font-size: calc(16px + ((1vw - 6.4px)*3.571));
  }
}
@media (min-width: 1200px) {
  div {
    font-size: 36px; // Maximum value
  }
}

<div>Sample Text</div>

The description has suddenly become confusing, but let’s check it one by one.

Updating…

Reference:
https://kuzlog.com/2019/05/12/3669/