How to Change Font Size in HTML ?

Last Updated : 26 Mar, 2024

To change the font size of any text we can use the CSS font-size Property, or some HTML keywords have some fixed font size but we change them by using this CSS property. We can use style attributes in the HTML. As we know, HTML has no <font> tag, so we are using CSS style to add font size.

The CSS font-size property enables specifying the size of text within HTML elements. It accepts various units such as pixels, ems, or percentages to determine the font size, allowing precise control over text appearance and readability.

Syntax:

font-size: medium|xx-small|x-small|small|large|x-large|
xx-large|smaller|larger|length|initial|inherit;

Example: In this example, we defined the class in HTML and then applied the property in CSS.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>CSS font-size property</title>
        <!-- CSS style to set font-size property -->
        <style>
            .xxsmall {
                font-size: xx-small;
            }

            .xsmall {
                font-size: x-small;
            }

            .small {
                font-size: small;
            }

            .medium {
                font-size: medium;
            }

            .large {
                font-size: large;
            }

            .xlarge {
                font-size: x-large;
            }

            .xxlarge {
                font-size: xx-large;
            }
        </style>
    </head>
    <body>
        <h1>Changing the Font Size</h1>
        <div class="xxsmall">
            font-size: xx-small;
        </div>
        <div class="xsmall">
            font-size: x-small;
        </div>
        <div class="small">font-size: small;</div>
        <div class="medium">
            font-size: medium;
        </div>
        <div class="large">font-size: large;</div>
        <div class="xlarge">
            font-size: x-large;
        </div>
        <div class="xxlarge">
            font-size: xx-large;
        </div>
    </body>
</html>

Output:

font size

Example 2 : In this example,we are inline styling Sets heading color to green and font size to 40px. Sets paragraph color to blue and font size to 18px for GeeksforGeeks welcome message.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>HTMLFont size</title>
    </head>
    <body>
        <h1 style="color: green; font-size: 40px">
            Welcome to GeeksforGeeks
        </h1>
        <p style="color: blue; font-size: 18px">
            Inline styling
        </p>
    </body>
</html>