Bird
Raised Fist0
CSSmarkup~5 mins

Font weight in CSS - Cheat Sheet & Quick Revision

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
Recall & Review
beginner
What does the CSS property font-weight control?
The font-weight property controls how thick or thin the text appears on the screen.
Click to reveal answer
beginner
Name three common values you can use with font-weight.
Common values are normal (default thickness), bold (thicker text), and numeric values like 400 (normal) or 700 (bold).
Click to reveal answer
intermediate
What numeric range can font-weight values take?
Numeric values range from 100 (thin) to 900 (extra bold), increasing in steps of 100.
Click to reveal answer
beginner
How would you make text bold using CSS?
Use font-weight: bold; or font-weight: 700; in your CSS rule for the text element.
Click to reveal answer
beginner
True or False: The font-weight property affects the size of the text.
False. font-weight changes the thickness of the text, not its size.
Click to reveal answer
Which CSS value makes text appear thicker?
Afont-weight: thin;
Bfont-weight: bold;
Cfont-weight: normal;
Dfont-weight: light;
What numeric value corresponds to normal font weight?
A400
B100
C700
D900
Which is NOT a valid font-weight value?
A500
Bbold
Cnormal
Dextra-bold
If you want very thin text, which value should you use?
A100
Bbold
C900
Dnormal
Does font-weight change the font size?
AYes, it makes text smaller
BYes, it makes text bigger
CNo, it only changes thickness
DOnly in some browsers
Explain how the font-weight property affects text appearance and list some common values.
Think about how thick or thin letters look.
You got /4 concepts.
    Describe the difference between using named values and numeric values for font-weight.
    Consider how you can be more precise with numbers.
    You got /3 concepts.

      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