Write your real copy
Typography changes with word shape and length. Preview the actual text you plan to use.
Free typography tool
Font Weight Previewer Online
See exactly how thin, regular, semibold, and black feel in your own words. Compare every CSS weight, then copy the style that fits.
TYPE / 001
CSS WEIGHT500Medium
Typography has a voice.
Inter · Variable fontThe full range
Live comparison
Compare font weights side by side
Your text and font update across all nine standard CSS weight values.
From whisper to shout
01
02
03
How to use this font weight previewer
Replace the sample sentence with your own heading, button label, logo text, or paragraph. Choose a font family, then drag the weight slider from 100 to 900. The large specimen and comparison list update together, so you can judge one weight in context without losing sight of the full range.
Compare every step
Scan standard weights from Thin 100 through Regular 400 and Bold 700 to Black 900.
Copy clean CSS
Fine-tune size, spacing, line height, and color, then copy the finished style in one click.
CSS font weight explained
What do font weights 100 to 900 mean?
The CSS font-weight scale describes the visual thickness of letter strokes. A value of 400 is the normal or regular face, while 700 is the familiar bold face. Lower values feel lighter and quieter; higher values create more emphasis and density.
100 Thin200 Extra Light300 Light400 Regular500 Medium600 Semibold700 Bold800 Extra Bold900 Black
Standard weights vs. variable font weights
Traditional font families ship separate files for selected weights, often 400 and 700. Variable fonts place a continuous weight axis in one file, which can support in-between values such as 475 or 625. The fonts marked “Variable” in this online font weight tester let you explore that smooth range. A system font may map an unsupported value to its nearest available weight.
TIP
Choose weight in the final layout
A weight that looks perfect at 72px may feel too dark at 16px. Test the real size, background, and contrast, especially for long text and small interface labels.
Using font weight for a clear visual hierarchy
More weight is not automatically more readable. Use contrast between weights to guide attention: a bold heading can work with regular body text, while medium or semibold often suits buttons and short labels. Avoid using very light text at small sizes, and remember that color contrast, font size, and spacing all affect readability.
Good to know
Font weight previewer FAQs
What do font weights from 100 to 900 mean?
They describe stroke thickness. Thin is typically 100, Regular is 400, Bold is 700, and Black is 900. The exact appearance depends on the font design.
Can I preview font weights online with my own text?
Yes. Type or paste your text in the preview field, choose a font, and adjust the controls. Nothing needs to be uploaded.
What is a variable font weight?
A variable font contains a continuous weight axis, so it can render many values between the usual preset steps. Try Animate weight above to see that range move smoothly.
Why do some font weights look the same?
The selected font may not include every requested weight. In that case, the browser can use the nearest available face or synthesize a bolder look. Choose one of the variable fonts for clearer in-between differences.
Should body text use font-weight 400 or 500?
Weight 400 is the usual starting point for body copy. Weight 500 can add emphasis or improve presence in some fonts, but it may feel dense in long passages. Preview both at the real reading size.
Is this font weight previewer free?
Yes. It is free to use online with no account, download, or sign-up.
Keep shaping your type
See all tools
Try other typography tools
Turn the weight you chose into a complete visual style.