font-weight

CSS Reference

작성일 2024-09-19 최근 수정일 2026-10-25

font-weight는 글자 굵기를 요청합니다. normal은 400, bold는 700에 해당하며, 현재 문법에서는 1부터 1000까지의 숫자를 사용할 수 있습니다. 요청한 모든 굵기가 실제 글꼴에 존재하는 것은 아닙니다.

문법과 주요 값

속성	초기값	상속	주요 적용 조건
`font-weight`	normal	예	모든 요소; 실제 그림·텍스트·상자의 존재 조건은 본문에서 확인

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

body { font-weight: 400; }
strong { font-weight: 700; }
.title { font-weight: 650; }

값 또는 구분	동작과 선택 기준
`normal / 400`	일반 굵기
`bold / 700`	굵은 표현
`1~1000`	숫자 굵기; 실제 지원 범위는 글꼴에 따라 다름
`bolder / lighter`	상속된 굵기를 기준으로 상대 굵기 선택

값과 적용 조건은 MDN font-weight에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 font-weight-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>font-weight 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target { font-weight: 400; font-size: 26px; }
.reference { font-weight: 700; font-size: 26px; }
</style>
</head>
<body>
<main id="demo">
<h1>font-weight 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">400</p><div class="target">Font weight / 글자 굵기</div></div><div class="b"><p class="label">700</p><div class="reference">Font weight / 글자 굵기</div></div></section>
</main>
</body>
</html>

일반 굵기와 굵은 글자를 비교합니다. 사용 중인 글꼴에 해당 굵기가 없으면 가까운 얼굴이 선택되거나 굵기가 합성될 수 있습니다.

정적 글꼴과 가변 글꼴

정적 글꼴은 보통 준비된 굵기 파일을 선택합니다. 가변 글꼴은 지원하는 weight 축 범위 안에서 세밀한 값을 제공할 수 있지만 모든 가변 글꼴의 범위가 같지는 않습니다. @font-face에서 굵기 범위를 잘못 선언하면 파일이 있어도 의도한 값이 선택되지 않을 수 있습니다.

상대 값과 의미 있는 강조

bolder는 부모 값에 일정한 숫자를 더하는 방식이 아니라 상대적인 단계 선택 규칙을 따릅니다. 디자인 값이 명확하면 숫자 굵기를 지정하는 편이 예측하기 쉽습니다. strong의 의미와 시각적인 굵기는 별개이므로 강조 의미를 CSS만으로 대체하지 마세요.

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

기존 파일에서 font-weight만 400, 650, 700으로 바꾸고 Computed와 Rendered Fonts를 함께 확인합니다. 세 값이 항상 세 가지 서체를 만들지는 않습니다.
font-weight: 400인 부모와 bolder인 자식을 만들면 자식 요청은 700이 되는 예를 확인할 수 있습니다. 상대 단계와 실제 선택한 글꼴은 구분하고 원래 수치로 복구합니다.

부모 요청	bolder	lighter
100	400	100
400	700	100
700	900	400
900	900	700

표는 대표 부모 수치에서 선택되는 상대 요청값입니다. 실제 서체 파일 선택이나 합성 결과까지 뜻하지 않습니다. 첫 예제의 .samples에 font-weight:400을 넣고 .target만 bolder/lighter로 바꾸어 Computed에서 700/100을 확인한 뒤 두 추가 설정을 제거합니다.

문자 크기·줄 높이·서체를 함께 조정하려면 글꼴, 글자 크기, 굵기, 줄 간격 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 font-family입니다.

적용되지 않거나 예상과 다를 때

Computed의 값과 실제 렌더링 글꼴의 굵기 파일을 함께 확인합니다.
여러 숫자가 같은 모습이면 먼저 글꼴의 지원 굵기와 로딩 상태를 확인합니다.

CSS Reference