Font Weight

What is Font Weight in CSS?

The font-weight CSS property sets the weight (or boldness) of the font. The available weights depend on the font-family that is currently set. This property is critical for establishing visual hierarchy in your designs, guiding users through content by distinguishing headings from body text and emphasizing key information.

Font weight directly affects readability and accessibility. Proper weight selection ensures text remains legible across different screens and viewing conditions, making it an essential consideration in web development projects. Combined with other CSS layout techniques, proper typography creates cohesive and effective user experiences.

How Font Weight Works

When you specify a font-weight value, the browser maps that numeric value to the available weights in your loaded font files. If the exact weight you request is not available, the browser applies a fallback algorithm to find the closest available weight. This means your design may render slightly differently depending on which font weights are actually loaded.

Variable fonts have changed this dynamic by allowing continuous weight values within a defined range, eliminating the need for separate font files for each weight variant.

Font Weight Values and Syntax

The font-weight property accepts several types of values as defined in the CSS Fonts specification. Understanding these options helps you choose the right approach for your typography needs:

• Keyword values: normal and bold provide simple, semantic choices
• Numeric values: Range from 1 to 1000, with higher numbers indicating bolder appearance
• Relative values: lighter and bolder adjust weight relative to the parent element
• Global values: inherit, initial, revert, and unset follow standard CSS inheritance patterns

Keyword Values

The keyword normal is equivalent to the numeric value 400, while bold equals 700. These keywords offer a straightforward way to apply common weights without memorizing numbers. Use keywords when you need basic styling, or numeric values when you want more precise control and consistency across your CSS layouts.

Numeric Weight Values

The numeric scale ranges from 1 to 1000, with both endpoints included. Higher numbers produce bolder appearances. While CSS Fonts Level 4 allows any value in this range, the traditional scale uses 100-increment values from 100 to 900. Variable fonts support any value within their defined range, enabling fine-grained control like 350 or 550 for precise typography.

Relative Weight Values

The lighter and bolder keywords calculate weight relative to the parent element's font-weight. However, these calculations only consider four weight values: 100, 400, 700, and 900. This means using bolder on a parent with weight 400 results in 700, not 500. Similarly, lighter on weight 700 produces 400, not 600. These relative values are useful for creating contextual emphasis within nested elements without specifying exact numeric weights.

Fallback Weight Algorithm

When the exact requested weight is unavailable in a font, browsers apply a fallback algorithm to select the closest available weight:

• Target 400-500: Browser searches ascending to 500 first, then descending below the target, and finally above 500
• Target below 400: Browser searches descending first, then ascending if no match found
• Target above 500: Browser searches ascending first, then descending if no match found

Practical Implications

The fallback algorithm means your design may render differently across systems where different font weights are available. This is why testing with your actual font files is essential before deployment. Consider your font loading strategy carefully--if a weight fails to load, the fallback could significantly change your design's appearance.

For consistent results across platforms, consider using variable fonts that include the complete weight range, or ensure all required static font weights are properly loaded.

Variable Fonts and Font Weight

Variable fonts represent a significant advancement in web typography, containing multiple weights within a single file. The wght axis defines the weight range, and any value between the minimum and maximum is valid.

This approach offers substantial performance benefits. Instead of loading separate files for light, regular, bold, and extra-bold weights, a single variable font file can provide the entire spectrum. This reduces HTTP requests and often results in smaller total download sizes compared to multiple static font files. This optimization is part of a broader web performance strategy that improves both user experience and SEO rankings.

Using font-variation-settings

For fine-grained control over variable font axes, you can use the font-variation-settings property. The axis name wght is case-sensitive and must be lowercase. While font-variation-settings provides access to all axes including custom ones, the standard font-weight property is preferred when you only need weight control:

• Use font-weight for standard weight adjustments--it integrates with CSS inheritance and relative values
• Use font-variation-settings for custom axes not covered by CSS properties, or when setting multiple axes simultaneously

Font Weight and Web Performance

Font loading directly impacts Core Web Vitals metrics that affect both user experience and search rankings. Each font file must download before text renders in its intended style, affecting First Contentful Paint (FCP) and Largest Contentful Paint (LCP). Additionally, late-loading fonts can cause layout shifts when text reflows, hurting Cumulative Layout Shift (CLS) scores. Understanding these performance metrics helps prioritize optimizations.

The more font weights you use, the more files the browser must download. Each additional weight adds latency and increases the chance of font-related layout shifts during page load.

Optimization Strategies

To minimize performance impact while maintaining typographic quality:

• Use WOFF2 format for best compression--it typically reduces file sizes significantly compared to WOFF or TTF
• Subset your fonts to remove unused glyphs, especially important for fonts with large character sets
• Consider variable fonts when using multiple weights--a single file often beats multiple static fonts
• Apply font-display appropriately to control rendering behavior during font loading
• Preconnect to font origins when using third-party fonts like Google Fonts to reduce connection latency

Pairing these techniques with image optimization strategies creates a fast, responsive website that ranks well in search results.

Accessibility Considerations

Font weight significantly affects readability for users with visual impairments. Very light weights (100-200) can be particularly difficult to read, especially on low-contrast displays or for users with low vision.

Contrast becomes especially important with thin font weights. Even if your color contrast ratio meets WCAG standards, extremely light text may appear to fade into the background on certain screens. Always test your typography across multiple devices and lighting conditions.

Readability Guidelines

For optimal readability across diverse users and viewing conditions:

• Body text: Use weights between 400-500 for main content--these provide good legibility at typical reading sizes
• Headings: Weights of 600-700 create effective visual hierarchy without sacrificing readability
• Avoid thin weights for body text: Reserve weights below 300 for decorative elements or large display text where legibility is less critical
• Consider font-size relationships: Smaller text often benefits from slightly bolder weights to maintain legibility

Browser Support

The font-weight property has been widely supported across all major browsers since July 2015. Basic keyword and numeric values (100-900) work reliably across virtually all browsers in use today.

For the extended 1-1000 numeric range introduced in CSS Fonts Level 4, support is available in all modern browsers. Variable fonts, which enable continuous weight values, also enjoy broad support in current browser versions including Chrome, Firefox, Safari, and Edge.

When supporting older browsers, include static font files as fallbacks alongside variable fonts. The browser will use whichever format it supports, ensuring your typography remains functional across your audience.

Practical Examples

These real-world examples demonstrate common typography patterns using font-weight. Apply these patterns to create clear visual hierarchy and improve readability in your web design projects. For comprehensive guidance on creating user-friendly interfaces, explore our web design resources.

Common Issues and Solutions

When font-weight changes do not appear to take effect, troubleshoot with these common causes:

Font file does not include requested weight: Verify that your loaded font files contain the weight you are specifying. If you request weight 600 but only load Regular (400) and Bold (700), the browser applies its fallback algorithm and may render a different weight than expected.

Font is not loading correctly: Check your browser's developer tools Network panel to confirm font files are downloading successfully. Failed font loads mean the browser falls back to system fonts.

Font-family is not applied: Ensure your element actually inherits or directly applies the correct font-family. Font-weight only affects fonts that support that weight.

Inconsistent rendering across browsers: Different operating systems render fonts differently. macOS typically renders fonts slightly heavier than Windows. Additionally, if the exact weight is unavailable, synthetic bolding may produce different results across browsers--always prefer loading actual bold font files over browser-generated synthetic bold.

Sources

1. MDN Web Docs: font-weight
2. web.dev: Font Best Practices
3. MDN Web Docs: Variable Fonts Guide
4. OpenType Specification: usWeightClass