font-size - CSS | MDN (2023)

The font-size CSS property specifies the size of the font . Setting the font size may change the size of other items, since it is used to compute the value of the em and ex <length> units.

/* <absolute-size> values */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;/* <relative-size> values */font-size: smaller;font-size: larger;/* <length> values */font-size: 12px;font-size: 0.8em;/* <percentage> values */font-size: 80%;/* Global values */font-size: inherit;font-size: initial;font-size: unset;
<div id="container"> <p id="xx-small">xx-small</p> <p id="x-small">x-small</p> <p id="small">small</p> <p id="medium">medium</p> <p id="large">large</p> <p id="x-large">x-large</p> <p id="xx-large">xx-large</p> <p id="twelve-px">12px</p> <div id="parent-twelve-px"> 12px <p id="smaller">smaller</p> <p id="larger">larger</p> <p id="zero-dot-eight-em">0.8em</p> </div> <div id="parent-twenty-four-px"> 24px <p id="smaller">smaller</p> <p id="larger">larger</p> <p id="zero-dot-eight-em">0.8em</p> </div></div>
#container { width: 100%; display: flex; flex-wrap: wrap;}div > p { border: 1px solid black; display: flex; align-items: center; margin: 8px; padding: 8px;}#parent-twelve-px,#parent-twenty-four-px { display: flex; border: 1px solid black; padding: 8px; margin: 8px;}#parent-twelve-px { font-size: 12px;}#parent-twenty-four-px { font-size: 24px;}#xx-small { font-size: xx-small;}#x-small { font-size: x-small;}#small { font-size: small;}#medium { font-size: medium;}#large { font-size: large;}#x-large { font-size: x-large;}#xx-large { font-size: xx-large;}#smaller { font-size: smaller;}#larger { font-size: larger;}#twelve-px { font-size: 12px;}#zero-dot-eight-em { font-size: 0.8em;}
Initial valuemedium
Applies toall elements. It also applies to ::first-letter and ::first-line.
Percentagesrefer to the parent element's font size
Computed valueas specified, but with relative lengths converted into absolute lengths
Animation typea length
Canonical orderthe unique non-ambiguous order defined by the formal grammar


The font-size property is specified in one of two ways:

  • as a single keyword chosen either from the list of absolute-size keywords or from the list of relative-size keywords
  • as a <length-percentage> value.


xx-small, x-small, small, medium, large, x-large, xx-large
A set of absolute size keywords based on the user's default font size (which is medium). Similar to presentational HTML's <font size="1"> through <font size="7"> where the user's default font size is <font size="3">.
larger, smaller
Larger or smaller than the parent element's font size, by roughly the ratio used to separate the absolute size keywords above.

A positive <length> or <percentage> value. When the units of <length> values are specified in em or ex, the size is defined relative to the size of the font on the parent element of the element in question. For example, 0.5em is half the font size of the parent of the current element. When the units are specified in rem, the size is defined relative to the size of the font used by the <html> (root) element.

<percentage> values refer to the parent element's font size.

It is best to use values that are relative to the user's default font size, and avoid absolute values such as lengths with units other than em or ex. However, if such absolute values must be used, px are preferred over other units because their meaning does not vary depending on what the operating system thinks (generally incorrectly) the resolution of the monitor is.

(Video) Simple solutions to responsive typography

Formal syntax

<absolute-size> | <relative-size> | <length-percentage>

<absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large
<relative-size> = larger | smaller
<length-percentage> = <length> | <percentage>

Possible approaches

There are several ways to specify the font size, with keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs for the particular web page.


Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the body element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.


Setting the font size in pixel values (px) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.

Font sizing settings can also be used in combination. For example, if a parent element is set to 16px and its child element is set to larger, the child element displays larger than the parent element in the page.

(Video) Learn CSS Units In 8 Minutes

Note: Defining font sizes in pixel is not accessible, because the user cannot change the font size from the browser. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer.Avoid using pixels for font sizes if you wish to create an inclusive design.


