CSS font-weight

Introduction

CSS font weight is a feature utilized in web design to manage the thickness and emphasis of text on a webpage. It is employed to specify the heaviness of the text, with the options varying based on the font family supported by the browser.

It holds significance in typography by providing designers and developers with increased authority over the visual presentation of text, allowing for the highlighting of text components.

Purpose of Font-Weight Property

The main function of the font-weight property is to define the thickness of characters in a font, influencing their appearance on screen or in printed materials. This property offers a variety of values to control the intensity of boldness, making it a versatile option for text styling.

Depending on the font family used by the web browser, various font-weight settings may be available. Each font family comes with its own set of default font weights, with some providing a wider selection of choices while others have limited options.

NOTE: Together with other CSS properties like font size, font family, and font style, the font-weight property is frequently used to provide consistent text design throughout an entire website.

Syntax and Property Values

The CSS font-weight attribute offers diverse values to manage the thickness and emphasis of text while following a specific syntax.

Syntax:

font-weight: normal | lighter | bolder | bold | number | inherit |initial | unset;

Property Values:

• ✅ Normal: It is the default font weight whose numeric value is 400. It refers to the standard weight for the selected font family.
• ✅ Lighter: It considers the existing font weight of the font family and makes the font weight lighter than the parent element. Compared to the font weight of the parent element, the font weight is lighter when the lighter value is used.
• ✅ Bolder: Contrarily, the bolder value makes the font weight heavier than the parent element's font weight. It considers the existing font weight of the font family and makes the font-weight heavier compared to the parent element.
• ✅ Bold: As its name implies, it defines the bold font weight, and its numeric value is 700.
• ✅ Number: It sets the font weight based on the specified number. Its range can be between 1 to 1000.
• ✅ Initial: It is used to set the font weight to its default value.
• ✅ Inherit: Using the inherent value, the font weight may inherit from its parent element. It can be helpful when you want an element's font weight to match its parent's.
• ✅ Unset: The unset value returns the font weight to its default normal or natural value setting based on inheritance rules.

How to Use Font Weight in CSS

1. Applying font weight to Elements:

Certain HTML tags support the font-weight property in CSS, enabling adjustments to the text's thickness and emphasis. This capability facilitates the creation of diverse text formats and emphasizes specific sections of content.

Example 1: Font weight for Paragraphs

p {
  font-weight: normal; /* Sets the font weight to normal for all paragraphs */
}

In the instance provided, the standard font weight, typically set at 400, will be applied to all paragraphs (<p>) contained in the HTML content.

Example 2: Making Headings Bold

h1, h2, h3 {
  font-weight: bold; /* Sets the font weight to bold for h1, h2, and h3 headings */
}

This CSS rule sets the <h1>, <h2>, and <h3> elements' font-weight bold (often 700), causing these headings to be displayed boldly.

Example 3: Custom Font Weight for Specific Class

.my-custom-text {
  font-weight: 600; /* Sets the font weight for elements with class "my-custom-text" */
}

In this instance, the font weight will be set to 600, giving a medium weight text appearance.

Example 4: font-weight with Other Properties

h4 {
  font-weight: 500; /* Sets the font weight to 500 for h4 headings */
  font-size: 24px; /* Sets the font size to 24 pixels for h4 headings */
  font-family: "Helvetica Neue", Arial, sans-serif; /* Applies a specific font-family to h4 headings */
  /* Other CSS properties can also be combined here for comprehensive text styling */
}

The properties for font weight, font size, and font-family are applied in this instance to customize the h4> headings. By selecting these attributes, a cohesive and uniform typographic design is established.

2. Setting Global Font Weight:

When working with CSS, you have the option to select the body element in order to assign a consistent font weight across the entire webpage or specific sections. This allows you to set a universal font weight for all text on the webpage by utilizing the font-weight property on the body selector.

This approach can prove beneficial when aiming to maintain uniform visual design across your website.

Example 1:

body {
  font-weight: 400; /* sets the document's overall font-weight to 400. */
}

This instance assigns the font-weight property to the body selector using a setting of 400, representing the default (normal) font weight. This ensures uniform and correct font weight for all text elements within the <body> tag.

Illustration 2: Merging Global Font Weight with Additional Selectors:

body {
  font-weight: 400; /* Sets the font weight to 400 for the entire document */
}

h1 {
  font-weight: 700; /* Sets the font weight to 700 for all h1 headings */
}

p {
  font-weight: 300; /* Sets the font weight to 300 for all paragraphs */
}

This illustration employs a universal font thickness for the complete document while assigning different font weights to individual HTML elements. All remaining text will stick to the global font weight of 400, with the headings (<h1>) set to a bold font weight of 700 and the paragraphs (<p>) styled with a lighter font-weight of 300.

