Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Text & Fonts

CSS Font Size

Written by Updated

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. The supporting concepts are explained in CSS Units and Web Fonts & Typography.

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 TypeDescriptionExample
pxFixed size in pixelsfont-size: 20px;
emRelative to parent elementfont-size: 1.5em;
remRelative to root elementfont-size: 1.25rem;
%Relative percentagefont-size: 120%;
keywordsPredefined sizesfont-size: large;

Readable and scalable type

Body text should normally remain relative to the user's configured default size. Use rem for document-level scales and em when a component should scale from its own inherited size. Viewport units can contribute to fluid headings, but wrap them in clamp() so text never becomes too small on narrow screens or excessively large on wide ones.

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>

Browser Support

Feature
Chrome
Edge
Firefox
Safari
font-size11211

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

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 FamilyNextWeb Fonts & Typography