웹 폰트 굵기(font weight)에 대해서

폰트의 굵기

웹 개발을 하면서, css로 자주 사용하는 폰트의 굵기는 normal, bold 가 있습니다. 거의 2가지 정도만 사용하지만 때때로는 수치를 입력하거나 lighter, bolder 등 부모의 상대 굵기를 사용할 수도 있습니다.

 

본 글에서는 굵기의 종류가 어떤게 있는지 살펴봅니다.

 

css font-weight

기본 두께

폰트의 굵기를 표현할 때는 font-weight 속성을 사용합니다. normal 과 bold 는 아마 자주 사용하여 다들 아는 속성 값일 것입니다.

font-weight: normal;
font-weight: bold;

 

부모 요소에 대한 상대 두께

자주 사용하지는 않지만 lighter와 bolder가 있습니다. 이 2개는 부모 요소(element)에 대한 상대적인 두께를 표현할 때 사용합니다.

• lighter: 부모 요소보다 얇은 가중치의 두께
• bolder: 부모 요소보다 두꺼운 가중치의 두께

font-weight: lighter;
font-weight: bolder;

 

두께를 수치로 표현

폰트의 두께를 수치로 표현할 수도 있는데, 100, 200, 300, 400, 500, 600, 700, 800, 900 을 값으로 넘겨 표현할 수 있습니다.

 

예를들면, 아래와 같이 표현할 수 있습니다.

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

 

굵기의 이름

폰트를 다운로드 받아보면, 종종 폰트 두께에 이름이 부여되어 있는 것을 볼 수 있습니다. Thin, ExtraLight, Light, ..., Bold, ExtraBold, Black 과 같이 말이죠.

 

100부터 900까지는 각각 아래와 같이 매핑됩니다.

• 100: Thin
• 200: Extra Light
• 300: Light
• 400: Normal 또는 Regular
• 500: Medium
• 600: Semi Bold
• 700: Bold
• 800: Extra Bold
• 900: Black

그렇다면 저희가 자주 사용하는 normal 과 bold를 수치로 표현하면 각각 400과 700을 뜻하게 되겠네요