Therefore, you have the ability to control the overall look of text on your website by using the body selector to set a consistent font thickness.

3. Combining with Other Properties:

Utilizing CSS's font-weight attribute in conjunction with additional text properties can result in thorough and visually appealing typography.

Example 1: Combining with font-family

p {
  font-weight: 300; /*font-weight 300 for paragraphs */
  font-family: "Helvetica Neue", Arial, sans-serif; /* Applies a specific font-family to paragraphs */
}

Here, all paragraphs (<p>) are assigned a custom font weight of 300 (a lighter style). Additionally, we specify a particular font family for paragraphs, influencing the font weight and overall appearance of the text.

Example 2: Combining with font-size

h2 {
  font-weight: 600; /* font-weight 600 for h2 headings */
  font-size: 28px; /* font size 28 pixels for h2 headings */
}

This visual representation blends the font weight and size for <h2> headers. The font size is set at 28 pixels, paired with a font weight of 600 (representing a medium-bold style). Using this combination, you can create eye-catching and engaging headlines.

Example 3: Combining with line-height

blockquote {
  font-weight: bold; /* font-weight - bold for blockquotes */
  line-height: 1.5; /* Sets the line height to 1.5 times the font size for blockquotes */
}

For blockquotes in this example, the font-weight attribute is adjusted to bold. Moreover, the line height property is modified to be 1.5 times the size of the font.

Example 4: Combining with text-decoration

a {
  font-weight: 500; /* font-weight 500 for anchor links */
  text-decoration: underline; /* Underlines anchor links */
}

For anchor elements (<a>), a custom font weight of 500 has been defined. Additionally, the anchor links feature underlining through the text-decoration property, which enhances their visibility and aids in quick identification.

Best Practices for Using Font-Weight in CSS

Accessibility Considerations:

It is important to consider accessibility when utilizing the font-weight attribute in CSS to ensure that your text is inclusive and functional for all individuals, particularly those with visual challenges.

Here are some key considerations:

• ✅ Readability and Contrast: Ensure the text and background have enough contrast. For individuals with limited vision or color blindness, choosing a font weight that offers sufficient contrast makes it easier for them to recognize the text.
• ✅ Refrain from Overusing Bold Text: Bold text can emphasize a point but use it sparingly because it might make writing harder to read. Users may become overwhelmed by too much bold writing, which makes it difficult to spot the most crucial information.
• ✅ Semantic Meaning: Using font weight to communicate the content's semantic meaning. For instance, headings should be in a different font style than the body text (such as bold) to indicate their prominence in the hierarchy.
• ✅ Responsive Design: Take into account adjusting font weight for various screen sizes. Ensure that the font-weight scales correctly for different viewports. What may be readable on a wide screen may be difficult to read on smaller devices.
• ✅ User Preferences: Comply with the user's operating system or browser preferences. Your website should adjust to any user preferences for particular font weights.
• ✅ Test with Screen Readers: Test your website using screen readers to make sure that visitors who are blind can distinguish between different font weights. It's crucial to ensure that the desired emphasis is properly communicated because screen readers frequently announce the bold text.
• ✅ Font Pairing: Pay attention to font pairings when using various font weights. Readability may need to be improved by some font choices that conflict or produce distracting visual patterns.
• ✅ WCAG Guidelines: Learn about the WCAG or Web Content Accessibility Guidelines. These recommendations cover every aspect of how to make web material accessible to everyone, including those with disabilities.

Examples

Let's explore an illustration of CSS font weight employing property values:

<!DOCTYPE html>     
<html>   
<head>   
    <title> font-weight property </title>     
    <style>   
        body{   
            font-family: sans-serif;   
        }   
        p.one{   
            font-weight: normal;   
        }   
        p.two{   
            font-weight: lighter;   
        }   
              
        p.three{   
            font-weight: bolder;   
        }   
        
        p.four{   
            font-weight: bold;   
        }   
        
        p.five{   
            font-weight: 1000;   
        }   
        
        p.six{   
            font-weight: initial;   
        }   
        p.seven{   
            font-weight: inherit;   
        }   
        p.eight{   
            font-weight: unset;   
        }   
        
    </style>   
</head>     
<body>   
    <p class="one">   
       normal property value  
    </p>   
    <p class="two">   
      lighter property value  
    </p>   
    
    <p class="three">   
      bolder property value  
    </p>   
    <p class="four">   
      bold property value  
   </p>   
   <p class="five">   
      number property value  
   </p>   
  
    <p class="six">   
      initial property value  
    </p>   
    <p class="seven">   
      inherit property value  
    </p>   
    <p class="eight">   
      unset property value  
    </p>   
</body>   
</html>