Bird
Raised Fist0
CSSmarkup~5 mins

Font size in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Font size controls how big or small text appears on a webpage. It helps make text easy to read and looks good on different devices.

To make headings larger than normal text for clear titles.
To adjust paragraph text so it is comfortable to read on phones and computers.
To highlight important words by making them bigger.
To create a consistent look by setting the same size for all body text.
To improve accessibility by increasing font size for users with vision difficulties.
Syntax
CSS
selector {
  font-size: value;
}

The value can be in units like rem, em, px, or percentages.

Using relative units like rem or em helps make your design responsive and accessible.

Examples
Sets paragraph text to 16 pixels, a fixed size.
CSS
p {
  font-size: 16px;
}
Makes heading 1 twice the root font size, scaling with user settings.
CSS
h1 {
  font-size: 2rem;
}
Increases font size by 20% compared to the parent element.
CSS
span.highlight {
  font-size: 120%;
}
Sets font size equal to the parent or browser default size.
CSS
body {
  font-size: 1em;
}
Sample Program

This example shows a big heading, normal paragraph text, and smaller text for less important details. The font sizes use rem units to scale nicely on different devices.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Font Size Example</title>
  <style>
    body {
      font-size: 1rem;
      font-family: Arial, sans-serif;
      padding: 1rem;
    }
    h1 {
      font-size: 2.5rem;
      color: #2a7ae2;
    }
    p {
      font-size: 1rem;
      color: #333333;
      max-width: 40rem;
      line-height: 1.5;
    }
    .small-text {
      font-size: 0.75rem;
      color: #666666;
    }
  </style>
</head>
<body>
  <h1>Welcome to Font Size Demo</h1>
  <p>This paragraph uses the default font size of 1rem, which is easy to read on most screens.</p>
  <p class="small-text">This smaller text shows how you can make less important info smaller but still readable.</p>
</body>
</html>
OutputSuccess
Important Notes

Avoid using only px units because they do not scale well on different devices or user settings.

Use rem for consistent sizing based on the root font size, improving accessibility.

Test your font sizes on small and large screens to ensure readability everywhere.

Summary

Font size controls how big text appears on a webpage.

Use relative units like rem or em for better accessibility and responsiveness.

Adjust font size to improve readability and highlight important content.

Practice

(1/5)
1. What does the CSS property font-size control on a webpage?
easy
A. The color of the text
B. The background color of the text
C. The spacing between letters
D. The size of the text displayed

Solution

  1. Step 1: Understand the role of font-size

    The font-size property in CSS sets how big or small the text appears on the screen.

  2. Step 2: Compare with other text properties

    Other properties like color or spacing control different aspects, not size.

  3. Final Answer:

    The size of the text displayed -> Option D

  4. Quick Check:

    font-size controls text size [OK]
Hint: Font size changes text height, not color or spacing [OK]
Common Mistakes:
  • Confusing font-size with color or spacing properties
  • Thinking font-size changes background color
  • Mixing font-size with letter-spacing
2. Which of the following is the correct CSS syntax to set the font size to 16 pixels?
easy
A. font-size: '16px';
B. font-size = 16px;
C. font-size: 16px;
D. font-size: 16;

Solution

  1. Step 1: Recall CSS property syntax

    CSS uses a colon (:) to assign values, and units like px must be without quotes.

  2. Step 2: Check each option

    font-size: 16px; uses correct syntax: property, colon, value with unit, and semicolon.

  3. Final Answer:

    font-size: 16px; -> Option C

  4. Quick Check:

    Correct CSS syntax uses colon and units without quotes [OK]
Hint: Use colon and units without quotes for CSS properties [OK]
Common Mistakes:
  • Using equal sign instead of colon
  • Putting units inside quotes
  • Omitting units like px
3. What will be the visual result of this CSS on a paragraph?
p { font-size: 2rem; }
medium
A. The paragraph text will be half the root font size
B. The paragraph text will be twice the root font size
C. The paragraph text will be 2 pixels tall
D. The paragraph text size will not change

Solution

  1. Step 1: Understand the unit rem

    rem means "root em" and is relative to the root (html) font size.

  2. Step 2: Interpret 2rem

    Setting font-size to 2rem means text will be twice as big as the root font size.

  3. Final Answer:

    The paragraph text will be twice the root font size -> Option B

  4. Quick Check:

    2rem doubles root font size [OK]
Hint: rem units scale relative to root font size [OK]
Common Mistakes:
  • Thinking rem is pixels
  • Confusing rem with em
  • Assuming no change in size
4. Identify the error in this CSS code snippet:
h1 { font-size: 20; }
medium
A. Missing unit after the number
B. Incorrect property name
C. Missing semicolon
D. Font size cannot be set on h1

Solution

  1. Step 1: Check the font-size value format

    CSS requires a unit like px, em, rem after numeric values for font-size.

  2. Step 2: Identify the missing unit

    The code uses "20" without any unit, which is invalid.

  3. Final Answer:

    Missing unit after the number -> Option A

  4. Quick Check:

    Font size needs units like px or rem [OK]
Hint: Always add units like px or rem after font-size numbers [OK]
Common Mistakes:
  • Omitting units like px or rem
  • Assuming numbers alone are valid
  • Confusing semicolon errors
5. You want to make all paragraph text larger but keep it responsive to user settings. Which CSS rule is best?
p { font-size: ?; }
hard
A. font-size: 1.2rem;
B. font-size: 18px;
C. font-size: 120%;
D. font-size: 1.2em;

Solution

  1. Step 1: Understand responsiveness and user settings

    To respect user font preferences (e.g., browser font size settings), use units relative to the root element.

  2. Step 2: Compare options for responsiveness

    px is fixed and doesn't scale with user changes. em and % are relative to parent and can compound in nesting. rem is relative to root font size, scaling perfectly with user settings.

  3. Step 3: Choose the best option

    1.2rem increases size by 20% relative to root, ideal for accessibility and responsiveness.

  4. Final Answer:

    font-size: 1.2rem; -> Option A

  5. Quick Check:

    rem units scale with root font size and user settings [OK]
Hint: Use rem units for scalable font sizes responsive to user preferences [OK]
Common Mistakes:
  • Using fixed px units ignoring user preferences
  • Using em which can compound unexpectedly
  • Confusing em/% with root-relative rem