How To Decrease Font Size With Browser Resize

In this article, we will learn How to decrease font size with browser resizing.

We can adjust font-size based on the size of the screen using calc() and it’s called Fluid Typography.

Here is Syntex:

h2 {
  font-size: calc(minimum_size with px + (maximum_size - minimum_size) * ((100vw - minimum_viewport_width with px) / (maximum_viewport_width - minimum_viewport_width)));
}

• minimum_size: Your minimum font size like 16.
• maximum_size: Your maximum font size like 90.
• minimum_viewport_width: Your minimum browser width like 320.
• maximum_viewport_width: Your maximum browser width like 1920.

Here is an example:

h2 {
  font-size: calc(16px + (90 - 16) * ((100vw - 320px) / (1920 - 320)));
}

Output: