Font-size - Property CSS

font-size

Summary of characteristics of the `font-size` property

Quick description

Adjusts the font size, which also impacts units like em, ex, etc.

Status

Standard

Usable for

HTML

Predefined values

Percentages

Calculated based on the font size of the parent element.

Initial value

medium

Inherited by default

Yes.

Animation type

Computed value : during an animation, the font-size property gradually changes from one value to another.

W3C Module

CSS Fonts Module

References (W3C)

🡇

🡅

CSS Fonts Module Level 5

Document status: WD (Working Draft)

CSS Fonts Module Level 4

Document status: WD (Working Draft)

CSS Fonts Module Level 3

Document status: REC (Recommendation)

Cascading Style Sheets Level 2 - Revision 1 Specification

Document status: REC (Recommendation)

Cascading Style Sheets specification - Version 1

Document status: DEPR (Old specification, declared obsolete or superseded)

Syntax diagram of `font-size`.

Syntax diagram of the font-size property.
Detailed syntax

On the diagram, the terms in bold are the predefined words of CSS, the other terms are described below :

length is a positive numeric value followed by one of the CSS dimension units.
% is a percentage calculated relative to the character size of the parent element.

Description.

The font-size property sets the font size.

The actual font size may be significantly different from the requested typeface, due to font-size-adjust . However, children inherit the computed value of font-size that is not affected by font-size-adjust, otherwise the effect of font-size-adjust would be applied twice.

To maintain readability, font sizes smaller than 9 pixels should never be used.

For variable fonts, the font size is a factor of em. For non-variable fonts, the size is converted to absolute units, and compared to the one declared in the policy.

The different uses of `font-size`.

The word font-size corresponds to a property, allowing you to choose a font size (which is described on this page), but also to a descriptor usable with the following guidelines:

@font-face : Defines all settings for a downloadable font.

Values for `font-size`.

font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; font-size: xxx-large;

Character sizes predefined by CSS. The default value is medium.
Here is the ratio between these different sizes, relative to medium.

Value CSS	Ratio to medium	Equivalent title HTML	Equivalent size HTML
`xx-small`	0.6 (3/5)	`h6`	`font size="1"`
`x-small`	0.75 (3/4)
`small`	0.89 (8/9)	`h5`	`font size="2"`
`medium`	1	`h4`	`font size="3"`
`large`	1.2 (6/5)	`h3`	`font size="4"`
`x-large`	1.5 (3/2)	`h2`	`font size="5"`
`xx-large`	2	`h1`	`font size="6"`
`xxx-large`	3		`font size="7"`

In CSS1, the multiplier coefficient between two successive sizes was recommended at 1.5. In CSS2, it has been reduced to get closer to 1.2. Currently this coefficient varies around 1.18 - 1.25.

Here's what these different sizes look like on your browser:

font-size:xx-small

font-size:x-small

font-size:small

font-size:medium

font-size:large

font-size:x-large

font-size:xx-large

font-size:xxx-large

font-size: 12px;

A positive numeric value, followed by a dimension unit the (see CSS dimension units). Some units are specifically adapted to font sizes: pt, em, rem, ch, ex, etc.
The value must be positive.
If the value is expressed in percentages, the percentages are calculated relative to the character size of the parent element.
The em unit is evaluated in the same way, while the rem unit is evaluated against the character size of the root element (html tag or :root selector).

Parent element, font-size:medium
Child element, font-size:150%
font-size: smaller; font-size: larger;

The character size of the target element is set relative to the character size of the parent element.

If the parent element has a character size set to a predefined value (from xx-small to xxx-large), the smaller value is the predefined size immediately below.
And larger is the preset size immediately above.

If the parent element is in a non-predefined character size, the browser calculates the character size of the targeted element by applying a coefficient.

Parent element, font-size:medium
Child element, font-size:larger

Child element, font-size:smaller
font-size: math;

Specific rules for writing mathematical formulas are applied to determine the size of the characters: the font size varies depending on the math-depth property.

Example:
$x + \sqrt{5^{2}}$

Common values:


font-size: initial  (medium)
font-size: inherit
font-size: revert
font-size: revertLayer
font-size: unset

These values are described in more detail on their respective page: initial, inherit, revert, revert-layer, unset.

Animation of the `font-size` property.

The animation of the character size is very smooth, even if the animation is described with the predefined values (small, medium, etc.) because these values are equivalent to numbers, which allows to calculate as many intermediate values as necessary.

The quick brown fox jumps over the lazy dog

Handling the `font-size` property by Javascript.

Change the value of `font-size` to Javascript.

The code below, in Javascript, changes the value of font-size for an el element. The name of the property can be written in kebab-case (a dash to separate words) or in camel-case (a capital letter to separate the words), Javascript accepting both syntaxes.


	let el = document.getElementById('id');
	let value = el.style['font-size'];
	// or
	let el = document.getElementById('id');
	let value = el.style.fontSize;

Read in Javascript the value of `font-size`.

For this code to work, the property must have been assigned directly to the element itself and not via a CSS selector. The value is returned as defined: in the same unit, or optionally a predefined value (small, medium, etc.).


	let el = document.getElementById('id');
	el.style['font-size'] = '2rem';
	// or
	let el = document.getElementById('id');
	el.style.fontSize = '2rem';

Javascript, read the computed value of `font-size`.

The computed value is the value that results from the evaluation of relative units, in particular in the case of font sizes, units such as rem, em, etc. If no font-size value is set for this element, the calculated value is determined by inheritance. The calculated value is rendered in pixels, regardless of the unit used to define it.

JQuery: change the value of the `font-size` property.


 $('#id').css('font-size', '2rem');
 // or
 $('#id').css('fontSize', '2rem');

JQuery: read the computed value of the `font-size` property.

As in Javascript, the value is returned in pixels, regardless of the unit used to define it.


	let value = $('#id').css('font-size');

Other code samples.

More examples of Javascript and JQuery code are given on the Javascript and CSS page.

Test it yourself.

The buttons below apply the entered value to the font-size property and then display either the value as applied, or the calculated value. This second option allows you to see how the value of font-size is stored (serialized). In particular, we see that all units are converted into pixels.

Browser compatibility.

Column 1

Support for the font-size property to set the font size.

Column 2

Support for the xxx-large value for the font-size property. This value was updated after the property was initially set, but is now supported correctly.

font-size
property

xxx-large
value

Estimated overall support.

96%

93%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

`font-size` property historic.

font-size is an old property (already present on the first CSS specification). Some stocks have have been added as new versions of the specification are released.

Cascading Style Sheets specification - Version 1

Initial definition of the font-size property.

November 17, 1995
Working Draft.
November 12, 1996
Proposed for recommendation.
December 17, 1996
Recommendation .
September 13, 2018
Old specification, declared obsolete.
Cascading Style Sheets Level 2 - Revision 1 Specification

Support for new values for property:
- A value followed by a size unit or a percentage.
- The inherit value.

November 04, 1997
Working Draft.
March 24, 1998
Proposed for recommendation.
May 11, 1998
Recommendation .
CSS Fonts Module Level 3

No change regarding this property.

July 21, 1997
Working Draft.
October 03, 2013
Candidate Recommendation.
August 14, 2018
Proposed for recommendation.
September 20, 2018
Recommendation .
CSS Fonts Module Level 4

Adding the math value.
Adding xxx-large value.

July 11, 2017
Working Draft.
CSS Fonts Module Level 5

No changes to the property itself.
font-size is also a descriptor for the @font-face directive.

June 29, 2021
Working Draft.