font-weight

by

Font-weight is a CSS property used to define the thickness or boldness of a font. It allows you to control the weight of your text, from light to bold.

Basic Usage

You can apply font-weight to any HTML element using CSS. Here’s a simple example:

p {
  font-weight: bold;
}

This will make all paragraph elements on your page bold.

Font-Weight Values

There are two main types of values for font-weight:

Keyword Values

  • normal: Default font weight.
  • bold: Bolder than normal.
  • lighter: Lighter than normal.
  • bolder: Bolder than the parent element’s font weight.
  • lighter: Lighter than the parent element’s font weight.

Numeric Values

  • 100: Thin
  • 200: Extra-light
  • 300: Light
  • 400: Normal (default)
  • 500: Medium
  • 600: Semi-bold
  • 700: Bold
  • 800: Extra-bold
  • 900: Black

Example with Numeric Values

h1 {
  font-weight: 700; /* Bold */
}

p {
  font-weight: 300; /* Light */
}

Important Notes

  • Browser Compatibility: While most modern browsers support all font-weight values, older browsers might have limitations.
  • Font Availability: The available font weights depend on the specific font you’re using. Some fonts might not have all weight options.
  • Specificity: If you apply font-weight to multiple selectors, the most specific one will take precedence.

Additional Tips

  • Use font-weight in combination with other typography properties like font-size, font-family, and line-height for better control over your text appearance.
  • Consider using relative values like bolder and lighter when you want to create relationships between text elements.
  • Test your styles across different browsers and devices to ensure consistent results.

By understanding and effectively using font-weight, you can enhance the readability and visual hierarchy of your web content.