CSS Font-Weight Enhancing Text Emphasis

Introduction

The font-weight property in CSS is a powerful tool for web developers and designers. It lets you control the thickness or boldness of text on your web pages. This feature works across many devices and browsers, making it reliable for enhancing the visual hierarchy and readability of your content.

Understanding how to use the font-weight property can significantly improve the typography and overall user experience of your website. It’s great for creating distinct headings, emphasizing important text, and ensuring your design is both appealing and accessible.

Specification

The font-weight property is defined in the CSS Fonts Module Level 4 specification. This module provides guidelines on how font properties should be implemented across different browsers and devices. The specification ensures consistency and standardization, making it easier for web developers to create visually appealing and accessible content.

Syntax

The font-weight property in CSS is used to set the weight or boldness of the font. The syntax is straightforward and allows for both keyword values and numeric values. Here’s how you can use it in your CSS code:

/* Keyword values */
font-weight: normal;
font-weight: bold;

/* Numeric values ranging from 1 to 1000 */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /* Equivalent to 'normal' */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* Equivalent to 'bold' */
font-weight: 800;
font-weight: 900;

/* Relative to the parent element */
font-weight: lighter;
font-weight: bolder;

/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: revert-layer;
font-weight: unset;

Keyword Values

• normal: This sets the font weight to the default, which is equivalent to 400.
• bold: This sets the font weight to bold, which is equivalent to 700.

Numeric Values

Numeric values range from 100 to 900, with higher numbers representing bolder weights. The most common values are:

• 100: Thin (Hairline)
• 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)

Relative Values

• lighter: This makes the font weight one level lighter than the parent element.
• bolder: This makes the font weight one level heavier than the parent element.

Global Values

• inherit: This inherits the font-weight value from the parent element.
• initial: This sets the font-weight to its initial value.
• revert: This reverts the font-weight to the user-agent stylesheet value.
• revert-layer: This reverts the font-weight to the value specified in the previous layer.
• unset: This resets the font-weight to its inherited value if it is inheritable, or to its initial value if not.

Meaning of Relative Weights

When using the lighter or bolder values, the following chart shows how the absolute font weight of the element is determined:

Common Weight Name Mapping

The numeric values from 100 to 900 roughly correspond to the following common weight names:

Fallback Weights

When using the font-weight property, it’s important to understand how fallback weights are determined. If the exact weight specified is not available in the font family, the browser uses a fallback algorithm to select the closest available weight. This ensures that the text still appears as intended, even if the desired weight is not supported.

Here’s how the fallback algorithm works:

• If the target weight is between 400 (normal) and 500 inclusive:
  • The browser first looks for available weights between the target and 500, in ascending order.
  • If no match is found, it looks for available weights less than the target, in descending order.
  • If no match is found, it looks for available weights greater than 500, in ascending order.
• If the target weight is less than 400:
  • The browser looks for available weights less than the target, in descending order.
  • If no match is found, it looks for available weights greater than the target, in ascending order.
• If the target weight is greater than 500:
  • The browser looks for available weights greater than the target, in ascending order.
  • If no match is found, it looks for available weights less than the target, in descending order.

Variable Fonts

Variable fonts are a modern addition to CSS that allow for a wide range of typographic variations within a single font file. Instead of having separate files for different weights, variable fonts include a continuous range of weights that you can control with the font-weight property.

Advantages of Variable Fonts

• Reduced File Size: Variable fonts can significantly reduce the number of font files you need to load, improving page load times.
• Flexibility: You can fine-tune the weight of your text to match your design needs precisely.
• Consistency: Variable fonts ensure that your typography remains consistent across different weights and styles.

Using Variable Fonts

To use variable fonts, you first need to include the font in your CSS using the @font-face rule. Then, you can control the font weight using the font-weight property.

Example

Here’s an example of how to use a variable font in your CSS:

/* Define the variable font */
@font-face {
  font-family: 'VariableFont';
  src: url('path/to/variable-font.woff2') format('woff2');
  font-weight: 100 900; /* Specify the weight range */
}

/* Apply the variable font to the body text */
body {
  font-family: 'VariableFont', sans-serif;
  font-weight: 400; /* Normal weight */
}

/* Set headings to bold */
h1, h2, h3 {
  font-weight: 700; /* Bold weight */
}

/* Set subheadings to semi-bold */
h4, h5, h6 {
  font-weight: 600; /* Semi-bold weight */
}

/* Set emphasis text to extra bold */
strong {
  font-weight: 800; /* Extra bold weight */
}

/* Set small text to light */
small {
  font-weight: 300; /* Light weight */
}

Accessibility

When using the font-weight property, it’s important to consider accessibility. Ensuring that your text is readable and understandable for all users is crucial for creating an inclusive web experience.

Tips for Accessible Font Weights

• Use Moderate Weights: Extremely light or heavy weights can be difficult to read, especially for users with visual impairments. Stick to moderate weights for body text.
• Contrast: Ensure that there is sufficient contrast between the text and the background. High-contrast text is easier to read for users with visual impairments.
• Responsive Design: Consider how your font weights will appear on different devices and screen sizes. Ensure that your text remains readable on all devices.
• Testing: Test your designs with different users, including those with disabilities, to ensure that your text is accessible to everyone.

Example

