Why Font weight in CSS? - Purpose & Use Cases

The Big Idea

Discover how a single CSS property can transform your text from plain to powerful instantly!

The Scenario

Imagine you are designing a webpage and want some text to look bold to grab attention, while other text stays normal. You try to make text bold by manually changing the font style in an image editor or by using different font files for each weight.

The Problem

This manual way is slow and tricky. You have to create or find separate font files for each thickness, and if you want to change the weight later, you must redo everything. It's hard to keep text consistent and update styles quickly.

The Solution

CSS font weight lets you easily control how thick or thin your text looks by just changing one property. You can pick from normal, bold, or numeric weights like 400 or 700, and the browser handles the rest automatically.

Before vs After

✗ Before

font-family: 'MyBoldFont'; /* separate font file for bold */
font-family: 'MyRegularFont'; /* separate font file for normal */

✓ After

font-weight: 700; /* bold text */
font-weight: 400; /* normal text */

What It Enables

You can quickly and consistently change text thickness across your whole site with simple CSS, making your design flexible and easy to update.

Real Life Example

On a blog, you want headings to stand out with bold text and paragraphs to stay normal. Using font weight, you just add font-weight: bold; to headings and font-weight: normal; to paragraphs without extra font files.

Key Takeaways

Font weight controls text thickness using simple CSS.

It avoids the need for multiple font files for different weights.

It makes styling text faster, easier, and more consistent.

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