How to change font size depending on width of container?️‍🔥

There are various ways of putting some text in a container and having some size to fill that container.
There are different methods such as using CSS and jQuery which are explained below.

Using CSS property (Viewport width): The vw is a CSS property, to create responsive typography in the HTML file. The viewport is a browser window size. The “text-size” can be set with a “vw” units and you can find an exact number where the text pretty closely fits the container and doesn’t break as you resize the browser window.

1vw = 1% of viewport width. If the viewport is 100cm wide, 1vw is 10cm.

Example:

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
  
<head> 
    <meta charset="utf-8"> 
    <title> 
        How to change font size  
        depending on the width  
        of container? 
    </title> 
  
    <style> 
        h1 { 
            font-size: 8vw; 
            color: green; 
            font-weight: bold; 
        } 
  
        p { 
            font-size: 3vw; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>Beginner for Beginner</h1> 
  
    <p> 
        Resize the browser window  
        to see how the font size  
        changes. 
    </p> 
</body> 
  
</html> 

Output:

On Desktop:
On iPad:

Using CSS property (Media Queries): You can also use media queries to change the font size of an element on specific screen sizes. The @media rule, which makes it possible to define different style rules for different media types.

Example:

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
  
<head> 
    <meta charset="utf-8"> 
    <title> 
        How to change font size  
        depending on width of  
        container? 
    </title> 
      
    <style> 
        h1 { 
            color: green; 
        } 
  
        @media screen and (min-width: 601px) { 
            h1 { 
                font-size: 80px; 
            } 
  
            p { 
                font-size: 40px; 
            } 
        } 
  
        @media screen and (max-width: 600px) { 
            h1 { 
                font-size: 40px; 
            } 
  
            p { 
                font-size: 20px; 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <h1>Beginner for Beginner</h1> 
  
    <p> 
        Set the <em>font-size</em> of "h1"  
        to "40px" and <em>paragraph</em> to 
        "20px", when the window's width is 
        "600px" wide or less and when it  
        is "601px" or wider, set the  
        <em>font-size</em> to "80px" and 
        <em>paragraph</em> to "40px".  
        Resize the browser window to  
        see the effect. 
    </p> 
</body> 
  
</html> 

Output:

On Desktop:
On iPad:

Using FitText jQuery plugin: There is a jquery plugin that can make font-sizes flexible on the responsive layout, namely FitText. For instance, one can use the plugin to do scalable text sizes with respect to the container’s width.

Example:

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
  
<head> 
    <meta charset="utf-8"> 
    <title>H 
        ow to change font size  
        depending on width of c 
        ontainer? 
    </title> 
      
    <style> 
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>Beginner for Beginner</h1> 
  
    <p> 
        Resize the browser window  
        to see how the font size  
        scales. 
    </p> 
  
    <script type="text/javascript" src= 
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/textFit.js"> 
    </script> 
      
    <script type="text/javascript"> 
        textFit(document.querySelector("h1")); 
    </script> 
</body> 
  
</html> 

Output:

On Desktop:
On iPad:

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.