CSS

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:

Ankit Bavishi

I am an sr. WordPress developer and web designer and Project Manager and Specialized in developing Wordpress, Customization Theme, HTML, CSS, jQuery, Ajax, and Author at thecodehubs.

View Comments

Share
Published by
Ankit Bavishi

Recent Posts

Testing hk

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Operation

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

TETS NEW

test

2 years ago