Typography

타이포그래피(Typography)는 서비스와 사용자가 커뮤니케이션하는 주요 요소입니다. 정의된 타입 스케일과 컬러를 고려하여 적용된 타이포그래피는 콘텐츠의 중요한 정도를 구분하고, 텍스트 전체의 밸런스를 맞추어 사용자의 프로덕트 경험을 향상시킵니다. 텍스트 목적과 기능에 따라 서체 및 스타일을 유의해 사용합니다.

Type Usage

정의된 스케일은 엄격한 제약이 아닌 권장 가이드라인으로 제공됩니다.
타입 스케일을 지정하면 디자인의 유연성이 제한될 수 있으므로, 이 시스템은 권장 폰트 크기와 굵기를 제안하며 디자이너가 필요에 따라 자유롭게 조합할 수 있도록 합니다.

다만, 가독성과 접근성을 보장하기 위해 12pt 미만의 폰트 크기는 사용하지 않는 것을 권장합니다.

Scale Category	Typeface	Weight	Font Size (px)	REM	Line Height(px)	Unitless Line Height (LH ÷ FS)
H1	Noto Sans Display	Semi Bold	32	2.286	40	1.25
H2	Noto Sans Display	Semi Bold	24	1.714	30	1.25
H3	Noto Sans Display	Semi Bold	20	1.429	24	1.2
H4	Noto Sans Display	Semi Bold	18	1.286	22	1.22
H5	Noto Sans Display	Semi Bold	16	1.143	22	1.38
Subtitle 1 (+btn1)	Noto Sans Display	Medium	16	1.143	22	1.38
Subtitle 2	Noto Sans Display	Semi Bold	14	1	20	1.43
Subtitle 3 (+btn2)	Noto Sans Display	Medium	14	1	20	1.43
Subtitle 4	Noto Sans Display	Semi Bold	12	0.857	16	1.33
Subtitle 5 (+btn3)	Noto Sans Display	Medium	12	0.857	16	1.33
Body 1	Noto Sans Display	Regular	16	1.143	22	1.38
Body 2	Noto Sans Display	Regular	14	1	20	1.43
Body 3	Noto Sans Display	Medium	12	0.857	16	1.33
Body 4	Noto Sans Display	Regular	12	0.857	16	1.33
Body 5	Noto Sans Display	Medium	10	0.714	14	1.4
Body 6	Noto Sans Display	Regular	10	0.714	14	1.4

Type Scale Logic

이 타입 스케일은 12px를 시작점으로, 4단계마다 증가 폭이 확장되는 규칙을 기반으로 구성됩니다.
작은 본문 텍스트부터 강조 텍스트와 헤드라인까지 자연스러운 위계를 만들 수 있도록 설계되었으며, 단계가 높아질수록 더 분명한 시각적 대비를 형성하는 것이 특징입니다.

스케일 계산은 X_n = X_n-1 + { INT[(n-2)/4] + 1 } × 2 공식을 기준으로 하며, 초기 구간은 2px 단위, 중간 구간은 4px 단위, 상위 구간은 6px 단위로 증가합니다.
이를 통해 낮은 단계에서는 미세한 차이로 가독성을 유지하고, 높은 단계에서는 더 강한 강조를 통해 구조적 위계를 명확하게 전달할 수 있습니다.

n	Calculation	Increment	Final Font Size (X_n)
1	Initial Value 12px	-	12px
2	12 + (INT[0/4]+1) x2 = 12+2	2	14px
3	14 + (INT[1/4]+1) x2 = 14+2	2	16px
4	16 + (INT[2/4]+1) x2 = 16+2	2	18px
5	18 + (INT[3/4]+1) x2 = 18+2	2	20px
6	20 + (INT[4/4]+1) x2 = 20+4	4	24px
7	24 + (INT[5/4]+1) x2 = 14+4	4	28px
8	28 + (INT[6/4]+1) x2 = 28+4	4	32px
9	32 + (INT[7/4]+1) x2 = 32+2	4	36px
10	36 + (INT[8/4]+1) x2 = 36+6	6	42px
11	42 + (INT[9/4]+1) x2 = 42+6	6	48px
12	48 + (INT[10/4]+1) x2 = 48+6	6	54px