정의 및 사용 방법

font-weight 속성은 글꼴의 굵기를 지정합니다.

이 속성의 값으로 글꼴의 굵기를 얼마가 가늘거나 굵게 할지를 섬세하게 설정할 수 있습니다.

기본 예제

CSS 라이브 데모: font-weight 데모 버튼을 클릭해 보세요!

'글꼴의 굵기를 지정한다'는 의미

font-weight 속성은 단순히 글자의 굵기를 지정한다는 것 이상의 의미를 담고 있습니다.
이 속성은 글꼴의 두께(weight of glyphs), 검정 정도(degree of blackness), 획의 두께(stroke thickness)를 얼마나 두껍게 표현될지를 함께 고려해서 지정한다는 점입니다.

  • 글꼴의 두께(weight of glyphs): 글자 모양 자체의 두께를 결정합니다.
  • 검정 정도(degree of blackness): 글꼴이 얼마나 짙게 보이는지, 즉 '명암의 차이'를 조절합니다. 검은이 짙을수록가 글자가 더 굵게 보입니다.
  • 획의 두께(stroke thickness): 글자의 획이 얼마나 두꺼운지를 지정하여 글꼴을 시각적으로 강조하거나 미세하게 표현할 수 있습니다.

간단한 예시

대부분의 브라우저에서는 <strong> 태그의 텍스트를 기본으로 굵게(bold) 표현합니다.
아래는 font-weight 속성으로 굵게(bold)되어 있는 글꼴의 두께를 보통의 굵기(normal)로 지정하고, 대신 강조의 의미로 글자색(color 속성을 사용하여)을 red로 스타일링한 예제입니다.

CSS 
strong {
    font-weight: normal;
    color: red;
}
HTML 
<p>건설 현장에서는 <strong>반드시 안전모를 착용하세요!</strong></p>
실제 적용된 모습

형식 구문

CSS 
selector {
    font-weight: /* value */
}

구문

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

/* 부모 요소에 상대적인 값:
   현재 요소의 부모 요소의 글꼴 굵기를 기준으로 상대적인 키워드 값을 지정 */
font-weight: lighter; /* 부모 요소보다 가는 굵기 */
font-weight: bolder;  /* 부모 요소보다 굵은 굵기 */

/* 기존 폰트(Static Fonts): 숫자 값(100 ~ 900),  100 단위로 세분화하여 지정 */
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;

/* 가변형 폰트(Variable Fonts): 숫자 값(1 ~ 1000),  1 ~ 1000 사이의 모든 수 세분화하여 지정 */
font-weight: 250;
font-weight: 510;
font-weight: 772.5;
font-weight: 950;

/* 글로벌 값 */
font-weight: inherit;
font-weight: initial;
font-weight: unset;

값

font-weight 속성의 값
normal 보통 굵기 (숫자 값 400)
bold 굵은 글꼴 (숫자 값 700)
lighter 부모 요소보다 가는 굵기
bolder 부모 요소보다 굵은 굵기
기존 폰트(Static Fonts):
숫자 값(100 ~ 900) 		글꼴의 굵기를 100 단위로 세분화하여 지정
  • 100 - 매우 가는 글꼴
  • 200 - 가는 글꼴
  • 300 - 약간 가는 글꼴
  • 400 - 보통 굵기의 글꼴(normal과 같음)
  • 500 - 약간 굵은 글꼴
  • 600 - 약간 굵은 글꼴보다 좀 더 굵은 글꼴
  • 700 - 굵은 글꼴(bold와 같음)
  • 800 - 매우 굵은 글꼴
  • 900 - 매우 굵은 글꼴보다 더 굵은 글꼴
가변형 폰트(Variable Fonts):
숫자 값(1 ~ 1000) 		글꼴의 굵기를 1 ~ 1000 사이의 모든 수 세분화하여 지정
251, 772.5 등 세밀한 수치 가능
  • 251 - 약간 더 가는 글꼴
  • 772.5 - 좀 더 굵은 글꼴

추가 설명

