CSS font-size

Demo

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.

Specifications

Initial Value
medium
Applies To
All elements
Inherited?
Yes (the computed value)
Media
Visual
Animatable
Yes (see example)

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