CSS font-size Property

Last Updated : 13 Jun, 2023

The font-size property in CSS is used to set the font size of text in HTML document.

Syntax:

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

Default Value: medium

Property Values:

absolute-size: The absolute-size is used to set the font size absolutely. The default value of absolute-size is medium. The list of absolute-size properties are xx-small, x-small, small, medium, large, x-large, xx-large.
relative-size: It contains two values smaller and larger. The font-size is smaller or larger depends on the parent element.
length: This property is used to set the font-size in length. The length can be in the form of px, cm etc.
global: This property contains three types of values such as initial | inherit | unset.

Syntax:

font-size: medium|xx-small|x-small|small|large|x-large|xx-large;

Example: In this example, we are using abe explained property.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS font-size property
    </title>
 
    <!-- CSS style to set font-size property -->
    <style>
        .xxsmall {
            color: green;
            font-size: xx-small;
        }
 
        .xsmall {
            color: green;
            font-size: x-small;
        }
 
        .small {
            color: green;
            font-size: small;
        }
 
        .medium {
            color: green;
            font-size: medium;
        }
 
        .large {
            color: green;
            font-size: large;
        }
 
        .xlarge {
            color: green;
            font-size: x-large;
        }
 
        .xxlarge {
            color: green;
            font-size: xx-large;
        }
    </style>
</head>
 
<body>
    <h1>font-size property</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 property

Example: In this example, we are using font-size: smaller|larger; property.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS font-size Property
    </title>
 
    <!-- CSS property to set font-size -->
    <style>
        .smaller {
            color: green;
            font-size: smaller;
        }
 
        .larger {
            color: green;
            font-size: larger;
        }
    </style>
</head>
 
<body>
    <h1>font-size property</h1>
 
    <div class="smaller">
        font-size: smaller;
    </div>
    <div class="larger">
        font-size: larger;
    </div>
</body>
</html>

Output:

font-size property

Example: In this example, we are using font-size: length; property.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS font-size Property
    </title>
 
    <!-- CSS property to set font-size -->
    <style>
        .length {
            color: green;
            font-size: 40px;
        }
    </style>
</head>
 
<body>
    <h1>font-size property</h1>
 
    <div class="length">
        font-size: length;
    </div>
</body>
</html>

Output:

font-size property

Example: In this example, we are using font-size: initial property.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS font-size Property
    </title>
 
    <!-- CSS property to set font-size -->
    <style>
        .length {
            color: green;
            font-size: initial;
        }
    </style>
</head>
 
<body>
    <h1>font-size property</h1>
 
    <div class="length">
        font-size: initial;
    </div>
</body>
</html>