CSS font-synthesis-weight Property

The font-synthesis-weight property controls whether the user agent is permitted to create a bolder-looking font form when the specific weight requested by CSS is not available from the font face in use. When a page asks for a heavier weight (for example via font-weight) but the chosen font family lacks an appropriate bold face, this property governs whether the renderer may algorithmically embolden the available glyph outlines to approximate the requested appearance. It is a rendering-level toggle that does not change the specified weight value, only whether the UA can fabricate a heavier style to satisfy the intent.

Synthesis is typically implemented by programmatically thickening strokes or offsetting outlines to produce an apparent increase in weight. Because this is an approximation rather than a true typographic design, synthesized bold can alter metrics, hinting behavior, and visual balance — affecting line breaks, vertical rhythm, and the perceived white space around glyphs. In contrast, variable fonts or families that include multiple masters usually avoid the need for synthesis by offering legitimately designed weights through their axes; authors should prefer supplying real weight variants in the font-family when consistent rendering is important.

This property also interacts with broader font synthesis controls: it is one part of the decision the UA makes about whether to synthesize style differences at all. For example, a related shorthand controls synthesis behavior across weight and style axes, and the overall capability to synthesize can be influenced by font substitution rules and by the presence of matching faces in the loaded font set. Because synthesis produces an artificial result, authors who need precise typographic outcomes — branding, iconography, or fine-grained UI typography — should not rely on synthesis as a substitute for explicitly providing the necessary font faces.

In practice, use this property as a safety net rather than a primary design tool: allowing synthesis can improve robustness when third-party fonts are missing weights, helping maintain emphasis and hierarchy, while disabling it can preserve designer intent where exact weight rendering matters. Test important text at the platforms and rendering engines your audience uses, since synthesis algorithms and the visual results vary between implementations. If consistency and legibility are critical, include proper weight variants (or variable fonts) in your font resources rather than depending on algorithmic synthesis.