CSS Font Style - Explained with Examples

Refine font appearance with CSS Font Style! Explore examples for creative text variations, mastering the art of expressive typography in web development projects.

Font Style

The font-style property is mostly used to specify italic text.

This property has three values:

• normal - The text is shown normally
• italic - The text is shown in italics
• oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

Example

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

Font Weight

The font-weight property specifies the weight of a font:

Example

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

Font Variant

The font-variant property specifies whether or not a text should be displayed in a small-caps font.

In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

Example

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

#css