How to Change Font Size in CSS

What you’ll build or solve

You’ll change the size of text on a page using CSS.

When this approach works best

This approach works best when you want consistent typography that’s easy to maintain.

Use it when you:

• Set a base font size for body text, then scale headings from there.
• Make small UI text like captions or helper copy easier to read.
• Resize a specific component’s text without affecting the rest of the page.

Skip this approach when:

• You’re resizing text to fix spacing issues. Use padding, margin, or layout rules instead.
• You’re forcing very small text sizes. It can become unreadable.

Prerequisites

• An HTML file linked to a CSS file or a <style> tag
• Basic comfort with CSS selectors, such as elements and classes

Step-by-step instructions

Step 1: Use font-size to set the text size

Set text size with font-size. Pick the option that matches your goal.

Option A: Set a base size with px (simple and predictable)

body {
  font-size:16px;
}

Option B: Scale text with rem (recommended for most sites)

1rem equals the root font size, usually 16px. This makes consistent scaling easier.

body {
  font-size:1rem;
}

h1 {
  font-size:2rem;
}

Option C: Resize one component with a class

<pclass="caption">Screenshots may look different on your device.</p>

.caption {
  font-size:0.875rem;
}

What to look for

• If too much text changes size, your selector is too broad. Use a class for targeted changes.
• If large text looks cramped, spacing may need adjusting even if your font size is correct.
• If your rule doesn’t apply, another selector may override it due to specificity or order.

Examples you can copy

Example 1: Body text plus heading scale

body {
  font-size:1rem;
  line-height:1.5;
}

h1 {
  font-size:2rem;
}

h2 {
  font-size:1.5rem;
}

Example 2: Smaller helper text under a form field

<labelfor="email">Email</label>
<inputid="email"type="email">
<pclass="help">Use a work email if you have one.</p>

.help {
  font-size:0.9rem;
}

Example 3: Make buttons easier to read without changing the whole page

<buttonclass="btn">Continue</button>
<buttonclass="btn">Cancel</button>

.btn {
  font-size:1rem;
}

Common mistakes and how to fix them

Mistake 1: Using em and getting unexpected sizes

What you might do:

.card {
  font-size:0.9em;
}

.cardh2 {
  font-size:2em;
}

Why it breaks:

em scales based on the parent, so sizes can compound and surprise you.

Correct approach:

Use rem for consistent scaling.

.card {
  font-size:0.9rem;
}

.cardh2 {
  font-size:2rem;
}

Mistake 2: Making text too small to read

What you might do:

.caption {
  font-size:10px;
}

Why it breaks:

Very small text becomes hard to read, especially on phones.

Correct approach:

Use a slightly smaller rem value.

.caption {
  font-size:0.875rem;
}

Mistake 3: Making large text without checking spacing

What you might do:

h1 {
  font-size:2.5rem;
}

Why it breaks:

Large text can look cramped with default line spacing.

Correct approach:

Keep the font size, then check how it reads. If it looks tight, adjust spacing for that element.

h1 {
  font-size:2.5rem;
  line-height:1.2;
}

Troubleshooting

• If your font size doesn’t change, check for a more specific selector overriding your rule.
• If everything changes size, search for font-size on body or a wrapper and narrow your selector.
• If sizes look inconsistent across components, prefer rem for predictable scaling.
• If text wraps oddly after resizing, check container width and spacing, not just font size.
• If nothing updates, confirm your stylesheet is loading and not returning a 404.

Quick recap

• Use font-size to change text size in CSS.
• Prefer rem for consistent scaling across a site.
• Use classes to target specific text without affecting everything.
• Check readability after resizing because large text may need spacing adjustments.
• Fix issues by checking overrides, selector scope, and stylesheet loading.