CSS `font-weight`: Controlling Text Boldness and Thickness

Learn how to use the CSS `font-weight` property to adjust the thickness and boldness of text in your web designs. This tutorial covers various `font-weight` values (e.g., `normal`, `bold`, `lighter`, numbers 100-900), providing techniques for enhancing readability and visual appeal.

Understanding the CSS `font-weight` Property

The CSS font-weight property lets you control the thickness or boldness of text on your webpage. It's a key tool for improving the visual appeal and readability of your content.

Purpose of `font-weight`

The main job of font-weight is to adjust how thick or thin text characters appear. It offers several values, giving you precise control over boldness. The available options depend on the font family your browser uses. Different fonts have different weight options available.

Note: font-weight is often used with other CSS properties like font-size, font-family, and font-style to create a consistent and professional look for your website text.

Syntax and Property Values

The syntax is simple:

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

Property Values Explained:

• normal: The default weight (usually 400).
• lighter: Makes the font slightly lighter than its parent element.
• bolder: Makes the font slightly bolder than its parent element.
• bold: A heavier weight (usually 700).
• number: Sets a specific weight using a numeric value between 1 and 1000 (e.g., font-weight: 600;).
• inherit: Inherits the font weight from its parent element.
• initial: Resets the property to its default value.
• unset: Resets to the default, considering inheritance.

How to Use `font-weight` in CSS

1. Applying `font-weight` to Elements

You can apply font-weight directly to HTML elements to change the text's boldness.

Example 1: Paragraphs

p {
  font-weight: normal; /* Normal weight for all paragraphs */
}

Example 2: Headings

h1, h2, h3 {
  font-weight: bold; /* Bold weight for h1, h2, and h3 */
}

Example 3: Specific Classes

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

Example 4: Combining with Other Properties

h4 {
  font-weight: 500;
  font-size: 24px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

2. Setting Global `font-weight`

You can set a default font weight for your entire page or a section using the body selector.

Example 1: Global Font Weight

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

Example 2: Global and Specific Weights

body {
  font-weight: 400;
}
h1 {
  font-weight: 700;
}
p {
  font-weight: 300;
}

3. Combining with Other Properties

font-weight works well with other text properties for refined styling.

Example 1: With font-family

p {
  font-weight: 300;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

Example 2: With font-size

h2 {
  font-weight: 600;
  font-size: 28px;
}

Example 3: With line-height

blockquote {
  font-weight: bold;
  line-height: 1.5;
}

Example 4: With text-decoration

a {
  font-weight: 500;
  text-decoration: underline;
}

Best Practices and Accessibility

For accessibility:

• Readability and Contrast: Ensure sufficient contrast between text and background.
• Avoid Overuse of Bold: Use bold text sparingly for emphasis to avoid overwhelming readers.

Best Practices for Using CSS `font-weight`

Using font-weight effectively involves more than just making text bold. Here's a guide to best practices for readability, accessibility, and responsiveness.

Semantic Meaning

Use font-weight to convey meaning. For example, headings should be bolder than body text to clearly show their importance in the page structure.

Responsive Design

Consider how font weight looks on different screen sizes. Text readable on a large screen might be hard to read on a small phone. Adjust your styles accordingly.

User Preferences

Respect user preferences! Your website should adapt to any font weight settings specified by the user's operating system or browser.

Screen Reader Compatibility

Test your site with screen readers. Screen readers often announce bold text differently, so ensure the emphasis is communicated effectively for visually impaired users.

Font Pairing

Choose font pairings carefully. Some font combinations may clash or create distracting visual patterns, impacting readability.

WCAG Guidelines

Familiarize yourself with the Web Content Accessibility Guidelines (WCAG). These guidelines provide comprehensive advice on creating accessible websites for all users, including those with disabilities.

Examples of `font-weight` Property Values

Here are examples demonstrating different font-weight values: