font-weight 속성의 이해

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;  /* 부모 요소보다 굵은 굵기 */

/* 숫자 값 */
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: unset;

값

font-weight 속성의 값
normal 보통 굵기 (숫자 값 400)
bold 굵은 글꼴 (숫자 값 700)
lighter 부모 요소보다 가는 굵기
bolder 부모 요소보다 굵은 굵기
숫자 값(100 ~ 900) 글꼴의 굵기를 100 단위로 세분화하여 지정
  • 100 - 매우 가는 글꼴
  • 200 - 가는 글꼴
  • 300 - 약간 가는 글꼴
  • 400 - 보통 굵기의 글꼴(normal과 같음)
  • 500 - 약간 굵은 글꼴
  • 600 - 약간 굵은 글꼴보다 좀 더 굵은 글꼴
  • 700 - 굵은 글꼴(bold와 같음)
  • 800 - 매우 굵은 글꼴
  • 900 - 매우 굵은 글꼴보다 더 굵은 글꼴

추가 설명

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

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

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

글꼴의 디자인 특징

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

형식 정의

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
숫자 값(100 ~ 900) 62 17 61 11

명세서

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

참고문헌

같이 보기