Course Index

CSS · Module 17 · Lesson 18 of 48

Font Sizing Units (px, em, rem)

What are Font Sizing Units?

Imagine you are designing a digital billboard. You can define the text height using fixed centimeters (Pixels), relative proportions based on parent headings (EMs), or a single base unit that adjusts dynamically if the user increases their device's default reading size (REMs).

In CSS, there are three primary sizing units for text:

  • px (Pixels): Static, absolute sizes. 16px is always exactly 16 screen pixels.
  • em: Relative to the font size of the parent container. If the parent is 16px, 2em equals 32px.
  • rem (Root EM): Relative to the font size of the root HTML element (usually 16px by default). 2rem is always 2 times the root font size (32px).

    • Why does it matter?

    Using rem is a critical best practice for accessibility. If a visually impaired user increases their browser's default font size from 16px to 24px, a site built with rem units will scale up beautifully. A site built with static px units will stay tiny and unreadable, locking them out of your content.

    Syntax Breakdown

  • font-size: 16px; — Absolute, fixed font sizing.
  • font-size: 1.5rem; — Scales relative to root text settings (typically 24px).

    • Common Mistakes

  • Relying purely on pixels for layouts: Pixels prevent pages from scaling correctly on screens with custom zoom scales, hurting accessibility.
  • Confusing em and rem: Because em scales relative to parent elements, nesting elements multiple levels deep causes sizes to multiply (compounding), making layout sizing highly unpredictable. Use rem to keep sizing consistent.

    • Quick Reference

  • px — Static, non-flexible pixel sizes.
  • em — Relative to parent elements font sizes.
  • rem — Relative to the root document (<html>) font size.

    • Your Task
    Configure the `.large-text` class to have a `font-size` of `2rem`.
    index.html
    Type code above to start the lesson.
    Live Preview