Skip to content
Related Articles

Related Articles

Font scaling based on width of container using CSS
  • Last Updated : 31 Mar, 2021

The font size can be set with vw (viewport) unit, which means the viewport width. The viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm. That way the font size will follow the size of the browser window.
Syntax: 
 

element {
    font-size: #vw;
    // CSS Property
}

Where # is a number relative to the container size.
Example 1: 
 

html




<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Font Scaling</title>
    <style>
      #container {
        display: inline-block;
        background-color: green;
        padding: 0.5vw 1vw;
      }
      .divtext {
        display: table;
        color: white;
        font-family: impact;
        font-size: 4.2vw;
      }
    </style>
  </head>
  <body>
    <h1>GeeksforGeeks</h1>
    <div id="container">
      <div class="divtext">
        Resize the browser window to see how the font size scales.
      </div>
    </div>
  </body>
</html>

Output: 
 

Example 2: Media queries can be used to change the font size of an element on specific screen sizes. 
 



html




<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Font Scaling</title>
        <style>
            h2 {
                text-align: center;
            }
            div.example {
                background-color: lightgreen;
                padding: 20px;
                text-align: center;
            }
            @media screen and (min-width: 601px) {
                div.example {
                    font-size: 40px;
                }
                .a{
                    font-size: 25px;
                    text-align: center;
                }
            }
            @media screen and (max-width: 600px) {
                div.example {
                    font-size: 30px;
                }
                .a{
                    font-size: 18px;
                    text-align: center;
                }
            }
            @media screen and (min-width: 800px) {
                div.example {
                    font-size: 60px;
                }
                .a{
                    font-size: 35px;
                }
            }
        </style>
    </head>
    <body>
        <div class="example">Font size automatically adjusting
        according to the width of the container</div>
        <p class = "a">Change the width of the browser window
        to see the font scaling automatically according to the
        container size.</p>
 
    </body>
</html>                   

Output: 
 

Note: Change the size of the browser window to see the changes in the font size.
 

My Personal Notes arrow_drop_up
Recommended Articles
Page :