font-size

Jump to: navigation, search

font-size

This article is Ready to Use.


W3C Recommendation

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.

Compatibility

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
1.0
Yes
1.0
Yes
5.5
Yes
7.0
Yes
1.0
Yes

Mobile

FeaturesAndroidChrome for AndroidFirefox MobileIE MobileOpera MobileSafari Mobile
Basic support
1.0
Yes
1.0
Yes
1.0
Yes
6.0
Yes
6.0
Yes
1.0
Yes


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>

View live example

CSS

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

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

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

View live exampleA 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.

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

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















































… further results

Other articles

External resources