CSS font-size

Demo

Copy

The CSS font-size property is used for specifying the size of a font. You can specify the font size as an absolute size, relative size, length, or percentage. See below.

Tip: Use font property to set the most common font properties in one go.

Syntax

font-size: <value>

Possible Values

Absolute Sizes:
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
Relative Sizes:
  • larger
  • smaller
Length:
  • An absolute font size (independent of the user agent's font table). Negative lengths are illegal.
Percentage:
  • An absolute font size relative to the parent element's font size.

Initial Value

medium

Applies To

All elements

Inherited?

Yes (the computed value)

Media

Visual

Example Code

h1 { 
  font-size: 24px; 
  }
p { 
  font-size: 1em; 
  }
blockquote { 
  font-size: 120%; 
  }
nav { 
  font-size: smaller; 
  }

Absolute-Size Reference

Here's a rough guide as to mappings between CSS absolute sizes and HTML heading and absolute font sizes.

Note that the actual value may vary, depending on the value of font-size-adjust, and the unavailability of certain font sizes.

CSS absolute-size values xx-small x-small small medium large x-large xx-large
scaling factor 3/5 3/4 8/9 1 6/5 3/2 2/1 3/1
HTML headings h6 h5 h4 h3 h2 h1
HTML font sizes 1 2 3 4 5 6 7