CSS Fundamentals

CSS Font Weight and Style

⏱ 7 min read📖 Beginner

The font-weight property controls how thick or thin your text looks. The font-style property controls whether your text is italic or normal. Together they give you fine-grained control over the visual weight and feel of every line on your page.

h1 {
  font-weight: 700;
}

p {
  font-weight: 300;
  font-style: italic;
}

Let me ask you something.

Have you ever noticed that on a well designed page not all text looks the same weight? The heading is thick and heavy. A label underneath it is thin and light. A price or a stat is bold to draw your eye. A disclaimer at the bottom is light and subtle.

That contrast in weight is doing a lot of work. It creates hierarchy. It tells your eye where to look first, second, third. And it makes the whole page feel designed rather than just typed.

Let us learn how to control it.

CSS Font Weight

Font weight controls how thick or thin your text looks. In CSS you set it using the font-weight property.

The most basic values are the ones you already know.

Three paragraphs, three different weights. The difference is immediate and clear.

But CSS actually gives you much more control than just lighter, normal and bold. You can use numbers from 100 to 900 in steps of 100.

100 — Thin. Almost hairline.
200 — Extra light.
300 — Light.
400 — Normal. This is the default.
500 — Medium. Slightly heavier than normal.
600 — Semi bold.
700 — Bold. Same as writing bold.
800 — Extra bold.
900 — Black. The heaviest.

The difference between 400 and 600 is subtle but noticeable. The difference between 300 and 900 is dramatic.

💡

Not every font supports all nine weights. If you set font-weight: 200 and nothing seems to change the font probably only comes in a few weights. This is especially true with Google Fonts — when you select a font make sure you also select the specific weights you need otherwise the browser will just use the closest available weight and your styling will not work as expected.

CSS Font Style

Font style controls whether your text is italic or normal. You set it using the font-style property.

The italic paragraph now leans slightly to the right. It feels softer and more conversational than the straight normal text.

You will use italic most often for things like quotes, captions, labels, or any text that should feel slightly secondary or different from the main content.

There is also a third value called oblique which is similar to italic but instead of using the font's actual italic design it just slants the normal letters. Most of the time italic is the right choice.

Combining Weight and Style

Font weight and font style work completely independently. You can combine them freely.

Bold and italic at the same time. Use this sparingly — it draws a lot of attention and can feel heavy if overused.

💡

A really effective design pattern is to use a light font weight for supporting text and a heavy font weight for the main message. Like a thin subtitle above a heavy bold heading. That contrast makes the heading feel even stronger. You will see this on almost every modern landing page.

Building the Netflix Clone

Let us add proper font weights to our Netflix clone. Right now everything is the same weight. Let us create some hierarchy.

The headings are heavy and commanding at 700. The paragraphs are light and easy to read at 300. The buttons feel confident at 600. That contrast makes the whole page feel much more intentional.

In the next lesson I am going to show you text alignment, decoration, and transformation — how to center text, underline it, make it uppercase, and all the other small text tricks that make a big difference. Come on in.

Learn about Text Decoration and Alignment →

Have anything to say about this lesson?

Your feedback helps improve these tutorials. If something was confusing or missing, let us know.