CSS - font-weight



Font weight refers to the thickness or boldness of the characters. Different weights within a font family can be used to create visual hierarchy or emphasis within a text.

The font-weight property alters the visual weight of characters in an element.

Possible Values

  • normal: Font weight normal. Equivalent to 400.

  • bold: Font weight bold. Equivalent to 700.

  • <number>: Value between 1 and 1000 define thickness of font. Higher numbers represent weights that are bolder than (or as bold as) lower numbers.

  • lighter: Lighter font weight relative to the parent element's font weight.

  • bolder: Bolder font weight relative to the parent element's font weight.

Applies to

All the HTML elements.

DOM Syntax

object.style.fontWeight = "900";

CSS font-weight - Basic Example

Here is an example:

<html>
<head>
</head>
<body>
   <p style="font-weight: bold;">Font-weight is bold.</p>
   <p style="font-weight: lighter;">Font-weight is lighter.</p>
   <p style="font-weight: 600;">Font-weight is 600.</p>
   <p style="font-weight: 900;">Font-weight is 900, heavy/black.</p>
   <p style="font-weight: normal;">Font-weight is normal (400).</p>
</body>
</html>
Advertisements