When choosing a font, most designers know to think about the typeface. But when it comes to font weight, too many rely on intuition."Thin looks elegant." "Bold feels strong."And yet, these assumptions can lead to design decisions that undermine readability, accessibility, and even brand clarity.In this post, we’ll walk you through the fundamentals of font weight, when and how to use each level, and—most importantlythe research-backed reasons for making those choices.<h2 style="font-size: 22px;font-weight:normal">What Is Font Weight?</h2>Font weight refers to the thickness of a typeface’s strokes. In CSS<code>font-weight : 500</code>property ranges from 100 (very thin) to 900 (extremely bold), often in increments of 100. Each level serves a different visual and functional purpose:<table style="min-width: 75px"><colgroup><col><col><col></colgroup><tbody><tr><th colspan="1" rowspan="1">Weight</th><th colspan="1" rowspan="1">Name</th><th colspan="1" rowspan="1">Characteristics</th></tr><tr><td colspan="1" rowspan="1">100</td><td colspan="1" rowspan="1">Thin</td><td colspan="1" rowspan="1">Ultra-light, delicate, modern feel</td></tr><tr><td colspan="1" rowspan="1">200</td><td colspan="1" rowspan="1">Extra Light</td><td colspan="1" rowspan="1">Minimal and airy</td></tr><tr><td colspan="1" rowspan="1">300</td><td colspan="1" rowspan="1">Light</td><td colspan="1" rowspan="1">Clean and minimal, sometimes used for body copy</td></tr><tr><td colspan="1" rowspan="1">400</td><td colspan="1" rowspan="1">Regular</td><td colspan="1" rowspan="1">Standard readability, ideal for paragraphs</td></tr><tr><td colspan="1" rowspan="1">500</td><td colspan="1" rowspan="1">Medium</td><td colspan="1" rowspan="1">Slight emphasis, balanced for neutral UIs</td></tr><tr><td colspan="1" rowspan="1">600</td><td colspan="1" rowspan="1">Semi Bold</td><td colspan="1" rowspan="1">Good for subheaders or CTA buttons</td></tr><tr><td colspan="1" rowspan="1">700</td><td colspan="1" rowspan="1">Bold</td><td colspan="1" rowspan="1">Common for headings and emphasized text</td></tr><tr><td colspan="1" rowspan="1">800</td><td colspan="1" rowspan="1">Extra Bold</td><td colspan="1" rowspan="1">High-impact, often used in branding</td></tr><tr><td colspan="1" rowspan="1">900</td><td colspan="1" rowspan="1">Black/Heavy</td><td colspan="1" rowspan="1">Strongest emphasis, suited for logos or banners</td></tr></tbody></table><hr><h2 style="font-size: 22px;font-weight:normal">"Why This Weight?" — Research-Backed Answers</h2>Design shouldn’t rely on vibes alone. Several studies back up why some weights perform better than others in different contexts:1. Bernard et al. (2003) – Readability Study<ul style="list-style: none;padding: 0;margin: 0;list-style-position: inside;"><li style="list-style: none;padding: 0;margin: 0;list-style-position: inside;">- Best readability: Regular (400) and Semi-Bold (600)</li><li style="list-style: none;padding: 0;margin: 0;list-style-position: inside;">- Poor readability: Thin weights (100–300), especially at small sizes</li><li style="list-style: none;padding: 0;margin: 0;list-style-position: inside;">- Bold weights (700+) reduce letter distinction, slowing recognition speed</li></ul>2. Dyson &amp; Haselgrove (2001) – Eye Tracking<ul style="list-style: none;padding: 0;margin: 0;list-style-position: inside;"><li style="list-style: none;padding: 0;margin: 0;list-style-position: inside;">- Optimal saccade flow with Medium weights (400–500)</li><li style="list-style: none;padding: 0;margin: 0;list-style-position: inside;">- Overly light or heavy weights cause visual fatigue and slower reading</li></ul>3. Google Fonts UX Study<ul style="list-style: none;padding: 0;margin: 0;list-style-position: inside;"><li style="list-style: none;padding: 0;margin: 0;list-style-position: inside;">- Regular (400) was rated most readable for body text</li><li style="list-style: none;padding: 0;margin: 0;list-style-position: inside;">- Light (≤300) decreased recognition rates, especially on mobile</li><li style="list-style: none;padding: 0;margin: 0;list-style-position: inside;">- Bold (700) caught attention but hurt paragraph readability</li></ul>4. WebAIM Accessibility Guidelines<ul style="list-style: none;padding: 0;margin: 0;list-style-position: inside;"><li style="list-style: none;padding: 0;margin: 0;list-style-position: inside;">Users with visual impairments or presbyopia benefit from 600+</li><li style="list-style: none;padding: 0;margin: 0;list-style-position: inside;">Thin fonts can violate contrast standards and reduce legibility</li></ul><h2 style="font-size: 22px;font-weight:normal">Recommended Font Weights by Use Case</h2><table style="min-width: 75px"><colgroup><col><col><col></colgroup><tbody><tr><th colspan="1" rowspan="1">Use Case</th><th colspan="1" rowspan="1">Recommended Weight</th><th colspan="1" rowspan="1">Why?</th></tr><tr><td colspan="1" rowspan="1">Body Text</td><td colspan="1" rowspan="1">400</td><td colspan="1" rowspan="1">Best balance of legibility and comfort</td></tr><tr><td colspan="1" rowspan="1">Small UI Elements</td><td colspan="1" rowspan="1">500–600</td><td colspan="1" rowspan="1">Stronger visibility in small interfaces</td></tr><tr><td colspan="1" rowspan="1">Section Headings</td><td colspan="1" rowspan="1">600–700</td><td colspan="1" rowspan="1">Clear hierarchy, draws attention</td></tr><tr><td colspan="1" rowspan="1">Buttons / CTAs</td><td colspan="1" rowspan="1">600+</td><td colspan="1" rowspan="1">Emphasizes interactivity</td></tr><tr><td colspan="1" rowspan="1">Branding / Logos</td><td colspan="1" rowspan="1">100 or 900</td><td colspan="1" rowspan="1">Creates distinct and memorable impression</td></tr><tr><td colspan="1" rowspan="1">Accessibility Needs</td><td colspan="1" rowspan="1">600+</td><td colspan="1" rowspan="1">Improves recognition for visually impaired users</td></tr></tbody></table><h2 style="font-size: 22px;font-weight:normal">Things to Keep in Mind</h2>1. Not All Fonts Support Every Weighte.g., Noto Sans supports 100–900, but Pretendard may not.2. Performance MattersLoading too many font weights (e.g., 5+) can slow down your site.3. Use Contrast IntentionallyIf both your heading and body use bold, nothing stands out.4. Mobile PrecisionThin fonts may pixelate or blur on lower-resolution screens.<h2 style="font-size: 22px;font-weight:normal">Design Is About Justification, Not Just Intuition</h2>Choosing a font weight isn’t just a matter of taste—it's a decision that affects UX, hierarchy, and accessibility. As designers, developers, or product teams, we need to justify our choices.A thoughtful font-weight can enhance clarity, guide the user’s eye, and elevate the brand.Before you use boldbold ask yourself:<ul style="list-style: none;padding: 0;margin: 0;list-style-position: inside;"><li style="list-style: none;padding: 0;margin: 0;list-style-position: inside;">- Why is this bold?</li><li style="list-style: none;padding: 0;margin: 0;list-style-position: inside;">- Why not medium or regular?</li></ul>If you can answer those questions, you’re not just designing—you’re designing well.

Don't Just Feel Font Weight

#bold #fontweight #reason #typography #contents #contrast #guide

My idea works in the market?