1. css
  2. /properties
  3. /font-weight

font-weight

Definition

The font-weight property sets the weight or thickness of a font. The weight of a font refers to how thick or thin its strokes appear, and it is typically specified using numeric values or keywords such as "normal" and "bold". The weight values available for a particular font family depend on the font files available on the user's device.

Examples

This example sets the font-weight property to 400, which is equivalent to the "normal" keyword:

p {
  font-weight: 400;
}

This example sets the font-weight property to "bold":

h1 {
  font-weight: bold;
}

This example sets the font-weight property to 600, which is a semi-bold weight:

blockquote {
  font-weight: 600;
}

Values

ValueDescription
normalSets the font weight to a normal, regular weight (400)
boldSets the font weight to a bold weight (700)
<number>Sets the font weight to a numeric value between 100 and 900, in increments of 100

Best Practices

  • Use the font-weight property to ensure that text is legible and easy to read. Text that is too thin or too thick may be difficult to read, especially at smaller font sizes.
  • Use a font weight that is appropriate for the content and context of your page or design. For example, a more decorative or stylized font may require a lighter weight to be legible, while a more utilitarian font may require a heavier weight for emphasis.
  • Consider using font weight in combination with other text styling properties, such as font-style, font-size, and line-height, to create a consistent and effective typographic hierarchy.
  • Use relative units such as em or rem to specify font sizes and weights, as these units are more flexible and adaptable to different device sizes and screen resolutions.
  • Test your font-weight styles on different devices and screen sizes to ensure that they are legible and effective.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes