CSS font-weight: 글씨 굵기

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

불러오는 중...

font-weight: normal;
font-weight: bold;
font-weight: lighter;
font-weight: bolder;

구문

/* 키워드 */
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과 동일합니다.

lighter

부모 요소보다 한 단계 얇은 글꼴입니다. 상대적 굵기는 네 종류만 존재한다는 것을 주의하세요. 아래의 상대적 굵기의 의미를 참고하세요.

bolder

부모 요소보다 한 단계 굵은 글꼴입니다. 상대적 굵기는 네 종류만 존재한다는 것을 주의하세요. 아래의 상대적 굵기의 의미를 참고하세요.

<number>

1 이상 1000 이하의 <number> 값입니다. 높은 값은 더 굵은 글꼴, 낮은 값은 더 얇은 글꼴을 나타냅니다. 자주 사용되는 일부 값을 Thin, Semi Bold, Black과 같은 이름으로도 많이 부릅니다. 아래의 자주 쓰이는 굵기 이름을 참고하세요.

font-weight의 이전 명세에서는 100 단위로 끊어지는 100, 200, 300, 400, 500, 600, 700, 800, 900과 키워드 값만 허용했습니다. 글꼴 역시 이 굵기들만 지원할 수 있었으며, 451과 같은 세부적인 값은 대체 굵기 시스템을 통해서 가장 가까운 100단위 굵기를 대신 사용했습니다.

CSS Fonts Level 4 명세는 지정 가능한 값을 1~1000의 정수로 확장했으며, 훨씬 상세하게 조절 가능해진 굵기에 대응할 수 있는 글꼴인 가변 글꼴 지원을 추가했습니다.

대체 굵기

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

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

상대적 굵기의 의미

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

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

상속 값bolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700

자주 쓰이는 굵기 이름

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

자주 쓰이는 이름
100Thin
200Extra Light
300Light
400Normal
500Medium
600Semi Bold
700Bold
800Extra Bold
900Black

가변 글꼴

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

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

아래의 예제가 올바르게 동작하려면 브라우저가 CSS Fonts Level 4 명세를 지원해야 합니다.

HTML

<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>

CSS

/* 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;
}

JavaScript

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인 얇은 텍스트는 저시력 사용자가 읽기 어려울 수 있습니다.

예제

다양한 굵기

<p>일반 굵기로</p>
<p class="heavy">
  두껍게<br />
  <span>보다 얇게</span>
</p>
p {
  font-weight: 400;
}
.heavy {
  font-weight: bold;
}
span {
  font-weight: lighter;
}
실행 결과

불러오는 중...

명세

브라우저 호환성

IEEdgeChromeSafariFirefox
312211
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
14.41841.0
<number> syntax
IEEdgeChromeSafariFirefox
미지원17621161
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
116262618.0
MDN BCD에서 가져오는 데이터입니다.

같이 보기

마지막 업데이트:
이 페이지를 오프라인에서 볼 수 있습니다.

sorto.me

CC BY-SA 4.0

based on MDN (contributors)