CSS font-weight: The Font Weight Property

The CSS font-weight property specifies the weight or boldness of the font for HTML elements. By adjusting font-weight, you can emphasize text, improve readability, and create visual hierarchies.

How to Use font-weight in CSS

The font-weight property accepts keywords and numbers as values. The keyword values in CSS include bold and normal. Numeric values range from 100 to 900 in increments of hundreds, with 400 being normal and 700 being bold.

/* Keyword values */
p { font-weight: normal; }
strong { font-weight: bold; }

/* Numeric weight values */
h1 { font-weight: 600; }
span { font-weight: 300; }

<p>This is a paragraph with normal font weight.</p>
<strong>This text is bold.</strong>
<h1>This is a heading with a font weight of 600.</h1>
<span style="font-weight: 300;">This text is lighter than normal.</span>

When to Use font-weight in CSS

Bold Text in CSS

In CSS, bolding text needs the font-weight property. For example, you can adjust the font weight to make headings or important text stand out.

h2 { font-weight: bold; }

Design Consistency

You can set font-weight of the body element to maintain a consistent theme in typography across your web page.

body { font-weight: 400; }

Readability

You can improve readability for visually impaired users by enhancing text weight.

.accessible-text { font-weight: 800; }

Visual Hierarchy

Also, you can use numeric values to establish a clear hierarchy between different levels of headings and other text elements.

h1 { font-weight: 700; }
h2 { font-weight: 600; }
h3 { font-weight: 500; }

Examples of Using font-weight in CSS

Standard Paragraph

Web pages usually apply normal weight to regular text maintains readability.

p { font-weight: normal; }

Important Notices

Web pages increase weight for alerts or important notices to draw attention.

.notice { font-weight: bold; background-color: yellow; }

Subtle Emphasis

An e-commerce website might use lighter weights for less emphasis on captions or secondary product information.

.caption { font-weight: 300; }

Bold Headings

Bold headings emphasize the most important information and create visual hierarchy.

h1 { font-weight: 700; }
h2 { font-weight: 600; }

Learn More About font-weight in CSS

Weight Mapping

Not all fonts support the full range of numeric weight values. Before settling on a font, make sure it supports the weight levels you want. If a font doesn't support a particular weight, the browser will select the closest available weight.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.woff2') format('woff2');
  font-weight: 400; /* Defines only normal weight */
}

Bold vs. Bolder

Understanding the difference between bold and bolder is crucial. bold is absolute and usually corresponds to a value of 700. bolder, however, is relative to the weight of the parent element.

/* Bolder relative to parent weight */
.parent {
  font-weight: 400;
}
.child {
  font-weight: bolder; /* Results in 700 */
}

/* Absolute bold value */
h2 {
  font-weight: bold; /* Equals 700 */
}

Font Weight and Performance

Using many different font weights can affect page load times since the browser needs to load every font weight. To optimize performance, you can import only font weights you actually plan to use on a web page.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.woff2') format('woff2');
  font-weight: 400; /* Defines only normal weight */
}

CSS Variables for Font Weights

Defining font weights using CSS variables simplifies theming and adjustments across a large website.

:root {
  --font-weight-normal: 400;
  --font-weight-bold: 700;
}

p { font-weight: var(--font-weight-normal); }
strong { font-weight: var(--font-weight-bold); }