모든 글꼴이 font-weight 속성에서 제공하는 모든 값(100에서 900까지의 세분화된 굵기)을 지원하는 것은 아닙니다. 특정 글꼴은 normal(400)과 bold(700), 혹은 단 하나의 값(예를 들어, bold(700))만 지원할 수도 있고, 일부 고급 글꼴은 다양한 굵기 범위를 지원합니다.

지정한 굵기의 글꼴을 지원하지 않는 글꼴이라면

지정한 font-weight 값이 글꼴에서 지원되지 않으면, 브라우저는 해당 글꼴에서 지원하는 가장 가까운 굵기로 대체합니다.
예를 들어, 만약 font-weight: 600을 지정했지만, 사용 중인 글꼴이 normal(400)과 bold(700)만 지원한다면, 브라우저는 bold로 대체하여 렌더링합니다.

글꼴의 디자인 특징

같은 font-weight 값을 사용하더라도, 글꼴에 따라 굵기가 다르게 보일 수 있습니다. 예를 들어, 700(bold)은 글꼴에 따라 굵기의 차이가 날 수 있습니다.

기존 폰트(Static Fonts) vs 가변형 폰트(Variable Fonts)

기존 폰트(Static Fonts)는 각 글꼴의 두께(예: Thin, Light, Regular, Bold 등), 너비(Width), 기울기(Slant) 등 스타일마다 각각의 글꼴 파일이 있습니다. 기존의 폰트가 굵기마다 별도 파일을 사용했다면, 가변형 폰트(Variable Fonts)는 모든 스타일의 조합이 단일 파일에 통합되어 있습니다.

기존의 폰트가 굵기마다 별도 파일을 사용했다면, 가변 폰트는 1개의 파일 내에서 수치 조정만으로 무한에 가까운 형태 변화가 가능합니다. 단, 실제 화면에 반영되는 정도는 해당 가변형 폰트 파일이 얼마나 정밀하게 설계되었는지에 따라 달라집니다. 가변형 폰트에 대한 자세한 설명은 MDN의 Variable fonts(영문) 자료를 참고하세요.

형식 정의

font-weight 속성의 형식 정의
초깃값 normal
적용 요소 모든 요소
상속 예
애니메이션 예

font-weight 속성의 초깃값은 normal이지만, '브라우저의 기본 스타일시트'에서는 bold로 설정되어 있는 요소들이 있습니다.

부연설명
각 브라우저는 HTML 요소에 대한 기본 스타일을 설정한 내장 스타일시트를 가지고 있습니다. '브라우저의 기본 스타일시트'(User Agent Stylesheet)라고 합니다. 이 스타일 시트는 웹 페이지의 기본 디자인을 정의합니다. 브라우저의 기본 스타일은 사용자 경험을 개선하기 위해 각 브라우저의 개발자가 설정한 것입니다. 여기에서 설정된 값들은 브라우저가 렌더링될 때 개발자에 의해 해당 속성의 값이 명시되지 않았을 때 적용되는 기본값입니다.

HTML 
<h4>h4</h4>
<hr>
<h5>h5</h5>
<hr>
<h6>h6</h6>
<hr>
<strong>strong</strong>
<hr>
<b>b</b>
<hr>
<table>
    <tr>
        <th>th</th>
    </tr>
</table>
실제 적용된 모습

사용 팁

font-weight를 사용할 때 숫자 값을 사용하는 것이 여러모로 유리합니다. 그 이유는 다음과 같습니다.

정확한 조정과 스타일의 유연성

숫자 값은 100에서 900까지의 범위를 가지고 있어, 글꼴의 두께를 더 세밀하게 조정할 수 있습니다. 이를 통해 다양한 시각적 효과를 구현할 수 있습니다.

더 많은 선택의 여지

숫자 값을 지정했지만 해당 굵기의 글꼴이 지원되지 않는 경우에도, 브라우저는 가장 가까운 굵기로 대체합니다. 이로 인해 키워드 값보다 글꼴의 두께에 대한 선택의 여지가 더 많아집니다.

브라우저 호환성

font-weight 속성의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
font-weight 2 12 1 1
숫자 값 62 17 61 11

명세서

font-weight 속성의 명세서 사양
명세서 사양
font-weight CSS Fonts Module Level 4
#font-weight-prop

참고문헌

같이 보기