The font-weight Property in CSS

The font-weight property in CSS controls the thickness or boldness of the text. It allows you to adjust the weight of the font, which affects how light or heavy the text appears. This property is useful for creating emphasis, hierarchy, and visual interest in your typography.

Values of font-weight

1. Numeric Values

   • 100 to 900: Numeric values represent different levels of font weight, with 100 being the lightest and 900 being the boldest. These values are typically multiples of 100.

     .font-weight-400 {
       font-weight: 400; /* Normal weight */
     }
     
     .font-weight-700 {
       font-weight: 700; /* Bold weight */
     }
     

2. Keyword Values

   • normal: Represents the default font weight, typically equivalent to 400.

     .font-weight-normal {
       font-weight: normal;
     }
     

   • bold: Represents a bold font weight, typically equivalent to 700.

     .font-weight-bold {
       font-weight: bold;
     }
     

   • bolder: Makes the text bolder relative to the parent element’s font weight.

     .font-weight-bolder {
       font-weight: bolder;
     }
     

   • lighter: Makes the text lighter relative to the parent element’s font weight.

     .font-weight-lighter {
       font-weight: lighter;
     }
     

Examples

1. Using Numeric Values

   .light-text {
     font-weight: 300; /* Light weight */
   }
   
   .normal-text {
     font-weight: 400; /* Normal weight */
   }
   
   .bold-text {
     font-weight: 700; /* Bold weight */
   }
   

2. Using Keywords

   .normal-text {
     font-weight: normal; /* Equivalent to 400 */
   }
   
   .bold-text {
     font-weight: bold; /* Equivalent to 700 */
   }
   
   .bolder-text {
     font-weight: bolder; /* Bolder than the parent element’s font weight */
   }
   
   .lighter-text {
     font-weight: lighter; /* Lighter than the parent element’s font weight */
   }
   

Explanation

• Numeric Values: Allow precise control over font weight. The availability of these weights depends on the font family. Not all fonts support every numeric weight.
• Keyword Values: Provide more general control and are easier to use for common scenarios. normal and bold are widely supported, while bolder and lighter adjust the weight relative to the parent element.
• Relative Keywords: bolder and lighter adjust the weight relative to the parent element's font weight, which can be useful for creating contrast without specifying exact numeric values.

Use Cases

• Emphasis: Use bold or higher numeric values to emphasize important text, such as headings or key points.
• Hierarchy: Create visual hierarchy by varying font weights for different text elements, such as titles, subtitles, and body text.
• Readability: Adjust font weight to improve readability, especially in long passages of text where a slightly heavier weight can make text easier to read.