Faux-bold and faux-italic change how text can be read
Aliases: faux-bold · faux-italic · synthetic bold · synthetic oblique
What it is
When style asks for font-weight: 700 or italic but only Regular is installed, the rasteriser fakes bold and italic by stroking thicker and shearing the outline. font-synthesis is on by default. Faux-bold fattens strokes, shrinks counters, and muddies contrast; faux-italic skews an upright skeleton, which packs CJK and kana especially tightly. This is not a FOIT/FOUT wait, and not reflow from two real faces with different metrics — under the same metrics, readability is altered by a synthesised glyph.
Why it happens
TrueType / OpenType bold and italic are separately drawn outlines: bold adds designed contrast and counters; italic is an italic skeleton or a dedicated oblique. Synthesis has none of those outlines, so it expands Regular outward (faux-bold) or applies a geometric shear (faux-italic / oblique). Expansion thickens thin and thick strokes together, so letters that depend on contrast (l / I / 1, 一 / 二, radicals) clot. Shear slants verticals while almost leaving horizontal metrics alone, crushing the CJK square into a parallelogram so neighbouring strokes touch. After hinting and antialiasing, faux-bold at small sizes becomes a blot.
font-synthesis: none (or turning off weight / style separately) keeps Regular's clear outline when a face is missing, at the cost of looking not-bold. A variable font that interpolates 700 from the same file is not synthesis: those are in-between real outlines, usually more readable than expansion. If the whole family is missing, the path is FOIT/FOUT, not synthesis.
Where it stops holding
A slight oblique on a large sans-serif poster can be acceptable; body, forms, and CJK UI almost never are. User-agent styles map <b> <strong> <em> <i> to 700 / italic, so synthesis can fire without the author writing a weight — with synthesis off, those tags look "not bold" unless a real 700 file exists or the mapping changes. Icon and symbol fonts distort under synthesis; turn it off for them. Print resolution makes faux-bold less muddy; that does not transfer to screens. A variable font whose axis only runs 100–400 may still synthesise a requested 700 — "variable" is not automatic safety.
Applying it
- Ship files or variable-axis ranges for the weights and italics you actually use. Do not expect 600/700 on body, nav, or buttons to come from synthesis.
- Set
font-synthesis: noneon the brand family, or at least disable style synthesis for CJK. When emphasis is needed, use colour, size, or a real weight. - Check the user-agent mapping of
strong/em; if the face is missing, load it or do not write emphasis that depends on synthesis. - How to check: keep only Regular, force a page that asks for
font-weight: 700anditalic, and pair the synthesised result with real 700 / real italic. At small body sizes, try to distinguish confusable glyphs (Il1, radicals). If synthesis is clearly muddier or CJK skeletons distort, missing faces must not ship.