font-size
Contents |
font-size
This property sets the font size of the element to which it is applied, and its descendants. Can size text using absolute measurements, or relative to the parent or root elements. CSS Text Styling Fundamentals provides an overview.
| Initial value: medium | Computed value: absolute length, in pixels | Inherited: | Applies to: all elements |
| CSS Object Model Property: fontSize | media: visual, print | Animatable: | Shorthand: font |
Syntax
font-size: absolute-size /* font-size: medium */ font-size: relative-size /* font-size: larger */ font-size: length /* font-size: 1.5em (50% larger than parent) */ font-size: percentage /* font-size: 150% (50% larger than parent) */ font-size: inherit /* font-size: inherit (same as 100%) */
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 units (cm, mm, in, pt, pc) or relative units (px, rem, em, ex, vw, vh, vmin). 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 the proportion of the parent element's font-size.
- inherit
- The parent element's font-size value.
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%"/>
Compatibility
 Safari |
 Chrome |
 Firefox |
 IE |
 Opera |
Opera Mini |
 Android |
 Blackberry |
 Nokia N9 |
|||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Basic support | |||||||||||||||||||
| Desktop | 1.0 | 1.0 | 1.0 | 5.5 | 7.0 | ||||||||||||||
| Mobile | 1.0 | 1.0 | 1.0 | 6.0 | 6.0 | 1.0 | 1.0 | 3.8 | 1.0 | ||||||||||
| vw/vh/vmin viewport units | |||||||||||||||||||
| Desktop | 6.0 | 24.0 | 10.0 | ||||||||||||||||
| Mobile | 6.0 | ||||||||||||||||||
Compatability notes
- Internet Explorer ≤ 6.0: Requires a !DOCTYPE declaration that triggers standards mode, otherwise the initial value is small rather than medium.
- Internet Explorer ≤ 7.0: Does not support inherit as a value.
- Internet Explorer ≤ 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.
- Internet Explorer ≤ 8.0: Does not support rem values; specify other supported values as fallback properties.
- All browsers: Check compatibility for more recent vw, vh, and vmin viewport unit values.
Examples
CSS
/* Redefine the typical 16px default "medium" value as 10px: */
html { font-size: 62.5%; } /* 16 * 62.5% == 10 */
/* Redefine other tags in proportion to the root: */
h1 { font-size: 3.6rem } /* 36px */
h2 { font-size: 2.4rem } /* 24px */
p { font-size: 1.4rem } /* 14px */
This interactive utility demonstrates absolute values applied to a block of text, and relative values applied to the first sentence:
Related articles
Fonts
- CSS Text Styling Fundamentals
- CSS Units
- font-family
- font-variant
- font
- font-family
- font-feature-settings
- font-size-adjust
- font-stretch
- font-style
- font-weight
Text
- hyphens
- ime-mode
- layout-flow
- layout-grid
- layout-grid-char
- layout-grid-line
- layout-grid-mode
- layout-grid-type
- letter-spacing
- line-break
- line-height
- text-align
- text-align-last
- text-autospace
- text-decoration
- text-indent
- text-justify
- text-kashida-space
- text-overflow
- text-shadow
- text-size-adjust
- text-transform
- text-underline-position
- white-space
- word-break
- word-wrap
- word-spacing
Specifications
- W3C Working Draft: CSS Fonts Module Level 3
- W3C Candidate Recommendation: CSS Values and Units Module Level 3
Other resources
- Smashing: 16 Pixels: For Body Copy. Anything Less Is a Costly Mistake
- HTML5 Boilerplate: Reasoning behind default font-size and line-height
- CSS Tricks: 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