What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The CSS font-weight property controls how thick or thin text appears, shaping both visual hierarchy and readability. It is commonly used to emphasize headings, labels, buttons, and key phrases, but its final appearance depends on the font family, available font files, and browser font-matching behavior.
Weights can be set with keywords such as normal and bold, relative values like lighter and bolder, or numeric values from 100 to 900. Modern variable fonts can support much finer weight ranges, giving designers more control while also raising practical questions about performance, accessibility, and consistent rendering across browsers.
What font-weight Does in CSS
The CSS font-weight property controls how thick or heavy text appears. It is most commonly used to switch text between regular and bold styles, but it can describe a wider range of weights, from very thin to very heavy. For example, body copy often uses a regular weight, headings may use a semibold or bold weight, and small labels might use a medium weight to stay legible without becoming visually dominant.
At a basic level, font-weight selects a font face from the font family being used. A typeface such as Inter, Roboto, or Georgia may include several separate faces: regular, italic, bold, bold italic, light, semibold, black, and so on. When you write font-weight: 700;, the browser tries to use a face in that family that corresponds to weight 700. If that exact face is installed or loaded through @font-face, the browser uses it. If not, the browser chooses the closest available weight according to CSS font matching rules.
#1 Best Overall
The property applies to text-bearing elements and is inherited by default. That means setting font-weight on a parent element, such as a section or article, affects child text unless a child element sets its own value. This inheritance makes it easy to define a general text style and then override specific elements like headings, navigation links, buttons, or emphasized phrases.
Common ways to use font-weight
- Body text: Usually
400ornormal, depending on the font and design system. - Headings: Often
600,700, orboldfor stronger hierarchy. - Buttons and labels: Frequently
500or600to improve scannability. - Emphasis: The
<strong>element typically renders with a heavier weight than surrounding text.
font-weight does not simply “draw thicker letters” in every case. With traditional static fonts, it selects among available font files. If only one regular file is available, the browser may synthesize a bold style by artificially thickening the outlines. This can work acceptably for simple interfaces, but synthetic bold may look less refined than a real bold face designed by the type foundry. With variable fonts, the browser can often use a continuous weight axis, allowing values such as 450 or 575 when the font supports them.
Because font weight affects readability, hierarchy, and loading behavior, it should be chosen deliberately. Heavier text can improve contrast and make headings easier to scan, but excessive bold text reduces emphasis because everything competes for attention. Very light weights can look elegant at large sizes but may become difficult to read in small text, on low-quality displays, or for users with reduced vision. In practice, a restrained scale such as 400 for body text, 500 or 600 for UI emphasis, and 700 for strong headings is often easier to maintain than loading many separate weights.
Keyword Values: normal, bold, lighter, and bolder
The font-weight property accepts four keyword values: normal, bold, lighter, and bolder. These keywords are convenient when you want to express intent rather than choose an exact numeric weight. In practice, normal maps to a weight of 400, while bold maps to 700. These two values are the most predictable and are commonly used for body text, headings, buttons, labels, navigation items, and emphasized interface text.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →normal is the default weight for most text. If you do not set font-weight, browsers usually render text as though font-weight: normal; were applied. bold requests a heavier face and is also the value typically applied by the browser’s default stylesheet to elements such as <strong> and <b>. The semantic difference still matters: <strong> indicates importance, while font-weight: bold; only changes presentation.
The relative keywords lighter and bolder behave differently. Instead of mapping directly to one fixed weight, they calculate a weight relative to the inherited weight of the parent element. For example, if a parent element has a normal weight, bolder will generally move the child text to a heavier available weight, often equivalent to 700. If the parent is already bold, lighter may move the child back toward a regular weight. The result depends on the inherited weight and on the font faces available to the browser.
| Keyword | Common numeric equivalent | Typical use |
|---|---|---|
normal |
400 |
Default body copy and regular UI text |
bold |
700 |
Headings, strong emphasis, active navigation, prominent labels |
lighter |
Relative to inherited weight | Reducing emphasis inside heavier text |
bolder |
Relative to inherited weight | Increasing emphasis inside surrounding text |
Because lighter and bolder are relative, they can be less predictable in large design systems, component libraries, or nested layouts. A component using font-weight: bolder; may look different depending on where it is placed, because it inherits from its container. This can be useful for document-style content where emphasis should follow surrounding text, but it is less ideal for reusable UI components that need consistent rendering across pages.
Rank #2
For predictable styling, prefer normal and bold when those two weights are enough, or use numeric values when your type scale includes several weights such as 300, 500, 600, and 800. Reserve lighter and bolder for cases where relative emphasis is intentional. Also remember that the browser can only use weights provided by the font or synthesize an approximation, so bold does not always mean a true bold font file is being used.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Numeric Font Weights from 100 to 900
The font-weight property also accepts numeric values, giving you more precise control than keywords such as normal and bold. In traditional CSS usage, these values are written as mulles of 100, from 100 through 900. The lower the number, the lighter the intended stroke weight; the higher the number, the heavier the text should appear. For example, 400 corresponds to the regular weight, while 700 corresponds to bold.
These numeric values do not create weight variations by themselves. They request a particular font face from the font family being used. If a typeface includes a file for 300, the browser can use that light face when font-weight: 300; is declared. If the typeface only includes regular and bold files, the browser must choose the closest available match or synthesize a weight, depending on the font and browser behavior.
| Value | Common Name | Typical Use |
|---|---|---|
100 |
Thin | Large display text, delicate headings |
200 |
Extra Light | Light display typography |
300 |
Light | Large headings, refined interfaces |
400 |
Regular | Default body text |
500 |
Medium | Labels, navigation, subtle emphasis |
600 |
Semi Bold | Subheadings, buttons, UI emphasis |
700 |
Bold | Strong emphasis, headings |
800 |
Extra Bold | Prominent headings, banners |
900 |
Black | High-impact display text |
Although the numeric scale looks evenly spaced, visual differences are not always uniform. A jump from 400 to 500 may be subtle in one font and very noticeable in another. Font designers decide how each weight looks, so 600 in one family may appear close to 700 in a different family. This is especially relevant when mixing system fonts with custom web fonts, because the same numeric value can produce different visual density across platforms.
In practice, use numeric weights when your design system needs more than the basic regular-and-bold distinction. Body text is commonly set at 400, supporting text may use 300 or 500, and headings often range from 600 to 800. Very light weights such as 100 and 200 can become hard to read at small sizes or on low-contrast displays, while very heavy weights such as 900 can reduce legibility in dense paragraphs. Numeric values are most effective when they match actual font files or a variable font axis available in the chosen typeface.
How Browsers Match Unavailable Font Weights
When you set font-weight, the browser does not always have an exact font face available. A declaration such as font-weight: 500 only requests that weight; it does not guarantee that the loaded font family includes a true Medium face. If the font family contains only Regular 400 and Bold 700, the browser must choose the closest available match or synthesize a weight if synthetic styling is allowed.
For common static fonts, matching happens against the faces declared through the system font or through @font-face. If a family provides 400, 700, and 900, then a request for 800 will usually use the closest heavier or lighter available face according to CSS font matching rules. The result can vary slightly depending on which weights exist, whether the font is locally installed or web-loaded, and whether the browser decides to fake a bolder or lighter appearance.
Typical matching behavior
- Exact match: If the requested weight exists, the browser uses it, such as
font-weight: 600with a real SemiBold face. - Nearby static face: If the exact face is missing, the browser selects a nearby available weight from the same family.
- Synthetic bolding: If a bold face is unavailable, the browser may artificially thicken glyph strokes to approximate a heavier weight.
- Fallback font: If the requested family cannot render a character, a fallback font is used, and its own weight availability affects the final appearance.
The matching rules are especially visible when authors declare many numeric weights but load only one or two files. For example, if only a 400-weight web font is loaded, headings set to font-weight: 700 may appear as browser-synthesized bold rather than a real Bold face. Synthetic bold can look acceptable in some fonts, but it often produces uneven spacing, heavier counters, and less polished text than a properly designed bold font.
| Requested weight | Available faces | Likely result |
|---|---|---|
500 |
400, 700 |
Browser chooses the nearest suitable face, commonly 400 or 700 depending on matching rules and context. |
700 |
400 |
Regular face may be synthetically emboldened. |
300 |
400, 700 |
Regular 400 is typically used because no lighter face exists. |
800 |
400, 700, 900 |
A nearby heavy face, often 900 or 700, is selected. |
To control this behavior, define font faces accurately. In @font-face, the font-weight descriptor tells the browser which weight a file represents. If the same file is incorrectly declared as mulle weights, the browser may reuse it in places where a distinct face was expected. For static fonts, load only the weights you need, but make sure those weights match your design system: typically 400 for body text, 600 or 700 for emphasis and headings, and perhaps 300 or 500 only when they have a clear role.
You can also reduce unwanted synthetic styling with font-synthesis. For example, font-synthesis: none prevents the browser from faking bold or italic styles, which can preserve typographic consistency. Use it carefully: if a real bold face is missing and synthesis is disabled, emphasized text may not appear sufficiently distinct. Testing across browsers and operating systems remains useful because installed fonts, fallback chains, and rendering engines can all affect the final weight seen by users.
Using `font-weight` with Variable Fonts
Variable fonts change how font-weight works in practice. With traditional font families, each weight is usually a separate font file, such as Regular 400, Semibold 600, and Bold 700. A variable font can store a continuous range of weights inside one file, allowing the browser to render values like 425, 538, or 760 if the font’s weight axis supports them. This makes font-weight more flexible than the classic 100-to-900 step model, while still using the same CSS property.
A variable font exposes variation axes, and the weight axis is identified internally as wght. When you write font-weight: 650;, the browser maps that value to the font’s wght axis, provided the font includes that axis and the requested value is within its supported range. For example, a variable font may support weights from 300 to 800. In that case, font-weight: 500; and font-weight: 725; can be rendered directly, while font-weight: 100; or font-weight: 900; must be clamped or matched to the nearest available weight.
Declaring a variable font range
When loading a variable font with @font-face, the font-weight descriptor should declare the supported range rather than a single value. This tells the browser that one font resource can satisfy many weight requests. A typical declaration uses a range such as font-weight: 300 800;, paired with a variable font file in a format such as WOFF2. After that, regular CSS rules can use any value inside the range: headings might use font-weight: 720;, body text might use font-weight: 400;, and UI labels might use font-weight: 560;.
Recommended Free Tools
- Use the real supported range: declare the range provided by the font, not a guessed 100 to 900 range.
- Prefer
font-weightfor weight changes: usefont-variation-settingsonly when you need lower-level control or access to custom axes. - Test intermediate values: not every visual design benefits from fine-grained weights, even when the font technically supports them.
For most projects, font-weight is the best interface for controlling the wght axis because it works with normal cascade behavior, inherited text styles, media queries, and browser font matching. The lower-level font-variation-settings property can also set "wght", but it is easier to misuse because it bypasses some higher-level CSS font features. If both are used, the interaction can become harder to maintain, especially across components that also set font-style, font-stretch, or optical sizing.
Rank #4
- Features 88 of The Greatest Jazz Songs
- Piano/Vocal/Guitar Songbook
- Standard Notation with Guitar Chord
- Includes Lyrics
- 344 Pages
Variable fonts can improve performance by replacing several static font files with one file, but this is not automatic. A single variable font may still be large if it includes many axes, scripts, or glyphs. Subsetting, choosing WOFF2, limiting unused styles, and preloading only critical fonts can matter more than the choice between static and variable files. For accessibility, avoid making text too light, especially at small sizes or on low-contrast backgrounds. Values below 300 may look elegant in mockups but can become difficult to read on real screens. For body text, weights around 400 are usually safest, while 500 to 700 often work well for emphasis and headings.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Best Practices for Readability and Performance
Use font-weight as a readability tool first and a visual style second. Most interfaces work well with a small, deliberate scale: regular text at 400, emphasized text at 600 or 700, and occasional light or heavy weights only for large display text. Too many weights in one layout can make hierarchy harder to scan, especially when size, color, and spacing are also competing for attention.
For body copy, avoid very thin weights such as 100, 200, or 300 unless the typeface is specifically designed to remain legible at small sizes. Thin strokes can disappear on low-quality displays, in bright environments, or for users with reduced vision. At the other end, very heavy weights such as 800 or 900 can close counters and reduce letter clarity in paragraphs. A practical default is 400 for normal reading text and 600 or 700 for headings, labels, and calls to action.
Keep the weight palette small
- Use two or three weights for most projects: for example,
400for body text,600for subheadings, and700for strong emphasis. - Match requested weights to actual font files: if only regular and bold faces are loaded, asking for
500or800may cause browser approximation or fallback matching. - Test weights at real sizes: a weight that looks elegant at
48pxmay be difficult to read at14px. - Use semantic emphasis when appropriate: pair CSS with elements such as
<strong>when the text is genuinely important, rather than using bold styling only for decoration.
Performance is closely tied to how many font resources the page loads. Each additional static weight can mean another font file, increasing download size and delaying text rendering. If a design uses 400, 500, 600, and 700, confirm that each weight is necessary. Often, 400 and 700 are enough, or 400 and 600 if the typeface has a naturally strong semibold. When using web fonts, configure only the weights you actually reference in CSS.
Variable fonts can reduce the number of separate files while allowing fine-grained weight control, but they should still be used with restraint. A single variable font file may be larger than one static file, though smaller than several static weights combined. Define a consistent set of weight values in your design system instead of assigning arbitrary values throughout the codebase. For example, tokens such as --font-weight-regular: 400, --font-weight-medium: 500, and --font-weight-bold: 700 keep typography predictable and easier to maintain.
Always check browser rendering across platforms. Font smoothing, operating system text rendering, fallback fonts, and device pixel density can all affect how heavy a weight appears. A 600 weight may look close to 700 in one browser and more like 500 in another. Test with realistic content, dark and light themes, and fallback scenarios where the custom font fails to load. The best font-weight choices are the ones that preserve clear hierarchy, maintain comfortable reading, and avoid unnecessary font downloads.
Frequently Asked Questions
What is the difference between font-weight: 700 and font-weight: bold?
In CSS, font-weight: bold maps to the numeric weight 700. They usually produce the same result, assuming the font has a 700-weight face available. Numeric values are often preferred when you want more precise control, especially when working with mulle weights or variable fonts.
Free tools Windows power users keep installed
One-click scans. No signup required.
Best Value
- 336 Pages
- Includes 96 Songs
- Softcover
- Dimensions 12 x 9.5
Why does font-weight: 600 sometimes look the same as 700 or 500?
Browsers can only use weights that are available in the font you loaded. If a 600 weight is not available, the browser chooses the closest available weight according to CSS font matching rules. This is font-weight: 600 may look identical to 700 if your font only includes regular and bold faces.
Can I use font-weight values like 450 or 575?
Yes, CSS supports any numeric font-weight value from 1 to 1000, but traditional static fonts usually expose common steps such as 400, 500, 600, and 700. Intermediate values like 450 or 575 are most useful with variable fonts that include a continuous weight axis. If the font is not variable, the browser will typically map the value to the nearest available face.
How does font-weight work with variable fonts?
Variable fonts can contain a range of weights in a single font file, such as 300 through 800. When the font supports a wght axis, CSS values like font-weight: 425 or font-weight: 750 can render as real intermediate weights instead of approximations. To get this behavior, the font must be loaded with the appropriate weight range, such as through @font-face or a font provider configuration.
What font-weight should I use for readable body text and headings?
For body text, font-weight: 400 is the standard choice, while 300 can be harder to read on low-resolution screens or in poor contrast conditions. Headings commonly use 600, 700, or 800, depending on the typeface and visual hierarchy. Avoid relying on weight alone to communicate meaning, because users with low vision or certain display settings may not perceive subtle weight differences clearly.
Bottom Line
font-weight controls how light or bold text appears, whether you use keywords like normal and bold, numeric values from 100 to 900, or finer ranges in variable fonts. The final look depends on which font faces are actually available, so browsers may synthesize or substitute weights when an exact match is missing.
For best results, choose weights intentionally: reserve heavier styles for hierarchy and emphasis, test readability across devices, and load only the font weights your design truly needs. If you are using variable fonts, take advantage of their flexibility while still checking accessibility, contrast, performance, and cross-browser rendering.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
