Font Weight Calculator
Find the optimal font weight for your design context
Select Context
Recommended
Select Weight
Preview
The quick brown fox jumps over the lazy dog.
400 (Regular) provides optimal readability for extended reading. Lighter weights may be hard to read, while heavier weights can cause visual fatigue.
CSS Output
.body {
font-weight: 400; /* Regular */
}Weight Comparison
Developer & Verifier
Developed by
Marcus Rodriguez
Lead Developer
Verified by
Sarah Mitchell
Product Designer, Font Specialist
What is Font Weight Calculation?
Font weight calculation maps CSS numeric values (100–900) to named weight classifications and determines the optimal weight distribution for a type system across headings, body text, and UI elements. CSS font-weight uses a numeric scale from 100 (Thin) to 900 (Black), with 400 as Normal and 700 as Bold.
Variable fonts support continuous weight values between any two masters — a single file interpolates every weight from 100 to 900. Approximately 40% of websites use at least one variable font (HTTP Archive 2025), up from near-zero adoption 5 years ago. Variable font performance improves when using 4 or more weight variations from a single file instead of separate static font files.
Static fonts require separate files per weight: a family with Regular, Medium, SemiBold, Bold, and Black needs 5 font files versus 1 variable font file. Each additional static file adds an HTTP request and increases total download size — the median WOFF2 Latin font measures 12–19 KB (phpied.com analysis of 1,074 Google Fonts), meaning 5 static weights total 60–95 KB versus a single variable font file.
Select from 6 usage contexts — body text, headings, buttons and CTAs, captions, navigation, or display — and the calculator recommends the optimal weight with an explanation of why. Adjust the font size from 12–72px and see a live preview of the selected weight alongside a comparison strip showing all 9 CSS weight values (100 Thin through 900 Black) rendered at your chosen size. The tool generates ready-to-use CSS with your weight and size values.
How to Use This Calculator
Select a Weight
Choose a numeric value (100-900) or named weight (Thin, Light, Normal, Bold, Black) from the list.
Preview the Result
See live preview of the selected weight with sample text showing thickness and appearance.
Copy CSS Code
Click to copy the CSS font-weight declaration with both numeric and named values if applicable.
Explore Variable Range
Test custom weight values between standard increments to preview variable font capabilities.
Features
CSS Font Weight Scale
| Numeric Value | Named Weight | CSS Keyword | Common Usage |
|---|---|---|---|
| 100 | Thin | - | Decorative text |
| 200 | Extra Light | lighter | Subtle accents |
| 300 | Light | - | Large body text |
| 400 | Normal | normal | Body text (default) |
| 500 | Medium | - | Emphasized text |
| 600 | Semi Bold | - | Subheadings |
| 700 | Bold | bold | Headings |
| 800 | Extra Bold | bolder | Strong emphasis |
| 900 | Black | - | Display text |
Frequently Asked Questions
What do the numeric font-weight values mean?
What is the difference between bold and 700?
What happens if the requested weight is not available?
How do variable fonts handle weight?
What is the best font-weight for body text?
How do I set a custom weight in CSS?
Related Tools & Guides
Variable Font Tester
Explore variable font weight axes with interactive sliders
Font Size Converter
Convert between px, rem, em, pt, and vw units
Font Preview Generator
Preview fonts at multiple weights and sizes
Variable Fonts Guide
Complete guide to variable font implementation and benefits
Variable Fonts Performance
Performance analysis of variable vs static font files
@font-face CSS Generator
Generate @font-face CSS with font-weight declarations