Font Weight Pairing Guide — How to Use
Select heading and body font weights to instantly see the contrast score and pairing assessment. A greater weight difference creates a clearer visual hierarchy between heading and body text.
The most common pairing is Heading 700 (Bold) with Body 400 (Regular). A difference of 300+ means strong contrast, 200 is moderate, and 100 is weak. If the heading is lighter than the body, the hierarchy inverts and readability suffers significantly.
The preview section shows how the selected weights look. Results are based on the system font, so the visual difference may vary depending on the typeface you use.
Frequently Asked Questions
The browser will substitute the closest available weight. For example, if a font only has 400 and 700, selecting 600 will render as 700 and 300 as 400.
Heading 700 + Body 400 is the most versatile. For high-impact marketing materials, Heading 800–900 + Body 300–400 is commonly used.
They correspond to CSS font-weight values: 400 is Regular and 700 is Bold. Higher numbers produce bolder text.