Font Weight Tester

What this tool is used for

• Seeing which weights a font family actually ships before designing with them.
• Checking whether a weight you specified is real or synthesised.
• Comparing headings at two weights side by side with your own copy.
• Checking a weight's legibility at the size it will be used.
• Choosing a body and heading pairing from one family.

Frequently Asked Questions

What do the numeric weights mean?

100-900 in hundreds: 400 is normal, 700 is bold, 300 light, 900 black. The names and numbers are interchangeable in CSS, but only weights the font actually ships are real — the rest are synthesised or snapped.

What is faux bold?

When a font has no bold weight, the browser SYNTHESISES one by smearing the strokes. It looks crude and distorts letterforms, and is the usual reason a heading looks subtly wrong — the fix is loading the real weight.

How do variable fonts change this?

They carry a continuous weight axis, so font-weight: 437 is genuinely rendered rather than rounded. One variable file often replaces six static ones and is smaller in total — a real performance win as well as a design one.

Why does the same weight look different across fonts?

Because weight numbers are not standardised against any absolute measure. One family's 400 can be visibly heavier than another's 500, which is why swapping a font family usually requires re-tuning every weight.

How many weights should I load?

As few as the design needs — typically regular and one bold. Each weight is a separate file and separate request, so loading all nine is one of the commonest causes of slow font rendering.

Why does bold text sometimes look thinner after a font loads?

Because the fallback was being faux-bolded while the real font downloaded. Once the genuine bold arrives it replaces a synthetically thickened system face, and the correct weight can look lighter than the fake one it replaced.

Does font-weight affect line height or spacing?

Not directly — weight does not change the metrics a font declares. Heavier weights are usually slightly wider per glyph, so a line can rewrap, but the leading itself comes from `line-height` and stays put.

Common errors and gotchas

• Specifying a weight the family does not have, which the browser fakes and renders badly.
• Judging weight on a large sample when it will be used at body size.
• Assuming numeric weights map identically across families, which they do not.
• Loading every weight and paying the download cost for ones you never use.
• Testing on one platform, where font smoothing differs enough to change the apparent weight.