Stick to a limited set of weights, typically Regular (400) for body text and Bold (700) for headings, to maintain clear hierarchy.
Font weight is a primary tool for creating hierarchy and emphasis. However, using too many weights can clutter the design and increase load times. A disciplined approach to font weights ensures that the most important information stands out without overwhelming the user.
See how different weights affect the character and readability of a typeface. Note that not all fonts support every weight.
The standard weight for body text. Optimized for reading long passages comfortably.
Used for emphasis within body text or for smaller subheadings where bold is too heavy.
Great for buttons, navigation links, and UI elements that need to be scanned quickly.
Reserved for primary headings and key data points. Creates strong contrast.
Try to stick to 2-3 weights max (e.g., 400, 500, 700) to keep the file size low.
Skip a weight level to create visible contrast (e.g., go from 400 to 600, not 400 to 500).
Consider variable fonts if you need fine-grained control over weight without the file size penalty.