Font Weight and Font Style

When writing, we often emphasize or stylize certain text by applying more pressure with a pen or by using cursive handwriting.

In CSS, you can achieve similar effects by using the font-weight property to change the thickness of the text and the font-style property to change the style.

The font-weight property controls the thickness of the text. It's like adjusting the pressure of your pen to make the text thicker or thinner.

Text weight can be defined using keyword values (normal, semi-bold, bold...) or numeric values (300, 400, 500...).

Copy
.normal-text {
  font-weight: normal; /* Regular weight text, can also be set to 400 */
}

.bold-text {
  font-weight: bold; /* Bold text, can also be set to 700 */
}

.thicker-text {
  font-weight: 400;
}

Numeric values and keywords might vary in application depending on the font.

For instance, bold might be rendered as 700 with some fonts, while with others it could be 600.

The font-style property alters the text style.

normal results in standard style text, whereas italic tilts the text, giving it a cursive-like appearance.

Copy
.regular-text {
  font-style: normal; /* Regular style text */
}

.italic-text {
  font-style: italic; /* Tilted, cursive-style text */
}

If a font does not support italics, the font-style: italic property will not be applied.

Try typing the emphasized parts of the code to see the effects.