Font Size: Pixels, Ems, and Rems

If you’ve ever looked at a web page and thought, “How do they control the text size?”, you’re in the right place. In this article, you’ll learn how to set font sizes using pixels (px), ems (em), and rems (rem)—step by step, with simple examples.

By the end, you’ll be able to:

Understand what px, em, and rem actually mean
Choose which unit to use and when
Write your own font-size styles with confidence

No prior coding knowledge is required. We’ll go slowly, explain every new term, and you can follow along in your browser.

Step 1: Your First Font Size with Pixels (px)

Let’s start with the easiest and most common unit: pixels, written as px.

A pixel is a tiny dot on the screen. When you say font-size: 16px;, you’re telling the browser, “Make this text 16 pixels tall.” Pixels are fixed sizes, which means they don’t change based on other text.

Create a new file on your computer called font-size-example.html and paste this inside:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Font Size Example</title>
  <style>
    /* This sets the font size of the whole page */
    body {
      font-family: Arial, sans-serif;
    }

    .px-text {
      font-size: 20px; /* 20 pixels tall text */
      color: darkblue;
    }
  </style>
</head>
<body>
  <p class="px-text">This text is 20px tall.</p>
</body>
</html>

Now open the file in your browser (double-click it). You’ll see a line of text that’s 20px tall. If you change 20px to 30px, save, and refresh the page, the text becomes bigger.

Try it yourself:

Change 20px to 12px, 18px, 24px
Notice how the text grows or shrinks

Pixels are simple, but they don’t scale automatically when other things change. For more flexible designs, we use em and rem.

Step 2: Understanding `em` – Relative to the Parent

Now let’s look at em. The unit em is relative, not fixed.

Important idea:

1em = the font size of the parent element (the element that contains it)

If the parent has a font size of 16px, then:

1em = 16px
2em = 32px
0.5em = 8px

Let’s add an example to your file. Replace everything in font-size-example.html with this code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>em Font Size Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      font-size: 16px; /* Base size for body text */
    }

    .parent {
      font-size: 20px; /* Parent font size */
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 10px;
    }

    .child-em {
      font-size: 1.5em; /* 1.5 times the parent (20px * 1.5 = 30px) */
      color: darkgreen;
    }
  </style>
</head>
<body>
  <div class="parent">
    <p>This is the parent (20px font size).</p>
    <p class="child-em">This child text is 1.5em (so it becomes 30px).</p>
  </div>
</body>
</html>

Open this in your browser. You’ll see a box with two lines of text. The second line is bigger.

Why? Because:

The parent has font-size: 20px;
The child has font-size: 1.5em;
So 1.5 × 20px = 30px

Try it yourself:

Change the parent’s font size to 24px
Keep 1.5em on the child
Save and refresh

Now the child text will be 1.5 × 24px = 36px. The child follows the parent.

This can be powerful, but it can also get confusing when you nest multiple elements. If parents keep changing size, children might become unexpectedly huge or tiny. That’s where rem comes in.

Step 3: Understanding `rem` – Relative to the Root

The unit rem is similar to em, but with one big difference.

em = relative to the parent element
rem = relative to the root element (the <html> tag)

The root element is the top-level HTML element. We usually set a base font size there. By default, most browsers use 16px for the <html> element.

Let’s see this in action. Replace your file contents with:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>rem Font Size Example</title>
  <style>
    html {
      font-size: 16px; /* Root font size */
    }

    body {
      font-family: Arial, sans-serif;
    }

    .parent {
      font-size: 20px; /* This does NOT affect rem values */
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 10px;
    }

    .child-rem {
      font-size: 1.5rem; /* 1.5 times the root (16px * 1.5 = 24px) */
      color: darkred;
    }
  </style>
</head>
<body>
  <div class="parent">
    <p>This parent text is 20px.</p>
    <p class="child-rem">This child text is 1.5rem (24px), based on the root.</p>
  </div>
</body>
</html>

Open it in your browser. You’ll see that the parent text is larger than the child, even though we’re using 1.5rem.

Calculation:

Root (html) is 16px
1.5rem = 1.5 × 16px = 24px
Parent is 20px, so the parent is slightly smaller than the child

Now the key part:

Try it yourself:

Change the parent’s font size to 30px
Don’t touch the 1.5rem on the child

