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.

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.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

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