font-size (CSS property)

Spec
Inherited Initial Version
Yes medium CSS1, 2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

font-size: { absolute-size | relative-size | length | percentage | inherit } ;

Description

This property specifies the font size to be applied to the text content of an element.

Example

These style rules set the font size for paragraphs to be 80% of the parent element’s font size for screen output, and to be ten points for print output:

@media screen {
  p {
    font-size: 80%;
  }
}
@media print {
  p {
    font-size: 10pt;
  }
}

Value

An absolute size (sometimes referred to as a T-shirt size) is specified using one of the following keywords:

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

The exact sizes to which those keywords map aren’t defined, but each one in the list above must be larger than or equal to the keyword that precedes it. User agents are recommended never to map any of those keywords to a physical size that’s less than nine pixels for screen use.

A relative size is specified using one of the following keywords:

  • smaller
  • larger

Those keywords will make the font size smaller or larger than the inherited value, by some factor that isn’t exactly defined. Most modern browsers seem to use a factor of 1.2, but the result may be adjusted to match a table of font sizes.

A length specified with a unit of em or ex refers to the computed font size that’s inherited from the parent element. This also applies to percentages.

Negative length values and percentages are illegal.

Note: The w3c recommends that authors use em em or % values in order to maintain more robust and scalable layouts. Using this approach ensures that the page elements will maintain the correct relationship between each other no matter what size the user’s browser may default to (or has been set by specific user preferences).

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

Internet Explorer for Windows up to and including versions 5.5 use an initial value of small, rather than medium.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

Internet Explorer up to and including version 8, when using the browser’s text-resize function, will not re-size an element that has its font-size specified with a px value. Versions 7 and 8 will however zoom the page when using the browser’s zoom option.

Previous / Next page

  1. Previous
  2. Next

User-contributed notes

ID:
#4
Contributed:
by awasson
Date:
Wed, 01 Dec 2010 18:10:16 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

I find that in order to get pin-point consistency across browsers, I have to use px (pixels).

ID:
#3
Contributed:
by mathieuf
Date:
Thu, 25 Feb 2010 23:33:16 GMT

A link to a section describing the units that could be used here, such at pt, px, etc., would be helpful.

ID:
#2
Contributed:
by mathieuf
Date:
Thu, 25 Feb 2010 23:31:40 GMT

The paragraph just above the section header "Compatibility" must have typos in the coding: It shows the word "NoteColonSymbol" and also "em em".

ID:
#1
Contributed:
by achtungbaby
Date:
Thu, 06 Dec 2007 06:58:20 GMT

This section could probably have some additional info on the pros and cons of font-sizing using keywords, ems or percentages. Developers are actually all over the spectrum on this issue, most seeming to go with sizing with em's. Yahoo swears by percentages...

Related Products