font-size (CSS property)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
| Inherited | Initial | Version |
|---|---|---|
| Yes | medium |
CSS1, 2 |
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;
}
}Description
This property specifies the font size to be applied to the text content of an element.
Value
An absolute size (sometimes referred to as a T-shirt size) is specified using one of the following keywords:
xx-smallx-smallsmallmediumlargex-largexx-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:
smallerlarger
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
| IE | 5.5 | Full |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | 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.
User-contributed notes
- ID:
- #1
- 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.
