CSS Tutorial

CSS Font Weight

The CSS font-weight property is used to specify the thickness or boldness of text. It controls how thick or thin the characters in a text should appear. The font weight can be set to a keyword or a numeric value, with the most common use being to apply boldness to text.

Key Points on CSS Font Weight:

font-weight accepts either numeric values (100 to 900) or keywords (normal, bold, bolder, lighter).
The numeric values are typically based on the font family, with 400 being the normal weight and 700 being bold.
font-weight is useful for emphasizing text, improving readability, and creating a visual hierarchy in design.
Not all fonts support all numeric values. Some fonts may have only a few predefined weights (e.g., regular and bold).
normal is the default weight, equivalent to a value of 400, while bold corresponds to a value of 700.
bolder and lighter are relative keywords that make the text bolder or lighter than the parent element's font weight.
Custom fonts may include a range of weights, which can be specified using the @font-face rule.
Font weights affect the legibility and overall feel of text, making it more prominent or subtle based on the design needs.

Font Weight 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.

Syntax for CSS Font Weight:

Syntax Example

/* Font weight syntax */
        .element {
            font-weight: value;
                 }
        
        /* Example */
        p {
            font-weight: bold;
        }

Examples of CSS Font Weight:

The following examples demonstrate how to use the font-weight property with different values:

Code Example: Font Weight Normal


            p {
            font-weight: normal;
              }

Output

This paragraph has normal font weight.

Code Example: Font Weight Bold


            p {
            font-weight: bold;
              }

Output

This paragraph has bold font weight.

Code Example: Font Weight Using Numeric Value


            p {
            font-weight: 700;
              }

Output

This paragraph has a numeric font weight of 700, which is bold.

Code Example: Font Weight Bolder


            p {
            font-weight: bolder;
              }

Output

This paragraph has a bolder font weight than its parent element.

Code Example: Font Weight Lighter


            p {
            font-weight: lighter;
              }

Output

This paragraph has a lighter font weight than its parent element.

Code Example: Font Weight Using Numeric Values 100-900


            p {
            font-weight: 400; /* Normal weight */
              }

Output

This paragraph has a font weight of 400, which is normal weight.

Font Weight and Readability:

Use font-weight to create emphasis in headings, subheadings, and important text.
Incorporate bold or lighter weights strategically to create a visual hierarchy in your design.
Ensure text remains readable, especially in thinner weights, as some fonts may become hard to read with lighter weights.

When applying font weights, consider the context and purpose of your design. Bold text should be used sparingly for emphasis, while normal weights can provide a clean, legible body text style. Experiment with different weights to achieve the desired impact without sacrificing readability.