Font Scaling Based on Width of Container Using CSS

Last Updated : 15 Sep, 2024

Adjusting font size dynamically according to the width of the container can enhance the readability and aesthetic of your web content. This technique is particularly useful for responsive designs, where text needs to adapt to different screen sizes or container dimensions. By using viewport units (vw) and media queries, you can create a more flexible and visually appealing layout.

Syntax:

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

Approach

We’ll look at two main methods to achieve font scaling based on container width:

Using Viewport Width (vw) Units: This method scales the font size relative to the viewport width. 1vw is equal to 1% of the viewport’s width, making the font size adjust as the viewport changes.
Using Media Queries: This method allows for more controlled and granular font scaling based on specific screen width ranges, making it suitable for different devices.

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:

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:

Note: Experiment with resizing your browser window to observe how the font size adjusts according to the viewport or container width. This approach ensures your text remains readable and appropriately sized on various devices and screen sizes.

Font Scaling Based on Width of Container Using CSS

Vishal Chaudhary 2

Improve

Article Tags :

Font Scaling Based on Width of Container Using CSS

Syntax:

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?