AAtomic CSS

font-weight

Sets the weight (thickness) of text. Supports 9 levels from 100(thinnest) to 900(thickest).

Class List

ClassCSSDescription
fw100font-weight: 100Thin -- Thinnest weight
fw200font-weight: 200Extra Light -- Very thin weight
fw300font-weight: 300Light -- Thin weight
fw400font-weight: 400Regular (Normal) -- Default body weight
fw500font-weight: 500Medium -- Medium weight
fw600font-weight: 600Semi Bold -- Emphasis weight
fw700font-weight: 700Bold -- Headings, strong emphasis
fw800font-weight: 800Extra Bold -- Hero, large titles
fw900font-weight: 900Black -- Heaviest weight

Visual Comparison

Compares 9 font-weight levels with the same text. The font must support the specified weight to see differences.

fw100The quick brown fox jumps
100 · Thin
fw200The quick brown fox jumps
200 · Extra Light
fw300The quick brown fox jumps
300 · Light
fw400The quick brown fox jumps
400 · Regular
fw500The quick brown fox jumps
500 · Medium
fw600The quick brown fox jumps
600 · Semi Bold
fw700The quick brown fox jumps
700 · Bold
fw800The quick brown fox jumps
800 · Extra Bold
fw900The quick brown fox jumps
900 · Black

Common Weight Guide

Choose an appropriate font-weight based on use case.

UsageRecommendedReason
본문 텍스트fw400기본 읽기 굵기. 긴 글에 적합
라벨, 네비게이션fw500본문보다 약간 굵어서 구분 가능
강조 텍스트, 테이블 헤더fw600눈에 띄지만 제목만큼 강하지 않음
제목 (h2, h3)fw700표준 볼드. 명확한 계층 구분
페이지 타이틀, 히어로fw800큰 사이즈와 조합하여 강렬한 인상

Class Details

fw400font-weight: 400

Default body text weight. Equivalent to CSS font-weight: normal. Used for most body text.

<!-- Body text -->
<p class="fw400 fs16px lh1-7 c71717A">
  Default body text. font-weight: 400 is
  the default weight used for most body text.
</p>

<!-- Card description text -->
<div class="bg18181B p2rem br8px">
  <h3 class="fw700 fs18px cFAFAFA mb8px">Card Title</h3>
  <p class="fw400 fs14px c71717A lh1-7">
    Card body uses fw400 for readability.
  </p>
</div>

Preview

This text is font-weight: 400 (Regular). The default weight for body text, the most comfortable thickness for reading long text.

fw500font-weight: 500

Slightly heavier than body text. Using it for subtitles, labels, navigation items, etc. provides a subtle distinction from body text.

<!-- Navigation -->
<nav class="df gap2-4rem">
  <a class="fw500 fs14px cFAFAFA tdn">Home</a>
  <a class="fw500 fs14px c71717A tdn">About</a>
  <a class="fw500 fs14px c71717A tdn">Contact</a>
</nav>

<!-- Form label -->
<label class="fw500 fs14px cFAFAFA db mb4px">Email address</label>
<input type="email" class="w100p" placeholder="example@email.com" />

Preview

This text is font-weight: 500 (Medium). Slightly heavier than body, suitable for labels and navigation.

fw600font-weight: 600

Semi-bold for emphasis. Used to highlight table headers, form labels, and important text.

<!-- Table header -->
<table class="w100p bcc">
  <thead>
    <tr>
      <th class="fw600 fs12px ttu ls0-05em tal py12px px16px">Name</th>
      <th class="fw600 fs12px ttu ls0-05em tal py12px px16px">Role</th>
      <th class="fw600 fs12px ttu ls0-05em tal py12px px16px">Status</th>
    </tr>
  </thead>
</table>

<!-- Emphasis text -->
<p class="fs14px c71717A lh1-7">
  This feature <span class="fw600 cFAFAFA">must be activated</span>.
</p>

Preview

This text is font-weight: 600 (Semi Bold). Suitable when emphasis is needed but not as thick as headings.

fw700font-weight: 700

Bold, primarily used for headings. Equivalent to CSS font-weight: bold. Suitable for h2, h3 level headings.

<!-- Section Title -->
<h2 class="fw700 fs2-4rem cFAFAFA lh1-3 mb16px">
  Get Started
</h2>

<!-- Button text -->
<button class="fw700 fs14px bg6366F1 cFFFFFF py12px px2-4rem br8px bn cp">
  Get Started Now
</button>

Preview

This text is font-weight: 700 (Bold). Used for headings and strong emphasis.

fw800font-weight: 800

Extra Bold used for hero sections and page titles. Combined with large font size, it creates a strong impression.

<!-- Hero title -->
<h1 class="fw800 fs4-8rem cFAFAFA lh1-2 mb16px">
  Build faster with
  Atomic CSS
</h1>

<!-- Large number statistics -->
<div class="df gap4rem">
  <div class="tac">
    <p class="fw800 fs3-6rem cFAFAFA">99%</p>
    <p class="fw400 fs14px c71717A">Satisfaction</p>
  </div>
  <div class="tac">
    <p class="fw800 fs3-6rem cFAFAFA">50K+</p>
    <p class="fw400 fs14px c71717A">Users</p>
  </div>
</div>

Preview

Extra Bold hero title

Effective when combined with large font size

Tips & Notes

Not all fonts support 9 weight levels

Most fonts only support 400 (Regular) and 700 (Bold). If an unsupported weight is specified, the browser falls back to the nearest weight. For various weights, use variable fonts like Inter, Pretendard.

Google Fonts requires loading the weights you use

When loading fonts from Google Fonts, you must specify the weights to use. Example: Inter:wght@400;500;600;700;800. Weights not loaded will be synthesized (faux bold) by the browser with lower quality.

fw400 = normal, fw700 = bold

In CSS, font-weight: normal equals 400, font-weight: bold equals 700. HTML <b>, <strong> tags also default to 700.

Do not use too many weight levels

Using only 2-3 weight levels per page is best for readability. Recommended: body fw400, emphasis fw600, heading fw700.

font-sizefont-styleline-height