The font-size property sets the size of an element's text, accepting absolute units like pixels, relative units like em and rem, or viewport-relative units for responsive scaling.

Syntax

font-size: value;

Deep Dive Course

px sets an absolute, fixed size unaffected by any parent's font size, while em is relative to the current element's parent's computed font size, meaning em values compound as they nest, since each nested element's 1em refers to its own parent's size, not the original root size. rem, by contrast, is always relative specifically to the root html element's font size, regardless of how deeply nested the element is, avoiding the compounding effect em can produce and making rem generally the more predictable choice for consistent sizing throughout a document.

1Understanding Font-size

💡

Prefer rem over em for most font-size declarations — rem always references the root element's font size directly, avoiding the compounding effect where nested em values multiply together unpredictably as elements are nested more deeply.

editor.html

html {
  font-size: 16px;
}

.title {
  font-size: 2rem;
}

localhost:3000

2Practical Example

Here is a real-world application of Font-size showing how it is used in production CSS code.

editor.html

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Font-size:

1. Use rem for most font-size declarations, for predictable sizing that doesn't compound unexpectedly through nested elements

2. Set the root html element's font-size explicitly, or rely on its default, typically 16px, as the reference point every rem value is calculated against

3. Consider viewport-relative units like vw sparingly, and typically combined with clamp(), for text that should scale fluidly with screen size within sensible minimum and maximum bounds

⚠️

Tip: Prefer rem over em for most font-size declarations — rem always references the root element's font size directly, avoiding the compounding effect where nested em values multiply together unpredictably as elements are nested more deeply.

editor.html

html {
  font-size: 16px;
}

.title {
  font-size: 2rem;
}

localhost:3000

Examples

Example 01Basic Usage

html {
  font-size: 16px;
}

.title {
  font-size: 2rem;
}

Example 02Advanced Example

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em;
}

Best Practices

Use rem for most font-size declarations, for predictable sizing that doesn't compound unexpectedly through nested elements
Set the root html element's font-size explicitly, or rely on its default, typically 16px, as the reference point every rem value is calculated against
Consider viewport-relative units like vw sparingly, and typically combined with clamp(), for text that should scale fluidly with screen size within sensible minimum and maximum bounds

Interview Question

Why can nested em-based font sizes produce unexpectedly large or small text, a problem that using rem instead specifically avoids?▼

Hint: Think about what exactly '1em' refers to at each level of nesting, and whether that reference point stays fixed or changes as you nest more elements.

An em value is always calculated relative to its own direct parent's computed font size, not the original root font size, which means if several nested elements each set their own font-size using em, each one's em value multiplies against the already-scaled-up-or-down size inherited from its immediate parent, compounding progressively deeper into the nesting. A component nested three levels deep, each level applying font-size: 1.2em, ends up multiplying 1.2 by itself three times relative to the outer starting size, producing a noticeably larger final size than a single 1.2em application might suggest, and this compounding effect becomes increasingly hard to predict or reason about as nesting grows deeper or more complex. rem sidesteps this entirely by always calculating relative to the root html element's font size specifically, no matter how deeply the element using rem is nested, so a given rem value always produces the exact same computed size everywhere it's used, regardless of what font sizes its various ancestors happen to have set, which is exactly the predictability that makes rem the generally preferred choice for consistent, maintainable sizing.

Exercises

MediumPractice using Font-size in a real scenario.

View Solution

html {
  font-size: 16px;
}

.title {
  font-size: 2rem;
}

Frequently Asked Questions

Why can nested em-based font sizes produce unexpectedly large or small text, a problem that using rem instead specifically avoids?▼

Related Functions

Font-familyLine-heightRefDimensions