CSS Font Size

font-size sets the size of text.

1
2
3
4
5
6
7
8
9
10
11

<style>
  p { margin: 4px 0; }
  .a { font-size: 14px; }
  .b { font-size: 1rem; }
  .c { font-size: 1.5rem; }
  .d { font-size: 2rem; }
</style>
<p class="a">14px</p>
<p class="b">1rem</p>
<p class="c">1.5rem</p>
<p class="d">2rem</p>

Which unit?

• px is fixed. It ignores the visitor’s own browser font setting.
• rem is a multiple of the root (html) font size, which is 16px in most browsers. 1.5rem is 24px. It follows the visitor’s preference, so people who set a bigger default get bigger text.
• em is a multiple of the parent’s font size. It nests: an em inside an em multiplies, which can surprise you.
• % works like em for font sizes.

For body text and headings, rem is the best choice. You will see more in em and rem.

Keep body text at least 16px

Text smaller than 16px on a phone gets hard to read. Many sites use 1rem for body and larger values for headings.

1
2
3
4
5

body { font-size: 1rem; }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }
small { font-size: 0.875rem; }

Sizes that grow with the screen are covered in Responsive Typography.