font-weight
텍스트의 굵기(두께)를 설정하는 속성입니다. 100(가장 얇음)부터 900(가장 굵음)까지 9단계의 값을 지원합니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
fw100 | font-weight: 100 | Thin — 가장 얇은 굵기 |
fw200 | font-weight: 200 | Extra Light — 매우 얇은 굵기 |
fw300 | font-weight: 300 | Light — 얇은 굵기 |
fw400 | font-weight: 400 | Regular (Normal) — 기본 본문 굵기 |
fw500 | font-weight: 500 | Medium — 중간 굵기 |
fw600 | font-weight: 600 | Semi Bold — 강조용 굵기 |
fw700 | font-weight: 700 | Bold — 제목, 강한 강조 |
fw800 | font-weight: 800 | Extra Bold — 히어로, 대형 타이틀 |
fw900 | font-weight: 900 | Black — 가장 굵은 굵기 |
시각적 비교
9단계의 font-weight를 같은 텍스트로 비교합니다. 사용 중인 폰트가 해당 굵기를 지원해야 차이가 보입니다.
fw100The quick brown fox jumpsfw200The quick brown fox jumpsfw300The quick brown fox jumpsfw400The quick brown fox jumpsfw500The quick brown fox jumpsfw600The quick brown fox jumpsfw700The quick brown fox jumpsfw800The quick brown fox jumpsfw900The quick brown fox jumps자주 쓰는 굵기 가이드
용도에 따라 적절한 font-weight를 선택하세요.
| 용도 | 추천 | 이유 |
|---|---|---|
| 본문 텍스트 | fw400 | 기본 읽기 굵기. 긴 글에 적합 |
| 라벨, 네비게이션 | fw500 | 본문보다 약간 굵어서 구분 가능 |
| 강조 텍스트, 테이블 헤더 | fw600 | 눈에 띄지만 제목만큼 강하지 않음 |
| 제목 (h2, h3) | fw700 | 표준 볼드. 명확한 계층 구분 |
| 페이지 타이틀, 히어로 | fw800 | 큰 사이즈와 조합하여 강렬한 인상 |
클래스별 상세
fw400font-weight: 400
기본 본문 텍스트 굵기입니다. CSS의 font-weight: normal과 동일합니다. 대부분의 본문 텍스트에 사용됩니다.
<!-- 본문 텍스트 -->
<p class="fw400 fs16px lh1-7 c71717A">
기본 본문 텍스트입니다. font-weight: 400은
대부분의 본문에 사용되는 기본 굵기입니다.
</p>
<!-- 카드 설명 텍스트 -->
<div class="bg18181B p2rem br8px">
<h3 class="fw700 fs18px cFAFAFA mb8px">카드 제목</h3>
<p class="fw400 fs14px c71717A lh1-7">
카드 본문은 fw400으로 가독성을 확보합니다.
</p>
</div>미리보기
이 텍스트는 font-weight: 400 (Regular)입니다. 본문 텍스트의 기본 굵기로, 긴 글을 읽기에 가장 편안한 두께입니다.
fw500font-weight: 500
본문보다 약간 굵은 중간 굵기입니다. 부제목, 라벨, 네비게이션 항목 등에 사용하면 본문과 미묘한 구분을 줄 수 있습니다.
<!-- 네비게이션 -->
<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>
<!-- 폼 라벨 -->
<label class="fw500 fs14px cFAFAFA db mb4px">이메일 주소</label>
<input type="email" class="w100p" placeholder="example@email.com" />미리보기
이 텍스트는 font-weight: 500 (Medium)입니다. 본문보다 살짝 굵어서 라벨이나 네비게이션에 적합합니다.
fw600font-weight: 600
강조(emphasis) 용도의 세미볼드입니다. 테이블 헤더, 폼 라벨, 중요한 텍스트를 부각할 때 사용합니다.
<!-- 테이블 헤더 -->
<table class="w100p bcc">
<thead>
<tr>
<th class="fw600 fs12px ttu ls0-05em tal py12px px16px">이름</th>
<th class="fw600 fs12px ttu ls0-05em tal py12px px16px">역할</th>
<th class="fw600 fs12px ttu ls0-05em tal py12px px16px">상태</th>
</tr>
</thead>
</table>
<!-- 강조 텍스트 -->
<p class="fs14px c71717A lh1-7">
이 기능은 <span class="fw600 cFAFAFA">반드시 활성화</span>해야 합니다.
</p>미리보기
이 텍스트는 font-weight: 600 (Semi Bold)입니다. 강조가 필요하지만 제목만큼 굵을 필요는 없을 때 적합합니다.
fw700font-weight: 700
제목에 주로 사용하는 볼드입니다. CSS의 font-weight: bold와 동일합니다. h2, h3 수준의 제목에 적합합니다.
<!-- 섹션 제목 -->
<h2 class="fw700 fs2-4rem cFAFAFA lh1-3 mb16px">
시작하기
</h2>
<!-- 버튼 텍스트 -->
<button class="fw700 fs14px bg6366F1 cFFFFFF py12px px2-4rem br8px bn cp">
지금 시작하기
</button>미리보기
이 텍스트는 font-weight: 700 (Bold)입니다. 제목이나 강한 강조에 사용합니다.
fw800font-weight: 800
히어로 섹션이나 페이지 타이틀에 사용하는 Extra Bold입니다. 큰 폰트 사이즈와 조합하면 강렬한 인상을 줍니다.
<!-- 히어로 타이틀 -->
<h1 class="fw800 fs4-8rem cFAFAFA lh1-2 mb16px">
Build faster with
Atomic CSS
</h1>
<!-- 대형 숫자 통계 -->
<div class="df gap4rem">
<div class="tac">
<p class="fw800 fs3-6rem cFAFAFA">99%</p>
<p class="fw400 fs14px c71717A">만족도</p>
</div>
<div class="tac">
<p class="fw800 fs3-6rem cFAFAFA">50K+</p>
<p class="fw400 fs14px c71717A">사용자</p>
</div>
</div>미리보기
Extra Bold 히어로 타이틀
큰 폰트 사이즈와 조합하면 효과적입니다
팁 & 주의사항
모든 폰트가 9단계를 지원하지 않습니다
대부분의 폰트는 400(Regular)과 700(Bold)만 지원합니다. 지원하지 않는 굵기를 지정하면 브라우저가 가장 가까운 굵기로 대체(fallback)합니다. 다양한 굵기가 필요하면 Inter, Pretendard 같은 가변 폰트를 사용하세요.
Google Fonts는 사용할 굵기를 로드해야 합니다
Google Fonts에서 폰트를 불러올 때 사용할 weight를 명시해야 합니다. 예: Inter:wght@400;500;600;700;800. 로드하지 않은 굵기는 브라우저가 임의로 합성(faux bold)하여 품질이 떨어집니다.
fw400 = normal, fw700 = bold
CSS에서 font-weight: normal은 400, font-weight: bold는 700과 동일합니다. HTML의 <b>, <strong> 태그도 기본값이 700입니다.
굵기 단계를 너무 많이 사용하지 마세요
한 페이지에서 2~3단계의 굵기만 사용하는 것이 가독성에 좋습니다. 예: 본문 fw400, 강조 fw600, 제목 fw700 조합을 권장합니다.