Typography
폰트는 정보를 전달하고 일관된 경험을 제공하는 중요한 요소입니다.
Alpha Code에서 사용하는 대표적인 폰트는 ‘Pretandard’입니다. 프리텐다드 폰트는 고유의 스타일을 가지고 있으면서도 과하지 않아서, 다양한 디자인에 잘 어울리는 장점이 있습니다.
Pretendard
프리텐다드는 SIL 오픈 폰트 라이선스로, 다양한 포맷과 137개의 언어를 지원합니다.
가나다
ABC
abc
123
@#!?*
프리텐다드 폰트를 쓸 수 없는 상황에선 프리텐다드의 한글 바탕이 된 Noto Sans CJK KR를 사용합니다
사용 가이드
텍스트의 위계에 따라 폰트의 크기 및 자족을 아래와 같이 사용합니다.
| Style | Size (px) | Size (rem) | Weight | Line Height | Name |
|---|---|---|---|---|---|
| Heading 3xl | 30 | 1.875 | Bold | 150% | --font-head-bold-3xl |
| Heading 2xl | 24 | 1.5 | Bold | 150% | --font-head-bold-2xl |
| Heading xl | 20 | 1.25 | Bold | 130% | --font-head-bold-xl |
| Heading lg | 18 | 1.125 | Bold | 130% | --font-head-bold-lg |
| Body lg | 18 | 1.125 | Bold | 120% | --font-body-bold-lg |
| Body md | 16 | 1 | Medium | 120% | --font-body-medium-md |
| Body md | 16 | 1 | Regular | 120% | --font-body-regular-md |
| Body sm | 14 | 0.875 | Bold | 120% | --font-body-bold-sm |
| Body sm | 14 | 0.875 | Medium | 120% | --font-body-medium-sm |
| Body sm | 14 | 0.875 | Regular | 120% | --font-body-regular-sm |
| Body xs | 12 | 0.75 | Bold | 120% | --font-body-bold-xs |
| Body xs | 12 | 0.75 | Medium | 120% | --font-body-medium-xs |
| Body xs | 12 | 0.75 | Regular | 120% | --font-body-regular-xs |
| Detail 2xs | 10 | 0.625 | Regular | 120% | --font-detail-2xs |
Hierarchy
Heading, Body, Detail 등 기본이 되는 텍스트 계층을 정의합니다.
Heading 2xl
->
Heading xl
->
Heading lg
->
Body sm
->
Body xs
->
페이지 타이틀
콘텐츠 타이틀
콘텐츠 서브 타이틀
주요 콘텐츠
주요 콘텐츠의 보조 콘텐츠