Open In App
Related Articles

Font scaling based on width of container using CSS

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

In this article, we are going to discuss how can we scale the font based on the width of the container. The font size can be set with the “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; // #vw is the font size
// CSS Property
}

Example 1: In this example, we are using viewport width as a value of font size.

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: 

ezgifcom-video-to-gif-(10)

Output

Example 2: In this example, we have used Media queries for responsive font size.

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: 

ezgifcom-video-to-gif-(11)

Output

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



Last Updated : 29 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads