Menu
CSS

font-weight

The font-weight property in CSS is used to specify the weight (or boldness) of the font. This property accepts various values, including numeric values, keyword values, and global values. Here’s a detailed look at how to use the font-weight property:

 

Keyword Values

  • normal: Specifies a normal font weight. Equivalent to 400.
  • bold: Specifies a bold font weight. Equivalent to 700.
  • bolder: Specifies a font weight heavier than the parent element.
  • lighter: Specifies a font weight lighter than the parent element.
  •  

Numeric Values

  • 100: Thin
  • 200: Extra Light (Ultra Light)
  • 300: Light
  • 400: Normal (Regular)
  • 500: Medium
  • 600: Semi Bold (Demi Bold)
  • 700: Bold
  • 800: Extra Bold (Ultra Bold)
  • 900: Black (Heavy)

 

Example Usage

Using Keyword Values

/* Apply normal font weight */
p {
    font-weight: normal;
}

/* Apply bold font weight */
strong {
    font-weight: bold;
}

/* Apply bolder font weight relative to the parent element */
h1 {
    font-weight: bolder;
}

/* Apply lighter font weight relative to the parent element */
em {
    font-weight: lighter;
}

 

Using Numeric Values

/* Apply thin font weight */
h1 {
    font-weight: 100;
}

/* Apply medium font weight */
h2 {
    font-weight: 500;
}

/* Apply extra bold font weight */
h3 {
    font-weight: 800;
}

 

Practical Example

Here’s a complete example applying different font weights to various HTML elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Weight Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .thin {
            font-weight: 100;
        }
        .light {
            font-weight: 300;
        }
        .normal {
            font-weight: 400;
        }
        .medium {
            font-weight: 500;
        }
        .bold {
            font-weight: 700;
        }
        .extra-bold {
            font-weight: 800;
        }
    </style>
</head>
<body>
    <p class="thin">This is thin text (100).</p>
    <p class="light">This is light text (300).</p>
    <p class="normal">This is normal text (400).</p>
    <p class="medium">This is medium text (500).</p>
    <p class="bold">This is bold text (700).</p>
    <p class="extra-bold">This is extra-bold text (800).</p>
</body>
</html>

 

Using font-weight with Font Face

When defining custom fonts using @font-face, you can also specify the font-weight to ensure the correct weight is applied:

@font-face {
    font-family: 'MyCustomFont';
    src: url('mycustomfont-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('mycustomfont-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

body {
    font-family: 'MyCustomFont', Arial, sans-serif;
}

 

Adjusting Font Weight for Different Screen Sizes

You can use media queries to adjust the font weight for different screen sizes:

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

@media (max-width: 600px) {
    body {
        font-weight: 300; /* Light */
    }
}

@media (min-width: 1200px) {
    body {
        font-weight: 500; /* Medium */
    }
}

The font-weight property is versatile and crucial for defining the emphasis and hierarchy of text in your web design, making it an essential tool for improving readability and visual appeal.

CSS