Personal tools

font-size

Jump to: navigation, search

Contents

font-size

Specifies the size of text.

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

Text

Specifications

Other resources