How to change font size using CSS ?

Last Updated : 06 Jun, 2023

The purpose of this article is to change font-size using CSS. To change the font size using CSS, you can use the font-size property and specify the desired value. The value can be in pixels, percentages, ems, rems, or other valid CSS units. Adjusting the font-size property allows you to control the size of the text within HTML elements.

The font-size CSS property sets the size of the font. There are several ways to specify the font size, including keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs of the particular web page.

Syntax :

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

Example: In this example, we are using the above-explained method.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .div1 {
            font-size: 1.2em;
        }
 
        .div2 {
            font-size: smaller;
        }
 
        .div3 {
            font-size: 80%;
        }
 
        .div4 {
            font-size: 12px;
        }
 
        .div5 {
            font-size: x-small;
        }
    </style>
</head>
 
<body>
    <div class="div1">GeeksforGeeks</div>
    <div class="div2">GeeksforGeeks</div>
    <div class="div3">GeeksforGeeks</div>
    <div class="div4">GeeksforGeeks</div>
    <div class="div5">GeeksforGeeks</div>
</body>
</html>