Here’s an example of how to use the font-weight property in an accessible way:

/* Set body text to a moderate weight */
body {
  font-weight: 400; /* Normal weight */
  color: #333; /* Ensure sufficient contrast */
}

/* Set headings to bold for emphasis */
h1, h2, h3 {
  font-weight: 700; /* Bold weight */
  color: #000; /* Ensure sufficient contrast */
}

/* Set emphasis text to semi-bold */
strong {
  font-weight: 600; /* Semi-bold weight */
  color: #000; /* Ensure sufficient contrast */
}

/* Set small text to light for subtle emphasis */
small {
  font-weight: 300; /* Light weight */
  color: #666; /* Ensure sufficient contrast */
}

Examples

Setting Font Weights

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Weight Examples</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    p {
      font-weight: bold; /* Equivalent to 700 */
    }

    div {
      font-weight: 600; /* Two steps heavier than normal but less than bold */
    }

    span {
      font-weight: lighter; /* One step lighter than its parent */
    }
  </style>
</head>
<body>
  <h1>Font Weight Examples</h1>
  <p>
    Alice was beginning to get very tired of sitting by her sister on the bank,
    and of having nothing to do: once or twice she had peeped into the book her
    sister was reading, but it had no pictures or conversations in it, "and what
    is the use of a book," thought Alice "without pictures or conversations?"
  </p>

  <div>
    I'm heavy<br />
    <span>I'm lighter</span>
  </div>
</body>
</html>

CSS

/* Set paragraph text to be bold. */
p {
  font-weight: bold; /* Equivalent to 700 */
}

/* Set div text to two steps heavier than normal but less than a standard bold. */
div {
  font-weight: 600;
}

/* Set span text to be one step lighter than its parent. */
span {
  font-weight: lighter;
}

Result

In this example, the paragraph text is bold (font-weight: 700), the div text is set to a weight of 600, and the span text inside the div is one step lighter than its parent. This creates a clear visual hierarchy.

Using Variable Fonts

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Variable Fonts Example</title>
  <style>
    @font-face {
      font-family: 'VariableFont';
      src: url('path/to/variable-font.woff2') format('woff2');
      font-weight: 100 900; /* Supported range */
    }

    body {
      font-family: 'VariableFont', sans-serif;
      font-weight: 350; /* A value within the supported range */
    }

    h1 {
      font-family: 'VariableFont', sans-serif;
      font-weight: 750; /* A value within the supported range */
    }
  </style>
</head>
<body>
  <h1>Variable Fonts Example</h1>
  <p>This text is using a variable font with a weight of 350.</p>
</body>
</html>

CSS

/* Load the variable font */
@font-face {
  font-family: 'VariableFont';
  src: url('path/to/variable-font.woff2') format('woff2');
  font-weight: 100 900; /* Supported range */
}

/* Set body text to a weight of 350 */
body {
  font-family: 'VariableFont', sans-serif;
  font-weight: 350; /* A value within the supported range */
}

/* Set heading text to a weight of 750 */
h1 {
  font-family: 'VariableFont', sans-serif;
  font-weight: 750; /* A value within the supported range */
}

Result

In this example, a variable font is loaded and specific weights are set for the body and heading text. The body text is set to a weight of 350, and the heading text is set to a weight of 750, showcasing the flexibility of variable fonts.

Specifications

The font-weight property is defined in the CSS Fonts Module Level 4 specification. It ensures consistency and standardization across browsers and devices. For more information, refer to the official CSS Fonts Module Level 4 specification:

• CSS Fonts Module Level 4 - W3C

Browser Compatibility

The font-weight property is widely supported across all major web browsers:

• Google Chrome: Full support since version 2.0.
• Mozilla Firefox: Full support since version 1.0.
• Internet Explorer: Full support since version 4.0.
• Microsoft Edge: Full support since version 12.0.
• Safari: Full support since version 1.3.
• Opera: Full support since version 3.5.

Using the font-weight Property Effectively

• Test Across Browsers: Ensure consistency by testing across different browsers and devices.
• Fallback Mechanism: Be aware that if a specific weight is not available, the browser will use the closest available weight.
• Accessibility Considerations: Avoid using very light font weights (e.g., 100 or 200) for important text to enhance accessibility.

Conclusion

The font-weight property is a reliable tool for enhancing typography and user experience. By understanding its specifications and compatibility, you can effectively use it to create visually distinctive and accessible web content.

For further learning and detailed information on browser compatibility, refer to:

• Can I use… Support tables for HTML5, CSS3, etc.
• MDN Web Docs - CSS font-weight

By staying updated on the latest browser compatibility information and best practices, you can make sure your use of the font-weight property is effective, consistent, and accessible.

See Also

If you’re interested in learning more about CSS properties related to text styling, you might find these resources helpful:

• font-family: This property lets you specify the font family for text, enhancing the visual appeal and readability of your web content.
• font-style: This property allows you to set the style of the font, such as italic or oblique, giving you more options for text styling.
• Fundamental text and font styling: This comprehensive guide covers the basics of text and font styling in CSS, offering insights and techniques for enhancing your web design.
• CSS fonts: This module provides detailed information on CSS font properties, including how to load and use custom fonts.

Exploring these resources will give you a deeper understanding of CSS text and font styling, helping you create more visually appealing and accessible web content.