CSS font-weight: 글씨 굵기

CSS font-weight 속성은 글씨의 굵기(웨이트)를 설정합니다. 사용 가능한 굵기 값은 현재 글꼴(font-family)에 따라 다릅니다.

pre {
  font-weight: normal;
  /* font-weight: bold; */
  /* font-weight: lighter; */
  /* font-weight: bolder; */
}

pre {
  text-align: center;
}

<pre>
내 그대를 생각함은
항상 그대가 앉아 있는 배경에서
해가 지고 바람이 부는 일처럼 사소한 일 일것이나
언젠가 그대가
한없이 괴로움 속을 헤매일 때에
오랫동안 전해 오던 그 사소함으로
그대를 불러보리라
</pre>

불러오는 중...

구문

/* 키워드 */
font-weight: normal;
font-weight: bold;

/* 부모 굵기에 상대적인 키워드 */
font-weight: lighter;
font-weight: bolder;

/* 숫자 */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /* normal과 같음 */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* bold와 같음 */
font-weight: 800;
font-weight: 900;

/* 전역 값 */
font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: revert-layer;
font-weight: unset;

font-weight는 다음 값 중 하나를 사용해 지정할 수 있습니다.

값

normal: 일반 글꼴입니다. 400과 동일합니다.
bold: 굵은 글꼴입니다. 700과 동일합니다.
<number>: 1 이상 1000 이하의 <number> 값입니다. 높은 값은 더 굵은 글꼴, 낮은 값은 더 얇은 글꼴을 나타냅니다. 가변 글꼴에서는 정확한 수치를 입력해 세부 조정이 가능합니다. 비가변 글꼴에서는, 지정한 정확한 값에 해당하는 굵기가 없다면 굵기 대체 알고리즘을 사용합니다. 100 단위로 끊어지는 값들에는 자주 쓰이는 별칭이 있습니다. 아래의 자주 쓰이는 굵기 이름에서 확인하세요.
lighter: 부모 요소보다 한 단계 얇은 글꼴입니다. 상대적 굵기는 네 종류만 존재한다는 것을 주의하세요. 아래의 상대적 굵기의 의미를 참고하세요.
bolder: 부모 요소보다 한 단계 굵은 글꼴입니다. 상대적 굵기는 네 종류만 존재한다는 것을 주의하세요. 아래의 상대적 굵기의 의미를 참고하세요.

대체 굵기

주어진 굵기 값을 사용할 수 없는 경우, 다음의 규칙을 통해 대신 사용할 굵기를 선택합니다.

주어진 굵기가 400 이상 500 이하인 경우,
- 주어진 값보다 크고, 500 이하의 가능한 굵기 중 가장 가까운 것을 선택합니다.
- 굵기를 찾을 수 없으면, 주어진 값보다 작고, 400 이상의 가능한 굵기 중 가장 가까운 것을 선택합니다.
- 굵기를 찾을 수 없으면, 500을 초과하는 굵기 중 가장 가까운 것을 선택합니다.
주어진 굵기가 400 미만인 경우, 주어진 값보다 작은 굵기 중 가장 가까운 것을 선택합니다. 그런 굵기가 없으면 주어진 값보다 큰 굵기 중 가장 가까운 것을 선택합니다.
주어진 굵기가 500 초과인 경우, 주어진 값보다 큰 굵기 중 가장 가까운 것을 선택합니다. 그런 굵기가 없으면 주어진 값보다 작은 굵기 중 가장 가까운 것을 선택합니다.

상대적 굵기의 의미

font-weight에 lighter 또는 bolder를 지정한 경우, 실제로 적용되는 굵기는 아래의 표와 같습니다.

상대적 굵기는 Thin (100), Normal (400), Bold (700), Heavy (900) 네 가지 굵기만 고려합니다. font-family가 더 많은 굵기를 가지고 있더라도 상대적 굵기 계산에서는 모두 무시합니다.

상속 값	`bolder`	`lighter`
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

자주 쓰이는 굵기 이름

100부터 900까지의 숫자 굵기는 대략 다음과 같은 이름에 대응합니다. (OpenType 명세도 확인하세요)

값	자주 쓰이는 이름
100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal (Regular)
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)

가변 글꼴

대부분의 글꼴은 자주 쓰이는 굵기 이름에 해당하는 굵기만 가지고 있습니다. 그러나 가변 글꼴은 특정 굵기만 지원하는 것에서 벗어나서 굵기의 범위를 지원합니다. 따라서 디자이너가 글씨의 굵기를 훨씬 더 자세하게 조절할 수 있습니다.

TrueType과 OpenType 가변 글꼴은 “wght” 바리에이션을 사용해 가변 굵기를 구현합니다.

<header>
  <input type="range" id="weight" name="weight" min="1" max="1000" />
  <label for="weight">굵기</label>
</header>
<div class="container">
  <p class="sample">
    다람쥐 헌 쳇바퀴에 타고파 01234567890 abcdefg
  </p>
</div>

/* https://github.com/orioncactus/pretendard */
@import url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css);

label {
  font: 1rem monospace;
  white-space: nowrap;
}

.container {
  max-height: 150px;
  overflow-y: auto;
}

.sample {
  text-transform: uppercase;
  font: 1.5rem 'Pretendard Variable', sans-serif;
}

const weightLabel = document.querySelector('label[for="weight"]')
const weightInput = document.querySelector('#weight')
const sampleText = document.querySelector('.sample')

function update() {
  weightLabel.textContent = `font-weight: ${weightInput.value}`
  sampleText.style.fontWeight = weightInput.value
}

weightInput.addEventListener('input', update)

update()

불러오는 중...

접근성

font-weight가 100 또는 200인 얇은 텍스트는 저시력 사용자가 읽기 어려울 수 있습니다.

Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0

예제

다양한 굵기

<p>일반 굵기로</p>
<p class="heavy">
  두껍게<br />
  <span>보다 얇게</span>
</p>

p {
  font-weight: 400;
}
.heavy {
  font-weight: bold;
}
span {
  font-weight: lighter;
}

불러오는 중...

명세

CSS Fonts Module Level 4

브라우저 호환성

MDN `browser-compat-data`
	데스크톱			모바일
	데스크톱			iOS	Android
	Safari	Chrome	Firefox	Safari	Chrome	Firefox	Samsung Internet
`font-weight`
`bold`
`bolder`
`lighter`
`normal`
`<number>` syntax

같이 보기

글꼴과 스타일 단축속성: font
글꼴: font-family
글씨 크기: font-size
글씨 스타일: font-style

상속 값	`bolder`	`lighter`
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

상속 값	`bolder`	`lighter`
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

상속 값	`bolder`	`lighter`
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700