VENDICT Design System

Typography

Pretendard 프리텐다드

각 토큰은 Level - Attribute 구조를 따르며, 폰트 크기와 웨이트는 속성으로 정의됩니다.

별간 속성은 언더스코어(_)로 구분하여 추가 스타일을 표현합니다.

Title1-24B_Rd

1.Type

토큰의 사용 목적을 나타내는 유형(Type)입니다. 이 요소는 해당 타이포그래피 스타일이 어디에 사용되는지(예: Title, Body)를 구분합니다.

2.Level

타이포그래피의 서열을 나타내는 레벨(Level)입니다. 보통 큰 숫자가 더 높은 계층의 스타일을 의미하며, 숫자가 작아질수록 폰트 사이즈가 작아집니다.

3.Font Size

타이포그래피의 폰트 크기(Size)를 나타내며, 숫자는 px 단위를 의미합니다.

4.Font Weight

폰트의 굵기(Font Weight)를 나타내는 약어로, Bold, Medium, Regular의 굵기를 의미합니다.

5.Reading Line Height

폰트의 추가 속성으로, 라인 높이(Line Height)를 조정하여 가독성을 높이는 Reading 속성을 나타냅니다.

Style	Size	Height	Weight
Display 1 - 36B	36px	48px	700
Display 1 - 36SB	36px	48px	600
Display 1 - 36M	36px	48px	500

Style	Size	Height	Weight
Title 1 - 28B	28px	36px	700
Title 1 - 28SB	28px	36px	600
Title 1 - 28M	28px	36px	500
Title 1 - 28R	28px	36px	400
Title 2 - 24B	24px	32px	700
Title 2 - 24SB	24px	32px	600
Title 2 - 24M	24px	32px	500
Title 2 - 24R	24px	32px	400
Title 3 - 20B	20px	28px	700
Title 3 - 20SB	20px	28px	600
Title 3 - 20M	20px	28px	500
Title 3 - 20R	20px	28px	400
Title 4 - 18B	18px	26px	700
Title 4 - 18SB	18px	26px	600
Title 4 - 18M	18px	26px	500
Title 4 - 18R	18px	26px	400

Style	Size	Height	Weight
Body 1 - 16SB	16px	24px	600
Body 1 - 16M	16px	24px	500
Body 1 - 16R	16px	24px	400
Body 2 - 14SB	14px	20px	600
Body 2 - 14M	14px	20px	500
Body 2 - 14R	14px	20px	400
Body 3 - 13SB	13px	20px	600
Body 3 - 13M	13px	20px	500
Body 3 - 13R	13px	20px	400
Body 4 - 12SB	12px	16px	600
Body 4 - 12M	12px	16px	500
Body 4 - 12R	12px	16px	400
Body 5 - 10SB	10px	14px	600
Body 5 - 10M	10px	14px	500
Body 5 - 10R	10px	14px	400

Style	Size	Height	Weight
Body 1 - 16M RD	16px	26px	500
Body 1 - 16R RD	16px	26px	400
Body 2 - 14M RD	14px	22px	500
Body 2 - 14R RD	14px	22px	400