Bird
Raised Fist0
CSSmarkup~5 mins

Font weight 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 weight controls how thick or thin the text looks. It helps make words stand out or look lighter.

To make headings bold so they catch attention.
To show important words in a paragraph by making them heavier.
To create a light, elegant look with thinner text.
To improve readability by adjusting text thickness on different screens.
To match the style of a brand or design by changing text weight.
Syntax
CSS
font-weight: value;

The value can be keywords like normal or bold, or numbers from 100 to 900 in steps of 100.

Higher numbers mean thicker text. Default is usually normal (400).

Examples
This sets the text to normal thickness, which is the default.
CSS
font-weight: normal;
This makes the text bold and thicker.
CSS
font-weight: bold;
This makes the text lighter than normal.
CSS
font-weight: 300;
This makes the text very thick and heavy.
CSS
font-weight: 900;
Sample Program

This page shows four paragraphs with different font weights: normal, bold, light, and heavy. You can see how the thickness of the text changes.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Font Weight Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      line-height: 1.5;
    }
    .normal {
      font-weight: normal;
    }
    .bold {
      font-weight: bold;
    }
    .light {
      font-weight: 300;
    }
    .heavy {
      font-weight: 900;
    }
  </style>
</head>
<body>
  <p class="normal">This text is normal weight (400).</p>
  <p class="bold">This text is bold weight (700).</p>
  <p class="light">This text is light weight (300).</p>
  <p class="heavy">This text is heavy weight (900).</p>
</body>
</html>
OutputSuccess
Important Notes

Not all fonts support every numeric weight. If a weight is not supported, the browser picks the closest available.

Using keywords like normal and bold is simpler and more compatible.

Font weight affects readability and style, so choose weights that fit your design and audience.

Summary

Font weight changes how thick or thin text looks.

You can use keywords like normal and bold, or numbers from 100 to 900.

Different weights help highlight or soften text in your design.

Practice

(1/5)
1. What does the CSS property font-weight control in text?
easy
A. How thick or thin the text appears
B. The color of the text
C. The size of the text
D. The font family used

Solution

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

    The font-weight property changes the thickness of the text, making it look bolder or lighter.

  2. Step 2: Compare with other text properties

    Color changes text color, size changes text size, and font family changes the font style, not thickness.

  3. Final Answer:

    How thick or thin the text appears -> Option A

  4. Quick Check:

    font-weight controls thickness [OK]
Hint: Remember: weight means thickness of letters [OK]
Common Mistakes:
  • Confusing font-weight with font-size
  • Thinking font-weight changes color
  • Mixing font-weight with font-family
2. Which of the following is the correct CSS syntax to make text bold using font-weight?
easy
A. font-weight: bold;
B. font-weight: 1000;
C. font-weight: heavy;
D. font-weight: strong;

Solution

  1. Step 1: Recall valid font-weight values

    Valid values include keywords like normal, bold, or numbers 100 to 900 in steps of 100.

  2. Step 2: Check each option

    font-weight: bold; uses bold which is correct. font-weight: 1000; uses 1000 which is invalid. Options A and D use invalid keywords.

  3. Final Answer:

    font-weight: bold; -> Option A

  4. Quick Check:

    Use 'bold' keyword for bold text [OK]
Hint: Use 'bold' keyword or 700 for bold text [OK]
Common Mistakes:
  • Using numbers outside 100-900 range
  • Using invalid keywords like 'heavy' or 'strong'
  • Missing semicolon at end
3. What will be the visual difference between these two CSS rules?
p.normal { font-weight: 400; }
p.bold { font-weight: 700; }
medium
A. Text with class 'bold' is italicized
B. Both texts look exactly the same
C. Text with class 'normal' is bolder than 'bold'
D. Text with class 'normal' is thinner than text with class 'bold'

Solution

  1. Step 1: Understand numeric font-weight values

    400 is the normal weight, and 700 is the bold weight, so 700 is thicker text.

  2. Step 2: Compare the two classes visually

    Text with class 'normal' will appear thinner than text with class 'bold'. Italic style is unrelated to font-weight.

  3. Final Answer:

    Text with class 'normal' is thinner than text with class 'bold' -> Option D

  4. Quick Check:

    400 < 700 means thinner < bolder [OK]
Hint: Higher number means thicker text [OK]
Common Mistakes:
  • Thinking 400 is bolder than 700
  • Confusing font-weight with font-style
  • Assuming no difference between 400 and 700
4. Identify the error in this CSS snippet:
h1 { font-weight: 950; }
medium
A. Missing units after 950
B. 950 is not a valid font-weight value
C. font-weight cannot be used on h1
D. Should use font-style instead of font-weight

Solution

  1. Step 1: Check valid font-weight numeric values

    Valid numeric values are multiples of 100 from 100 to 900 only.

  2. Step 2: Validate the given value

    950 is outside the valid range, so it is invalid and will be ignored by browsers.

  3. Final Answer:

    950 is not a valid font-weight value -> Option B

  4. Quick Check:

    font-weight numbers must be 100-900 [OK]
Hint: Use multiples of 100 between 100 and 900 [OK]
Common Mistakes:
  • Using numbers outside 100-900
  • Adding units like px or em to font-weight
  • Confusing font-weight with font-style
5. You want to highlight a warning message by making its text thicker but not fully bold. Which font-weight value is best to use?
hard
A. font-weight: 300;
B. font-weight: 900;
C. font-weight: 600;
D. font-weight: normal;

Solution

  1. Step 1: Understand font-weight scale

    Lower numbers like 300 are light, 400 is normal, 700 is bold, and 900 is very bold.

  2. Step 2: Choose a weight thicker than normal but less than bold

    600 is between normal (400) and bold (700), so it makes text thicker but not fully bold.

  3. Final Answer:

    font-weight: 600; -> Option C

  4. Quick Check:

    600 is semi-bold, perfect for emphasis [OK]
Hint: Use 600 for semi-bold emphasis [OK]
Common Mistakes:
  • Using 300 which is lighter than normal
  • Using 900 which is too bold
  • Using 'normal' which is not thicker