font-size
font-size
W3C Recommendation
Summary
font-size sets the font size of 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. CSS Text Styling Fundamentals provides an overview.
Overview table
| Initial value | medium
|
|---|---|
| Applies to | All elements |
| Inherited | Yes |
| Media | visual |
| Computed value | absolute size in px units |
| Animatable | Yes |
| CSS Object Model Property | fontSize
|
Syntax
-
font-size: absolute-size -
font-size: relative-size -
font-size: length -
font-size: percentage
Values
- absolute-size
- A set of keywords indicating predefined font sizes that scale according to font setting preferences or each browser's default values. From small to large, 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
- A positive numeric value followed by a string designating absolute or relative units of length. Proportional em and ex measurements are based on the parent element's font-size, while rem measurements are based on that of the root element.
- percentage
- A positive integer followed by a percent (%), indicating a percentage of the parent element's font-size.
Examples
A selection of examples showing some typical uses of the font-size property.
HTML
<p class="example-one">Example One: We ♥ WebPlatform Docs!</p> <p class="example-two">Example Two: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, eos, dicta nihil aliquid quia dolores labore nesciunt unde consectetur blanditiis ex eius consequatur qui incidunt voluptatem inventore fugit quos amet!</p> <p class="example-three">Example Three: Eius, earum unde eum distinctio ex accusamus rem eligendi optio mollitia deleniti? Iure, accusamus, fuga ipsa quas doloremque enim velit sed est earum pariatur ab optio quia molestiae repellendus non.</p>
CSS
.example-one {
font-size: 1.2em;
}
.example-two {
font-size: small;
}
.example-three {
font-size: 28px;
}
View live exampleRedefine the typical 16px default medium value as 10px, then redefine other tags in proportion to the root:
CSS
html { font-size: 62.5%; }
/*
16 * 62.5% == 10
*/
.example-one { font-size: 3.6rem } /* 36px */
.example-two { font-size: 2.4rem } /* 24px */
.example-three { font-size: 1.4rem } /* 14px */
Usage
Keywords such as large and medium, or relative em or percentage units, are generally safer to use than pixel measurements, especially for mobile web browsers that adjust their set of default font sizes for legibility. Otherwise, pixels offer the safest way to specify measurements, since CSS pixels are adjusted for variations in display pixel density.
While the initial medium size applies widely, browsers apply a default style sheet that modifies it for various semantic elements, boosting the size of headings, for example. Browsers also automatically resize fonts when zooming the page, stepping by values that may not correspond exactly to the zoom factor. Unless disabled using text-size-adjust, fonts also resize when tipping between portrait and landscape orientations on mobile browsers. For an overview of the issue, see The Mobile Viewport and Orientation.
The value of font-size also affects the value of line-height when using its default or relative measurements.
Along with many other CSS properties, font-size can also be applied directly as an SVG attribute:
<text x="12px" y="12px" font-family="sans-serif" font-size="120%"/>
Related specifications
| Specification | Status | Related Changes |
|---|---|---|
| CSS Fonts Module Level 3 | Working Draft | |
| CSS Values and Units Module Level 3 | Candidate Recommendation | |
| Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification | W3C Recommendation |
Compatibility
Desktop
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic Support | 1.0 | 1.0 | 5.5 | 7.0 |
1.0 |
Mobile
| Feature | Android | BlackBerry | Chrome for mobile | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Opera Mini | Safari Mobile |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 1.0 | 3.8 | 1.0 | 1.0 | 6.0 | 6.0 | 1.0 | 1.0 |
Compatibility notes
| Browser | Version | Note |
|---|---|---|
| IE | ≤ 6.0 | Requires a !DOCTYPE declaration that triggers standards mode, otherwise the initial value is small rather than medium. |
| IE | ≤ 7.0 | Does not support inherit as a value. |
| IE | ≤ 8.0 | Does not resize text specified with absolute pixel measurements when using the browser's text-resize feature, but does resize correctly when zooming the page. |
| IE | ≤ 8.0 | Does not support rem values; specify other supported values as fallback properties. |
| All | Check compatibility for more recent viewport unit values. |
See also
Related articles
CSS Font
- font-size
Fonts
- font-size
Text
- font-size
Other articles
External resources
- Smashing: 16 Pixels: For Body Copy. Anything Less Is a Costly Mistake
- HTML5 Boilerplate: Reasoning behind default font-size and line-height
- A List Apart: How to Size Text in CSS
- Mozilla: default style sheet
- WebKit: default style sheet
This tool helps to make and review comments inline.
How to Use
insert instructions, with images, here