Font weight in CSS - Browser Rendering Trace

Render Flow - Font weight

[Parse CSS] -> [Match selector] -> [Read font-weight property] -> [Calculate font thickness] -> [Apply font rendering] -> [Paint text]

The browser reads the CSS, finds the font-weight property, calculates how thick the text should be, and then paints the text with that thickness.

Render Steps - 5 Steps

Code Added:No font-weight property (default)

Before

[ p ]
Hello, world!

→

After

[ p ]
Hello, world!

Text is shown with normal thickness because font-weight defaults to 400 (normal).

🔧 Browser Action:Render text with default font weight.

Code Sample

This code makes the paragraph text thicker and bolder by setting font-weight to 700.

CSS

<p>Hello, world!</p>

CSS

p {
  font-weight: 700;
}

Render Quiz - 3 Questions

After applying step 3 with font-weight: 700, how does the text appear?

A Thinner and lighter than normal

B Thicker and bolder than normal

C Same thickness as normal

D Invisible text

Common Confusions - 3 Topics

Why doesn't font-weight: 900 make my text thicker?

Not all fonts support all font-weight values. If the font lacks a 900 weight, the browser uses the closest available weight.

💡 Use common fonts or check font support for weights.

Why does font-weight: bold look the same as font-weight: 700?

'bold' is a keyword equal to 700, so they produce the same thickness.

💡 Remember 'bold' = 700 in font-weight.

Why can't I see a difference between font-weight: 400 and font-weight: normal?

They are the same value; 'normal' is just a keyword for 400.

💡 'normal' and 400 mean the same font thickness.

Property Reference

Property	Value Applied	Visual Effect	Common Use
font-weight	normal or 400	Normal thickness text	Default text weight
font-weight	bold or 700	Thicker, bold text	Emphasize important text
font-weight	100	Very thin, light text	Light text style
font-weight	300	Light text	Slightly lighter than normal
font-weight	500	Medium weight text	Between normal and bold
font-weight	900	Very thick, heavy text	Strong emphasis or headings

Concept Snapshot

font-weight controls text thickness. Default is normal (400). Bold is 700 or keyword 'bold'. Values range from 100 (thin) to 900 (heavy). Not all fonts support all weights. Use font-weight to emphasize text visually.

Practice

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