CSS Font Size

The CSS Font Size property is used to control the size of text displayed on a webpage.

Adjusting font size helps improve:

Readability
Accessibility
Visual hierarchy
User experience

Different font sizes are often used to distinguish headings, subheadings, and body text.

Syntax

CSS Font Size Syntax

css

selector {
    font-size: value;
}

CSS Font Size Example

css

p {
    font-size: 18px;
}

This sets the paragraph text size to 18 pixels.

Attributes

Value Type	Description	Example
px	Fixed size in pixels	font-size: 20px;
em	Relative to parent element	font-size: 1.5em;
rem	Relative to root element	font-size: 1.25rem;
%	Relative percentage	font-size: 120%;
keywords	Predefined sizes	font-size: large;

Example

CSS Font Size Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Font Size Example</title>
    <style>
        h1 {
            font-size: 36px;
        }
        h2 {
            font-size: 2rem;
        }
        p {
            font-size: 18px;
        }
        .small-text {
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h1>Main Heading</h1>
    <h2>Sub Heading</h2>
    <p>This paragraph uses a font size of 18px.</p>
    <p class="small-text">This paragraph uses a smaller font size.</p>
</body>
</html>

Output

Browser Output

css

The main heading will appear large (36px)
The subheading will appear slightly smaller
The first paragraph will display at 18px
The second paragraph will display at 14px

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

Notes

px provides fixed sizing.
rem is commonly recommended for modern responsive websites.
Avoid very small font sizes that reduce readability.
Use a consistent font scale throughout your website.
Larger font sizes help create visual hierarchy between headings and content.

Conclusion

The CSS Font Size property allows you to control how large or small text appears on a webpage. By choosing appropriate font sizes and units, you can improve readability, accessibility, and the overall design of your website.

PreviousCSS Font Family NextCSS Display