This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

font-size

Summary

font-size sets the font size of the text inside 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
as specified, but with relative lengths converted into absolute pixel values.
Animatable
Yes
CSS Object Model Property
fontSize

Syntax

  • font-size: absolute keywords
  • font-size: inherit
  • font-size: length
  • font-size: percentage
  • font-size: relative keywords

Values

absolute keywords
A set of keywords indicating predefined font sizes that scale according to font setting preferences or each browser’s default values. From smallest to largest, possible values are xx-small, x-small, small, medium, large, x-large, and xx-large.
relative keywords
A set of keywords interpreted relative to the parent element’s font-size — either smaller or larger.
length
An absolute unit value: any of the standard css length units are allowed. Negative lengths are illegal.
percentage
A percentage value specifies an absolute font size relative to the parent element’s font-size.
inherit
The inherit keyword causes the element to adopt its parent element’s font size.

Examples

A selection of examples showing some typical uses of the font-size property.

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

.example-one {
    font-size: 1.2em;
}

.example-two {
    font-size: small;
}

.example-three {
    font-size: 28px;
}

View live example

A redefinition of the typical 16px browser default font size medium value as 10px, followed by a resizing of the text that follows proportionate to that.

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 */

View live example

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. Use of percentage values, or values in  ems, leads to more robust and cascadable style sheets.

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

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

See also

Related articles

CSS Font

Fonts

Text

Other articles

External resources