Font Weight and Font Style

When writing, to emphasize certain parts or give a special feeling, you might press a pen harder or use cursive writing.

In CSS, the font-weight property is used to change the thickness of the text, and the font-style property is used to change the style.

1. font-weight

The font-weight property adjusts the thickness of the text. Much like controlling the pressure of a pen, you can make the text thicker or thinner.

Font weight can be specified using keyword values (normal, semi-bold, bold...) or numerical values (300, 400, 500...).

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

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

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

The numeric values and keywords may vary depending on the font.

For instance, bold may be applied as 700 for some fonts, and as 600 for others.

2. font-style

The font-style property changes the style of the text.

normal refers to regular style text, and italic is for slanted, cursive-like fonts.

Example code:

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

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

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

Follow the underlined parts in the code and try entering them yourself.