CSS Font-Weight

Introduction

CSS font weight is a property used in web development to control the thickness and boldness of text within a webpage. It is used to define the weight of the text. The available weight depends on the font family used by the browser.

It plays an important role in typography because it gives designers and programmers more control over how text visually appears and emphasizes text elements.

Purpose of Font-Weight Property

The font-weight property's primary purpose is to set the font's weight, which affects how thick or thin the characters appear on the screen or in print. It is a flexible tool for text formatting because it provides a range of values to manage the boldness level.

Depending on the web browser's font family, several font-weight values can be accessible. Different font families have predefined font weights of their own, and although some may offer a greater range of alternatives, others may offer a few 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 property contains various property values for controlling the weight and boldness of text and adheres to a specified 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:

Specific HTML elements can have the font-weight attribute applied in CSS to modify the text's weight and boldness. Doing so allows you to create various text styles and highlight particular passages of your information.

Example 1: Font weight for Paragraphs

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

In the example above, the default font weight, which is normal (often 400), will be used for all paragraphs (<p>) within 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 case, the font weight will be 600, providing a medium weight text style.

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 font weight, font size, and font-family properties are used in this example to style the h4> headers. For the chosen elements, this develops a unified and consistent typographic style.

2. Setting Global Font Weight:

When using CSS, you can target the body selector to apply a global font weight to the entire document or just a portion. All web page text can have a uniform font weight by applying the font-weight property to the body element.

This strategy can be helpful when you want to keep your website's visual design consistent throughout.

Example 1:

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

This example applies the font-weight attribute to the body selector with a value of 400, which stands for the standard (normal) font weight. This will guarantee that the font weight of every text element inside the <body> tag is consistent and proper.

Example 2: Combining Global Font Weight with Other 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 example uses a global font weight for the entire document while applying various font weights to specific HTML components. The rest of the content will use the global font weight (400), with the headers (<h1>) having a bold font weight of 700 and the paragraphs (<p>) having a softer font-weight of 300.

Therefore, you can manage the overall appearance of text on your website by utilizing the body selector to establish a universal font weight.

3. Combining with Other Properties:

CSS's font-weight property can be used with other text-related properties to produce comprehensive and aesthetically pleasing 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 given a custom font weight of 300 (a lighter style). Furthermore, we designate a specific font family for paragraphs, which will impact the font weight and overall look 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 illustration combines the font weight and size for <h2> headings. The font size is 28 pixels, with a 600 (medium-bold style) font weight. You may produce visually striking and captivating headlines with this combo.

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 illustration, the font-weight property is set to bold. In addition, the line height property is changed to 1.5 times the font size.

Example 4: Combining with text-decoration

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

For anchor links (<a>), we have specified a custom font weight of 500. The anchor links are also underlined using the text-decoration attribute, helping them stand out and be easier to recognize.

Best Practices for Using Font-Weight in CSS

Accessibility Considerations:

It is crucial to take accessibility into account when using the font-weight property in CSS to make sure that your text is accessible and useable for all users, including those who have visual impairments.

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 see an example of CSS font weight Using 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>

Next TopicCSS font-stretch

← prev next →