Font Size

Table of Contents +

In the last lesson you learned about Font Family. That picks the shape of your letters. Now let’s look at how big those letters are. That is the job of font-size.

📏 What is Font Size?

Font size means how big or small your text looks on the screen. That is it. A heading is large. A footnote is tiny. The property that controls this is font-size.

Think about writing on a whiteboard in class. For the main title you write in big letters so people at the back can read it. For a small side note you write small. Same words, just a different size. So font-size is you choosing how big to write.

When you do not set a size, the browser picks one for you. Normal text usually shows up around 16 pixels tall. That is fine. But most of the time you want to decide the size yourself. So let’s see how.

✍️ The Basic Syntax

You set the size on a selector. Then you give it a number with a unit. A unit is just the kind of measurement, like saying “centimeters” or “inches” in real life.

Here is the simplest form. This makes all paragraph text 20 pixels tall.

p {
  font-size: 20px;
}

Let’s walk through that:

  • p is the selector. It points at every <p> paragraph.
  • font-size is the property. It says “I want to set the text size.”
  • 20px is the value. The 20 is the number. The px is the unit, short for pixels.

A pixel is one tiny dot on the screen. So 20px means the text is twenty dots tall. The bigger the number, the bigger the text.

What you see

The paragraph text becomes a bit larger than normal reading text. It looks clear and easy to read, a little bigger than the default size the browser gives you.

🤔 Why Not Just Use Pixels Everywhere?

Pixels are easy to understand. So they are great for learning. But they have one problem. A pixel value is fixed. It never changes.

Now imagine a reader with weak eyesight. They go into their browser settings and turn the default text size up. They do this so everything is easier to read. If you wrote every size in pixels, your text ignores their choice. It stays the same small size. That is not friendly for that reader.

So CSS gives us units that can respond to the reader. The easiest one to start with is rem.

Meet rem

An rem is a size based on the root font size. The root is the <html> element, the top of your page. By default the root is 16 pixels. So 1rem equals 16 pixels. 2rem equals 32 pixels. And 0.5rem equals 8 pixels.

Here we set a heading to twice the root size. Then we set a paragraph to the normal root size.

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


p {
  font-size: 1rem;   /* 1 × 16px = 16px */
}

Here is the nice part. If the reader makes their default text bigger, everything in rem grows with it. Your whole page scales up together. So your text stays friendly for everyone.

Simple rule

Use rem for font sizes in real projects. Use px while you are learning so the numbers feel clear. Both are correct.

📐 em vs rem (quick look)

You will also see another unit called em. It looks like rem but there is one key difference.

  • rem is always based on the root, the <html> element. It does not care about the parent.
  • em is based on the font size of its own parent element. So it can change depending on where it sits.

For a beginner this means em can give you surprising results when boxes are nested inside each other. So start with rem. It is easier to guess. You can explore em later when you feel comfortable.

🧩 A Real Example

Let’s size a small card like the ones you see on Netflix or Amazon. It has a title, a price, and a short note. Each one needs a different size. That way your eye knows what is important.

First the HTML for the card:

<div class="card">
  <h2 class="card-title">Wireless Headphones</h2>
  <p class="card-price">$49</p>
  <p class="card-note">Free delivery this week</p>
</div>

Now we give each part its own size. The title is the biggest. The price is medium. The little note is the smallest.

.card-title {
  font-size: 1.5rem;   /* big, grabs attention */
}


.card-price {
  font-size: 1.25rem;  /* medium, still stands out */
}


.card-note {
  font-size: 0.875rem; /* small, less important */
}

What you see

The product name sits at the top in large text. Below it the price is a bit smaller but still easy to spot. The delivery note at the bottom is the smallest. Your eyes naturally read the name first, then the price, then the note.

See how size alone creates an order of importance? Big means “look here first.” Small means “this is a side detail.” That is the real value of font-size.

⚠️ Common Mistakes

A few small things trip up beginners all the time. So watch for these.

  • Forgetting the unit. Writing font-size: 20; does nothing. The browser ignores it because it does not know if you mean pixels or something else. Always add a unit, like 20px or 1.25rem.
  • Leaving a space inside the value. font-size: 20 px; is wrong. The number and the unit stick together with no space, like 20px.
  • Making everything the same size. If the title and the text and the footnote are all one size, the page looks flat. The reader cannot tell what matters. So use different sizes to show importance.
  • Making body text too small to read. Tiny text looks neat to you but it hurts on a phone. Keep normal reading text around 1rem (about 16px) or larger.

✅ Best Practices

Here is how to keep your sizes clean and friendly.

  • Set your main reading text first. Then size headings relative to it. This gives the page a clear rhythm, which just means a steady, even feel as your eye moves down the page.
  • Use rem so the page respects the reader’s own text size choice. It keeps your site easy to use for everyone.
  • Do not use too many different sizes. A few clear steps, like small, normal, and large, look tidier than ten random sizes.
  • Test your page on a phone screen. Text that feels fine on a laptop can feel too small on a phone.

🧩 What You’ve Learned

You now know how to control how big your text is. Quick recap:

  • ✅ font-size sets how big or small your text looks.
  • ✅ The value is a number plus a unit, like 20px or 1.5rem, with no space between them.
  • ✅ px is a fixed dot count. It is great for learning.
  • ✅ rem is based on the root size (16px by default), so it scales when the reader changes their settings.
  • ✅ em is based on the parent’s size, so it is harder to guess. Start with rem.
  • ✅ Different sizes create order. Big text means “important.” Small text means “side detail.”

Check Your Knowledge

Test what you learned. Pick an answer for each question, then click Check.

  1. 1

    What does the font-size property control?

    Why: font-size sets how big or small your text appears. Shape is font-family, and color is the color property.

  2. 2

    If the root font size is 16px, how big is 2rem?

    Why: rem is based on the root size. 2 × 16px = 32px.

  3. 3

    Why is rem often better than px for font sizes?

    Why: rem is based on the root size, so when a reader increases their default text size, rem-based text grows with it. That keeps the page friendly to everyone.

  4. 4

    Which of these is written correctly?

    Why: The number and unit must stick together with no space, and the unit is required. So 20px is correct.

Score: 0 / 4

🚀 What’s Next?

Now that your text is the right size, the next step is making it look bold or light. That is what font weight controls.

Font Weight

Previous Font Family Next Font Weight

Share & Connect

Share on LinkedIn