CSS font-weight, 텍스트 두께 조절을 위한 속성

FONT-WEIGHT 속성이란?

이 속성 역시 font-size, font-family와 함께 다니는 속성인 필수 도구입니다. 웹페이지의 텍스트 두께를 조절하는 역할을 합니다.  HTML <strong>태그와 같은 역할 아닌가 싶으시죠?

 

<strong> 태그에는 중요하다는 의미가 포함되어 있지만 font-weight는 단순 디자인만 변경하는 것이기 때문에 <b> 태그와 비슷하다고 할 수 있겠네요.

 

사용법

h1 {
  font-weight: bold;
}

p {
  font-weight: 300;
}

• h1 요소와 p 요소의 텍스트 크기를 정한 예시입니다
• font-weight 속성 뒤에는 두 가지 방식으로 입력이 가능합니다.
  • 정해져 있는 이름 : normal, bold, bolder, lighter
  • 숫자 : 100에서 900까지

숫자를 입력할 경우 100이 가장 얇고 900이 가장 두껍습니다. 1단위로 세밀하게 조정할 수 있지만 보통은 100단위로 조절합니다. 788, 789를 눈으로는 구분하기 힘들껄요?

 

정해진 이름을 입력하는 경우도 있어요. 우리가 font-color를 입력할 때도 #ff0000 이 아닌 red라고 써도 되잖아요? 마찬가지 입니다.

 

font-weight에서도 미리 정해진 이름이 있어요. normal은 400, bold는 700과 동일합니다. 그런데 bolder, lighter는 뭐죠?

부모 요소 대비 상대적으로 얇게, 두껍게 처리하라는 뜻이에요. 

 

더 자세한 내용은 아래 링크를 참조하시면 됩니다.

https://developer.mozilla.org/ko/docs/Web/CSS/font-weight

font-weight - CSS: Cascading Style Sheets | MDN

 

예시

See the Pen font-weight by 40's Programmer (@40sProgrammer) on CodePen.

 

100에서 900까지, normal과 bold로 폰트 두께를 정렬해보았습니다. 

어떤가요? 눈으로 확연히 구분되시나요?