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>

The font-weight CSS property controls how thick or bold a font appears, contributing to the visual hierarchy of text.

The syntax for setting font-weight value can use either keyword values (bold, normal) or numerical values (100 to 900).

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; }

Font weight plays a critical role in accessibility, ensuring that text remains readable for users with visual impairments.

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; }

Headings use a bold font to stand out and improve readability.

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 */
}

When choosing fonts, ensure that sans-serif fonts like Helvetica or Arial support the full weight range.

body {
  font-family: "Helvetica", sans-serif;
}

Some fonts support extra light (200), which is lighter than the normal weight (400).

p {
  font-weight: 200; /* Extra light */
}

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 */
}

In some fonts, you can specify weights like extra bold (800), which is heavier than standard bold but lighter than black (900).

h1 {
  font-weight: 800; /* Extra bold */
}

Combining italics with bold text can enhance emphasis, but excessive styling may reduce readability.

p {
  font-weight: 700; /* Bold */
  font-style: italic;
}

Some fonts support semi bold (600), which is heavier than normal but lighter than bold (700).

h2 {
  font-weight: 600; /* Semi bold */
}

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 */
}

Loading font weights efficiently requires optimizing your stylesheet to include only necessary font files.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

When designing layouts with flexbox, font weight can be adjusted dynamically for different flex items.

.flex-container {
  display: flex;
  justify-content: space-between;
}

.flex-item {
  font-weight: 600; /* Semi bold */
}

Different browsers, such as Chrome, Firefox, and Safari, may render font weights slightly differently, so testing across platforms is essential.

On iOS, font weights may render differently than on Windows or Android, affecting consistency.

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); }

You can combine font-weight with the font-style property to apply both bold and italics to elements dynamically."

:root {
  --font-weight-bold: 700;
  --font-style-italic: italic;
}

p {
  font-weight: var(--font-weight-bold);
  font-style: var(--font-style-italic);
}

Optimizing typography is crucial in front-end development, where text hierarchy improves usability.