Skip to main content
Practice

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...).

CSS
.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.


  1. 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:

CSS
.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.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.