타이포그래피
작성 중Pretendard, 앱 본문·보조·제목, 마케팅 제목
글자 크기
글꼴은 Pretendard입니다. 오른쪽 위에서 색 모드·크기 모드를 바꾸면 이 화면의 견본도 함께 바뀝니다.
- caption정돈된 업무 흐름보조 정보, 메타데이터
- body정돈된 업무 흐름앱 본문과 목록
- title정돈된 업무 흐름페이지 제목
- headline정돈된 업무 흐름마케팅 섹션 제목
- display정돈된 업무 흐름마케팅 첫 화면 제목
토큰
Tailwind에서는 text-caption, text-body, text-title, text-headline, text-display로 씁니다. shadcn 컴포넌트의 text-xs·text-sm은 caption·body를 따릅니다.
| 토큰 | 기본 | 큰 글씨 | 설명 |
|---|---|---|---|
font.size.caption--ds-font-size-caption | 12px {size.12} | 15px {size.15} | |
font.size.body--ds-font-size-body | 14px {size.14} | 17px {size.17} | |
font.size.title--ds-font-size-title | 20px {size.20} | 24px {size.24} | |
font.size.headline--ds-font-size-headline | 28px {size.28} | 32px {size.32} | |
font.size.display--ds-font-size-display | 48px {size.48} | 56px {size.56} | |
font.leading.caption--ds-font-leading-caption | 16px {size.16} | 20px {size.20} | |
font.leading.body--ds-font-leading-body | 20px {size.20} | 26px {size.26} | |
font.leading.title--ds-font-leading-title | 28px {size.28} | 32px {size.32} | |
font.leading.headline--ds-font-leading-headline | 36px {size.36} | 40px {size.40} | |
font.leading.display--ds-font-leading-display | 56px {size.56} | 64px {size.64} |
정하지 않은 것
제안서의 마케팅 제목 모바일 기준(32~40px)에 맞는 토큰이 아직 없습니다. 지금 랜딩 예제는 좁은 화면에서 headline(28px)을 씁니다.