The child text stays 24px. It doesn’t care about the parent’s size. It only listens to the root size (the <html> element).

That’s the main benefit of rem: it gives you consistent sizes that don’t change when parents change.

Step 4: Building a Simple, Scalable Text System

Now let’s combine px, em, and rem in a small, practical example. We’ll create a basic page with:

A base size using rem
A heading that’s larger
A button that uses em to scale based on its own text size

Replace your file with this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Font Size System</title>
  <style>
    /* 1. Set the root size (easy to adjust later) */
    html {
      font-size: 16px; /* Try 18px or 20px later */
    }

    /* 2. Use rem for consistent text sizes */
    body {
      font-family: Arial, sans-serif;
      font-size: 1rem; /* 1rem = 16px */
      line-height: 1.5;
      padding: 20px;
    }

    h1 {
      font-size: 2rem; /* 2 × 16px = 32px */
      margin-bottom: 10px;
    }

    p {
      font-size: 1rem; /* 16px */
      margin-bottom: 10px;
    }

    /* 3. Button text uses em and padding scales with it */
    .btn {
      font-size: 1rem;         /* Base size for the button text */
      padding: 0.5em 1em;      /* Padding scales with the text size */
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .btn.large {
      font-size: 1.25rem;      /* Bigger text */
      /* Padding automatically grows because it uses em */
    }
  </style>
</head>
<body>
  <h1>My Font Size System</h1>
  <p>This paragraph uses 1rem (16px), based on the root font size.</p>
  <button class="btn">Normal Button</button>
  <button class="btn large">Large Button</button>
</body>
</html>

Open this file. You should see a heading, a paragraph, and two buttons. The second button is larger.

Why this works well:

The body text and heading use rem, so if you change html { font-size: 16px; } to 18px, all text scales together
The buttons use em for padding, so if the button’s font size grows, the padding grows too

Try it yourself:

Change html { font-size: 16px; } to 20px and refresh.
- All text and buttons get larger together.
Change .btn.large { font-size: 1.25rem; } to 1.5rem.
- The large button grows more, and its padding grows with it.

You’ve just built a small, flexible font-size system using px, em, and rem.

When Should You Use px, em, or rem?

For beginners, this simple guideline works well:

Use rem for most font sizes (body text, headings, labels)
- Keeps sizes consistent and easy to scale
Use em for things that should scale with the text inside them
- Good for button padding, spacing around text, etc.
Use px when you need a fixed size that never changes
- Sometimes handy for borders or tiny details, but less ideal for main text

There’s no single “perfect” answer, and professional developers sometimes mix these units. The key is to understand how they behave so you can control your design.

Quick Recap

You’ve covered a lot, so let’s review the main points:

Pixels (px) are fixed sizes.
- font-size: 20px; always means 20 pixels.
em is relative to the parent element’s font size.
- 1.5em means 1.5 times the parent’s font size.
rem is relative to the root (html) element’s font size.
- 1.5rem means 1.5 times the root font size, no matter the parent.
Use rem for consistent text sizes, em for elements that scale with their text, and px sparingly when you truly need fixed values.

You’ve taken a solid first step into styling text on the web. Learning this is a big win—font sizes are something every site uses.

What’s next? Try adding more elements (like h2, small text, or navigation links) and choose units for each. Experiment, break things, fix them again—that’s how you become comfortable with CSS.

You now have the core knowledge to control font sizes like a pro, even as a beginner. Keep going; you’re doing great.

Mudzinga

Font Size: Pixels, Ems, and Rems

Step 1: Your First Font Size with Pixels (px)

Step 2: Understanding `em` – Relative to the Parent

Step 3: Understanding `rem` – Relative to the Root

Step 4: Building a Simple, Scalable Text System

When Should You Use px, em, or rem?

Quick Recap

About Percy Mudzinga

Related Articles

Font Size: Pixels, Ems, and Rems

Step 1: Your First Font Size with Pixels (px)

Step 2: Understanding em – Relative to the Parent

Step 3: Understanding rem – Relative to the Root

Step 4: Building a Simple, Scalable Text System

When Should You Use px, em, or rem?

Quick Recap

About Percy Mudzinga

Related Articles

Never Miss an Update

Step 2: Understanding `em` – Relative to the Parent

Step 3: Understanding `rem` – Relative to the Root