Another way of setting the font size is with em values. The size of an em value is dynamic. When defining the font-size property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is often 16px. So, by default 1em = 16px, and 2em = 32px. If you set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.

In order to calculate the em equivalent for any pixel value required, you can use this formula:

em = desired element pixel value / parent element font-size in pixels

For example, suppose the font-size of the body of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).

The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.

(Video) px vs rem: what to use for font-size in your CSS

One important fact to keep in mind: em values compound. Take the following HTML and CSS:

html { font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ } span { font-size: 1.6em; }
<div><span>Outer <span>inner</span> outer</span></div>

The result is:

Assuming that the browser's default font-size is 16px, the words “outer” would be rendered at 16px, but the word “inner” would be rendered at 25.6px. This is because the inner span's font-size is 1.6 em which is relative to its parent's font-size, which is in turn relative to its parent's font-size. This is often called compounding.


rem values were invented in order to sidestep the compounding problem. rem values are relative to the root html element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.

The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to rem.

(Video) Dynamic Font Size in pure CSS

html { font-size: 62.5%; /* font-size 1em = 10px on default browser settings */}span { font-size: 1.6rem;}

Then we apply this CSS to the same HTML, which looks like this:

<span>Outer <span>inner</span> outer</span>

In this example, the words “outer inner outer” are all displayed at 16px (assuming that the browser's font-size has been left at the default value of 16px).


Example 1

/* Set paragraph text to be very large. */p { font-size: xx-large }/* Set h1 (level 1 heading) text to be 2.5 times the size * of the text around it. */h1 { font-size: 250% }/* Sets text enclosed within span tag to be 16px */span { font-size: 16px; }

Example 2

.small {font-size: xx-small;}.larger {font-size: larger;}.point {font-size: 24pt;}.percent {font-size: 200%;}
<h1 class="small">Small H1</h1><h1 class="larger">Larger H1</h1><h1 class="point">24 point H1</h1><h1 class="percent">200% H1</h1>

Live Sample


em and ex units on the font-size property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means em units and percentages do the same thing for font-size.


Specification Status Comment
CSS Fonts Module Level3
The definition of 'font-size' in that specification.
Candidate Recommendation No change
CSS Transitions
The definition of 'font-size' in that specification.
Working Draft Defines font-size as animatable.
CSS Level2 (Revision1)
The definition of 'font-size' in that specification.
Recommendation No change
CSS Level1
The definition of 'font-size' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 1.0 (1.7 or earlier) 5.5 7.0 1.0
Rem values 31.0 (Yes) 31.0 9[1]
28.0 7.0
(Video) How to change Font-Size in CSS | Lesson 04 | CSS
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 1.0 (Yes) 1.0 (1) 6.0 6.0


Rem values 4.1 42 (Yes) ? ? ? ?

[1] Internet Explorer 9 and 10 only havepartial support for this feature.


1. Dynamic Font Size CSS with clamp()
(Coding in Public)
2. CSS Tutorial For Beginners 27 - Font Size
(The Net Ninja)
3. Are you using the right CSS units?
(Kevin Powell)
4. Responsive Font Size in CSS
5. Font size CSS font Property tutorial in Hindi_Urdu_27
(Husain Sir)
6. Learn CSS In Arabic 2021 - #24 - Typography - Font Size And CSS Units
(Elzero Web School)
Top Articles
Latest Posts
Article information

Author: Tyson Zemlak

Last Updated: 03/15/2023

Views: 6438

Rating: 4.2 / 5 (63 voted)

Reviews: 94% of readers found this page helpful

Author information

Name: Tyson Zemlak

Birthday: 1992-03-17

Address: Apt. 662 96191 Quigley Dam, Kubview, MA 42013

Phone: +441678032891

Job: Community-Services Orchestrator

Hobby: Coffee roasting, Calligraphy, Metalworking, Fashion, Vehicle restoration, Shopping, Photography

Introduction: My name is Tyson Zemlak, I am a excited, light, sparkling, super, open, fair, magnificent person who loves writing and wants to share my knowledge and understanding with you.