Skip to: content, navigation

font-size (CSS property)

Spec
Inherited Initial Version
Yes medium CSS1, 2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+
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.

Compatibility

Internet Explorer Firefox Safari Opera
5.5 6.0 7.0 1.0 1.5 2.0 1.3 2.0 3.0 9.2 9.5
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.

Previous / Next page

  1. Previous
  2. Next

User-contributed notes

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...

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

Search