Runnable CSS Docs: Font Size

Q: How do I change the font size in CSS?

Set the font-size property on the element: p { font-size: 18px; }. It accepts lengths (px, rem, em), percentages and keywords such as large.

Q: How do I change font size in HTML?

With CSS, either in a stylesheet or in a style attribute: . The old tag is obsolete in HTML5 and should not be used.

Q: Should I use px, em or rem for font size?

Use rem for most text: it scales with the user's browser font setting and does not compound. Use em when a size should follow its parent, such as an icon inside a button. px does not follow the default font size a reader sets in the browser, so avoid it for body text.

Q: Why does my em font size keep getting bigger?

Because em is relative to the parent's font size, so nested elements multiply: 1.2em inside 1.2em is 1.44 times the base. Switch to rem, which is always relative to the root element.

How to set font size in CSS

The font-size property sets the size of text. Put it on any element and every piece of text inside it inherits the size, unless a child sets its own.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .small { font-size: 12px; }
    .normal { font-size: 16px; }
    .big { font-size: 1.5rem; }
    .huge { font-size: 48px; }
  </style>
</head>
<body>
  <p class="small">12px</p>
  <p class="normal">16px (the browser default)</p>
  <p class="big">1.5rem (24px)</p>
  <p class="huge">48px</p>
</body>
</html>

To change font size in HTML, you still use CSS. Add a style attribute () or a rule in a stylesheet. The  tag from the 1990s is obsolete and has no place in a modern page.

The units font-size accepts

Value	Example	What it is relative to
`px`	`16px`	Nothing: a fixed size
`rem`	`1.25rem`	The font size of the root `<html>` element (16px by default)
`em`	`1.2em`	The font size of the parent element
`%`	`120%`	The parent's font size, like `em` (`120%` is `1.2em`)
Keyword	`large`	A preset scale around the default `medium`
Relative keyword	`smaller`, `larger`	One step from the parent's size
Viewport	`4vw`	The viewport width (4% of it)
Function	`clamp(1rem, 4vw, 2rem)`	Fluid between a minimum and a maximum

Type a value and see the size the browser computes:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { border: 1px dashed #9ca3af; padding: 8px; margin: 12px 0; }
  </style>
</head>
<body>
  <label>font-size: <input id="val" value="1.5rem" size="20"></label>
  <p id="sample">The quick brown fox</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.fontSize = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).fontSize;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Try 20px, 2em, 150%, x-large, smaller and 5vw. An invalid value, such as big, is ignored and the text keeps its last valid size.

rem vs em: the difference that bites

rem always looks at the root element, so 1.2rem is the same size wherever it appears. em looks at the parent, so sizes multiply when elements are nested:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em compounds</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .em { font-size: 1.2em; }
    .rem { font-size: 1.2rem; }
    div { border-inline-start: 3px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">1.2em
    <div class="em">1.2em inside
      <div class="em" id="deep-em">1.2em inside again</div>
    </div>
  </div>
  <div class="rem">1.2rem
    <div class="rem">1.2rem inside
      <div class="rem" id="deep-rem">1.2rem inside again</div>
    </div>
  </div>
</body>
</html>

The innermost em box is 16 × 1.2 × 1.2 × 1.2 = 27.648px. The innermost rem box is still 19.2px. That compounding is useful for a component whose parts should scale together, and a surprise everywhere else. The units page compares every length unit.

Keywords: xx-small to xx-large

The absolute keywords map to a fixed scale around medium, which equals the user's default size (16px unless they changed it):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size keywords</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-size: xx-small;">xx-small</p>
  <p style="font-size: x-small;">x-small</p>
  <p style="font-size: small;">small</p>
  <p style="font-size: medium;">medium</p>
  <p style="font-size: large;">large</p>
  <p style="font-size: x-large;">x-large</p>
  <p style="font-size: xx-large;">xx-large</p>
  <script>
    document.querySelectorAll('p').forEach((p) => {
      p.textContent += ': ' + getComputedStyle(p).fontSize;
    });
  </script>
</body>
</html>

With the default 16px, small is 13px, large is 18px, x-large is 24px and xx-large is 32px. Keywords are fine for quick work, but a design system usually wants its own scale in rem.

Fluid font size with clamp()

A heading that should grow with the screen but never get too small or too large is one clamp() call: the minimum, a preferred size that scales, and the maximum.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fluid heading</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 {
      /* never below 1.5rem, never above 3rem, 5vw in between */
      font-size: clamp(1.5rem, 5vw, 3rem);
      margin: 0;
    }
  </style>
</head>
<body>
  <h1 id="title">Fluid heading</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'computed: ' + getComputedStyle(document.getElementById('title')).fontSize;
  </script>
</body>
</html>

In an 800px wide preview, 5vw is 40px, which sits between 24px and 48px, so it wins. The clamp page covers fluid type in depth.

Setting a base size for the whole page

Set the size once on body (or html) and size everything else relative to it:

html { font-size: 100%; }  /* respects the user's setting, usually 16px */
body { font-size: 1rem; }
h1   { font-size: 2.25rem; }
small, .caption { font-size: 0.875rem; }

Avoid html { font-size: 62.5%; } tricks unless every size on the page is then set in rem, and never set a fixed px size on html: it overrides the font size the reader chose in their browser, which some people rely on to read at all.

Accessibility notes

Body text of 16px or more is a good floor for reading on screens.
Sizes in rem and em follow the user's default font setting. Sizes in px follow page zoom but not that setting.
On iPhone, Safari zooms the page when you focus an input whose font size is under 16px. Give form fields font-size: 1rem or more to avoid it.

Common mistakes

Using the  tag. It is obsolete. Use the font-size property.
Nested em sizes that grow or shrink out of control. Use rem unless you want compounding.
A fixed px size on html. It overrides the reader's own font setting.
Forgetting that headings already have a size. <h1> is 2em by default, so h1 { font-size: 1em; } is needed if you want it the size of body text.
Viewport units alone. font-size: 3vw becomes unreadable on a phone and huge on a wide monitor. Wrap it in clamp().

Frequently Asked Questions

How do I change the font size in CSS?

Set the font-size property on the element: p { font-size: 18px; }. It accepts lengths (px, rem, em), percentages and keywords such as large.

How do I change font size in HTML?

With CSS, either in a stylesheet or in a style attribute: . The old  tag is obsolete in HTML5 and should not be used.

What is the default font size in browsers?

16px for body text, unless the user changed it in the browser settings. That value is what 1rem and the keyword medium equal by default.

Should I use px, em or rem for font size?

Use rem for most text: it scales with the user's browser font setting and does not compound. Use em when a size should follow its parent, such as an icon inside a button. px does not follow the default font size a reader sets in the browser, so avoid it for body text.

Why does my em font size keep getting bigger?

Because em is relative to the parent's font size, so nested elements multiply: 1.2em inside 1.2em is 1.44 times the base. Switch to rem, which is always relative to the root element.

Related concepts