How to make font size grow according to the size of the screen using CSS?
Tags: css
Published: 2022-12-12 05:38:08

---
  title: How to make font size grow according to the size of the screen using CSS?
  published: true
  tags: CSS
  date: Mon Dec 12 2022 11:08:08 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/make-font-size-grow-according-size-of-screen-using-css
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_9925293922.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/make-font-size-grow-according-size-of-screen-using-css)
  To make the font size grow according to the width of the screen, the better way is to use the `clamp()` CSS function and pass the minimum font size value, the preferred font size value and finally the maximum font size value it should take according to the width of the screen.

The `clamp()` CSS function accepts three arguments such as:

- the first argument is the minimum value to stop resizing the font size if it is equal to or below a supplied font-size value.
- the second argument is the rate at which the font size should grow according to the screen size.
- the third argument is the maximum value to stop resizing the font size if it is equal to or above a supplied font-size value.

**NOTE: `clamp()` CSS function is not only reserved for the `font-size` property and can be used in various other properties too. The above explanation is to understand its usage of it concerning the font-size CSS property**

### TL;DR

```html
<html>
  <body>
    <p>Hello World</p>
  </body>
  <!-- Style for fonts -->
  <!--
    Add `0.75rem` with `2vw` as the second 
    argument to the `clamp()` CSS function
    - add a minimum value as the first argument
    - add a maximum value as the third argument
  -->
  <style>
    p {
      font-size: clamp(1rem, 2vw + 0.75rem, 1.5rem);
    }
  </style>
</html>
```

For example, let's say we have a text called `Hello World` on the webpage. The HTML for that would look something like this,

```html
<html>
  <body>
    <p>Hello World</p>
  </body>
</html>
```

To grow the font size of the `paragraph` tag text at a rate of `1%` to the width of the screen, we can use the `2vw` unit in CSS.

**NOTE: `1vw` unit refers to `1%`of the width of the screen.**

To do that let's define our `font-size` CSS property and then use the `2vw` the like this,

```html
<html>
  <body>
    <p>Hello World</p>
  </body>
  <!-- Style for fonts -->
  <style>
    p {
      font-size: 2vw;
    }
  </style>
</html>
```

Now there are 2 problems with this approach:

- one is the font size won't increase if the user tries to magnify the webpage, because the font size property is tied to the view width or the width of the screen only.

- the second one is if the width of the screen is too low, the font size becomes too small to read and if the screen becomes too big it becomes really large also.

Visually the webpage looks like this,

![font size not scaling correctly when the user increases or decreases mangification](/uploads/01_d16ea8210e.gif)

To avoid this problem, let's first tie the font size unit with the relative root font-size value of the webpage, in our case we will be using `0.75rem`. The `0.75rem` means `0.75 * 16px` (In our case, `16px` is the default font size of the root element).

So let's add the `0.75rem` unit with the `2vw` using the `clamp()` CSS function and pass this value as the second argument to the function.

It can be done like this,

```html
<html>
  <body>
    <p>Hello World</p>
  </body>
  <!-- Style for fonts -->
  <!--
    Add `0.75rem` with `2vw` as the second
    argument to the `clamp()` CSS function
  -->
  <style>
    p {
      font-size: clamp(0, 2vw + 0.75rem, 0);
    }
  </style>
</html>
```

Now when the user magnifies the webpage, the font size increases.

It looks like this,

![font size scales as user increases or decreases magnification](/uploads/02_755ba15763.gif)

Now the only problem is that we need to set a minimum font size till it should decrease and a maximum value the font size should increase and then stops. Otherwise, it will keep on increasing or decreasing as the screen keeps on getting smaller or bigger.

To do that we need to pass the minimum font size and the maximum font size as the first and third arguments to the `clamp()` size CSS function.

Let's pass the value of `1rem` as the minimum value and `1.5rem` as the maximum value.

It can be done like this,

```html
<html>
  <body>
    <p>Hello World</p>
  </body>
  <!-- Style for fonts -->
  <!--
    Add `0.75rem` with `2vw` as the second 
    argument to the `clamp()` CSS function
    - add a minimum value as the first argument
    - add a maximum value as the third argument
  -->
  <style>
    p {
      font-size: clamp(1rem, 2vw + 0.75rem, 1.5rem);
    }
  </style>
</html>
```

Now the webpage has a minimum and maximum font size it can scale to.

The webpage text now scales like this when screen size increases or decreases,

![webpage now scales as user increases or decreases screen width](/uploads/03_fd8b665254.gif)

We have successfully made the font size grow according to screen size. Yay 🥳!

See the above code live in [codesandbox](https://codesandbox.io/s/make-font-size-grow-according-size-of-screen-using-css-xzc38j?file=/index.html).

That's all 😃.