The font-size property sets the font size of the text inside the element to which it is applied, and that of its descendants. You can size text using absolute measurements, or measurements relative to the affected element's parent or root elements. Sets the size of the font within an element.

  • Initial valuemedium
  • Applies toAll elements
  • InheritedYes
  • MediaVisual
  • Computed valueAbsolute length
  • AnimatableYes
  • CSS VersionCSS1, CSS2, CSS3
  • JavaScript
Formal syntax: <absolute-size> | <relative-size> | <length> | <percentage> 

font-size: xx-small; /* <absolute-size> */
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

font-size: larger; /* <relative-size>*/
font-size: smaller;

font-size: 14px; /* <length> */
font-size: 1.2em;

font-size: 30%; /* <percentage> */
  • <absolute-size>A set of keywords indicating predefined font sizes that scale according to font setting preferences or each browser's default values. From smallest to largest, possible values are xx-small, x-small, small, medium, large, x-large, and xx-large.
  • <relative-size>A set of keywords interpreted relative to the parent element's font-size - either smaller or larger.
  • <length>An absolute unit value: any of the standard css length units are allowed. Negative lengths are illegal.
  • <percentage>A percentage value specifies an absolute font size relative to the parent element's font-size.
  • inherit
h6 {font-size: xx-small;}
p {font-size: .9em;}

Click the button below to experiment with this property.

Give it a Try!


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.