CSS font-weight 속성이란?
font-weight 속성은 글꼴이 화면에 얼마나 굵게(bold) 또는 얇게(light) 표시될지를 조절하는 CSS 속성입니다. 텍스트의 시각적 강조 효과를 주고 싶을 때 매우 유용하게 활용되며, 웹 타이포그래피에서 계층 구조를 만드는 데 필수적인 요소입니다.
사용 가능한 값
font-weight 속성에는 다음과 같은 키워드 값과 숫자 값을 지정할 수 있습니다.
- normal — 기본 굵기 (숫자 값 400과 동일)
- bold — 굵은 글꼴 (숫자 값 700과 동일)
- bolder — 부모 요소보다 한 단계 더 굵게 표시
- lighter — 부모 요소보다 한 단계 더 얇게 표시
- 100 ~ 900 — 숫자가 클수록 글꼴이 굵어지며, 일반적으로 100 단위로 지정합니다.
숫자 값은 100(가장 얇음)부터 900(가장 굵음)까지 총 아홉 단계로 세분화되어 있으며, 사용 중인 폰트가 해당 굵기를 지원해야 정상적으로 적용됩니다.
font-weight 사용 예제
아래 예제는 인라인 스타일을 이용해 각기 다른 font-weight 값을 적용한 코드입니다.
<html>
<head>
</head>
<body>
<p style = "font-weight:bold;">이 글꼴은 굵게(bold) 표시됩니다.</p>
<p style = "font-weight:bolder;">이 글꼴은 더 굵게(bolder) 표시됩니다.</p>
<p style = "font-weight:300;">이 글꼴은 가중치 300으로 표시됩니다.</p>
</body>
</html>
실무 활용 팁
- 웹폰트를 사용할 때는 필요한 굵기(예: 300, 400, 700)의 폰트 파일을 함께 로드해야 의도한 대로 표시됩니다.
- 제목(h1~h6)에는 bold 또는 700 이상의 값을, 본문에는 normal(400), 보조 텍스트에는 lighter나 300 값을 사용하면 가독성이 좋아집니다.
- bolder와 lighter는 상속된 값에 따라 결과가 달라지므로, 명확한 디자인이 필요하다면 숫자 값을 직접 지정하는 것이 안전합니다.