font-size

p.test { font-size: 12px;}
p.test1 { font-size: 1.2em;}
p.test2 { font-size: 1.2rem;}
p.test3 { font-size: small;}

<p style="font-size: 12px;">This is a p element. font-size is set to 12px.</p>

<p style="font-size: 1.2rem;">This is a p element. font-size is set to 1.2rem.</p>

<p style="font-size: large;">This is a p element. font-size is set to large.</p>

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

Supported in all versions

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

7+ ○

6 or earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 or earlier ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

※ Version data based on MDN.

You can specify the font size.

The most commonly used unit in modern web development is px. The pt unit is best avoided because its rendered size varies depending on the OS and display.

In IE8 and earlier, there are known bugs: text with font-size set in px does not scale when the browser zoom is changed, and when using em, inheritance from parent elements does not work correctly. Therefore, when supporting IE8 or earlier, it is safest to specify font-size using %.

When using em, note that the reference size is the parent element's font size. For example, if a div element has 12px, a child p element has 2.0em, and a grandchild span element also has 2.0em, then the span's font size will be 48px.

div { font-size: 12px;} /* font-size is 12px */
div > p { font-size: 2.0em;} /* parent div is 12px, so font-size is 24px */
div > p > span { font-size: 2.0em;} /* parent p is 24px, so font-size is 48px */

Using the rem unit, you can specify the size relative to the html element's (root element's) font size. Unlike em, it is unaffected by the parent element's font size — the reference is always constant, making it very convenient. However, since it was introduced in CSS3, it does not work in older browsers.

html { font-size: 16px;}
div { font-size: 2.0rem;} /* html element is 16px, so font-size is 32px */
div > p { font-size: 2.0rem;} /* html element is 16px, so font-size is 32px. Unaffected by parent div. */

Keyword values are available but are rarely used in practice, as the rendered size varies by browser and fine-grained adjustment is not possible.

In modern web development, the base font size is typically set between 15px and 18px.

Note that almost all browsers enforce a minimum font size, and any font size specified below that threshold will be rendered at the minimum font size instead.