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.