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

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