Font Weight

In the last lesson you learned about Font Size. Now let’s look at font weight. This is how you make text look thick and bold, or thin and light.

🤔 Why We Need Font Weight

Open any app like WhatsApp or YouTube. Look at a chat or a video card. The name or the title looks darker and thicker than the small text below it, right?

That thickness is the weight of the text. Here is why it matters.

• Without weight control, every line of text looks the same. Then your eyes don’t know where to look first.
• A heading should feel stronger than the normal text. Weight is how you make that happen.
• You want to point the reader to the important words. Making them thicker is a simple way to do that.

So font weight is how thick or thin the letters look. Thick text feels strong and important. Thin text feels light and quiet.

🖊️ A Real-Life Analogy

Think of writing with a pen.

When you press hard, the line comes out thick and dark. When you press softly, the line comes out thin and light. The word is the same. Only the pressure changed.

Font weight is that pressure for your text. You don’t really press a pen here. You just tell CSS how heavy you want the letters to be.

🎨 The Syntax

You set the weight with the font-weight property. You can give it a word or a number.

Here is the simple word version. This makes the text bold.

p {
  font-weight: bold;
}

The two common words are normal and bold. The word normal is the everyday weight you see by default. The word bold is the thick, strong version.

You can also use numbers. The numbers go from 100 to 900, and they jump in hundreds. So you have 100, 200, 300, and so on up to 900.

This sets the text to a heavy weight using a number.

p {
  font-weight: 700;
}

A lower number means thinner text. A higher number means thicker text. Here is what the common numbers mean.

So font-weight: bold; and font-weight: 700; do the same thing. Use whichever one feels easier to you.

🧩 A Simple Example

Let’s make a heading bold and keep the paragraph normal. First the HTML.

<h2>Welcome back, Riya</h2>
<p>You have three new messages.</p>

Now the CSS. We make the heading thick and the paragraph normal.

h2 {
  font-weight: 700;
}

p {
  font-weight: 400;
}

📱 A Real Example

Think of a card in a shopping app like Amazon. The product name should stand out. The small detail below it can stay quiet. Here is the HTML for one card.

<div class="card">
  <p class="name">Wireless Headphones</p>
  <p class="note">Free delivery by Monday</p>
</div>

Now we make the name strong and the note light.

.name {
  font-weight: 700;
}

.note {
  font-weight: 300;
}

⚠️ Common Mistakes

A few small things trip up beginners. Watch out for these.

• Writing the number in quotes, like font-weight: "700";. ❌ Numbers do not take quotes. Write font-weight: 700; instead. ✅
• Using a value like 500 and expecting a clear change. Many fonts only have 400 and 700. So 500 may look the same as normal.
• Thinking bolder and lighter mean the same as bold and normal. They do not. The words bolder and lighter change the weight compared to the parent element, which can confuse you early on. So stick to normal, bold, or numbers for now.

✅ Best Practices

Here is how to keep your text clean and easy to read.

• Use bold for the things that matter, like headings and important labels. If everything is bold, then nothing stands out.
• Keep your normal text at normal or 400. It is the easiest weight to read for long lines.
• Pick one or two weights for the whole page. Too many different weights make the page look messy.

🧩 What You’ve Learned

You now know how to control how thick or thin your text looks. Here is a quick recap.

• ✅ font-weight sets how thick or thin the letters are.
• ✅ You can use words like normal and bold, or numbers from 100 to 900.
• ✅ 400 is normal and 700 is bold. They are the same as the words.
• ✅ Not every font has every weight, so the browser picks the closest one.
• ✅ Use bold for important text and keep normal text light, so the page stays easy to read.

🚀 What’s Next?

Next you will learn how to control the space between lines of text. This makes your paragraphs feel open and easy to read.

Line Height