CSS 글꼴 두께(font-weight) 속성이란?
CSS의 font-weight 속성은 글꼴이 얼마나 굵게 또는 얇게 표시될지를 조절하는 데 사용됩니다. 이 속성을 활용하면 텍스트의 시각적 강조 정도를 세밀하게 지정할 수 있어, 제목과 본문의 위계를 명확히 하거나 특정 문구를 돋보이게 만들 때 유용합니다.
사용 가능한 값
font-weight 속성에는 다음과 같은 값들을 지정할 수 있습니다.
- 키워드 값: normal(기본), bold(굵게), bolder(더 굵게), lighter(더 얇게)
- 숫자 값: 100부터 900까지 100 단위로 지정 (400은 normal, 700은 bold에 해당)
숫자 값이 클수록 글꼴이 더 굵게 표시되며, 사용 중인 폰트가 해당 두께를 지원하지 않으면 브라우저가 가장 근접한 두께로 대체하여 렌더링합니다.
예제 코드
아래 예제는 인라인 스타일을 사용해 서로 다른 두께 값을 적용한 모습입니다.
<html> <head> </head> <body> <p style = "font-weight:bold;">이 글꼴은 bold(굵게)입니다.</p> <p style = "font-weight:bolder;">이 글꼴은 bolder(더 굵게)입니다.</p> <p style = "font-weight:500;">이 글꼴은 500 두께입니다.</p> </body> </html>
참고 사항
bolder와 lighter는 상대적인 값으로, 부모 요소의 글꼴 두께를 기준으로 한 단계 굵게 또는 얇게 표시됩니다. 반면 숫자 값은 절대적인 두께를 나타내므로, 다양한 두께를 지원하는 웹 폰트(예: Google Fonts의 여러 weight 버전)와 함께 사용하면 더욱 정교한 타이포그래피 연출이 가능합니다.