Tools
Font Weight Tester
The weight tester shows all available weights of a font in a stacked specimen. Pick a font, type your text, and read the rows top to bottom to pick the exact weight for your heading and body without leaving the page.
How Font Weight Works
The CSS font-weight property accepts numbers from 100 to 900. Lower numbers are lighter, higher numbers are heavier. The CSS specification assigns a name to each step. Most fonts ship only a few of the nine steps, so the available weights vary by family.
The four weights you will use most often are 400 (Regular) for body text, 500 (Medium) for emphasis that is quieter than bold, 600 (Semi Bold) for subheadings, and 700 (Bold) for strong emphasis. Weights 100, 200, and 300 read as display and large-text weights, and 800 and 900 are usually reserved for posters and headlines.
Variable fonts change the picture. A static font ships one file per weight, and the browser can only use the weights the foundry cut. A variable font ships one file with a continuous wght axis, so any value between 100 and 900 is valid, including 450 or 650. That means you can tune the weight to the size and the layout, not just to the nearest named step. The MDN reference for font-weight documents the numeric scale, the named mappings, and the variable-font behavior.
The Nine Named Weight Steps
The table below pairs each numeric step with its CSS name and its alternate foundry name. The alternate names appear in some font catalogs but map to the same number.
| Number | CSS name | Alternate name |
|---|---|---|
| 100 | Thin | Hairline |
| 200 | Extra Light | Ultra Light |
| 300 | Light | - |
| 400 | Regular | Normal |
| 500 | Medium | - |
| 600 | Semi Bold | Demi Bold |
| 700 | Bold | - |
| 800 | Extra Bold | Ultra Bold |
| 900 | Black | Heavy |
Related Tools
The weight tester connects to four other tools. The variable font tester drags every axis a font exposes, not just weight. The font browser lists all 38 families in the library. The playground puts any weight into a real layout. The type scale calculator shows how a weight reads at every size.