text
Display
디스플레이(Display)는 화면에서 가장 큰 텍스트로 주로 배너와 같은 마케팅 용도로 사용하며, 자유롭게 변형할 수 있으나 과도한 크기 사용은 지양한다.
| Style |
Size(pc) |
Size(mobile) |
Font weight |
Line height |
Letter spacing |
| large |
60 |
44 |
700 |
150% |
1px |
| medium |
44 |
32 |
700 |
150% |
1px |
| small |
36 |
28 |
700 |
150% |
1px |
Heading
헤딩(Heading)은 페이지 단위의 타이틀과 모듈 단위의 역할을 강조하는 데 사용하며, h2부터 h6까지 계층을 설정한다.
| Style |
Size(pc) |
Size(mobile) |
Font weight |
Line height |
Letter spacing |
| xlarge |
40 |
28 |
700 |
150% |
1px |
| large |
32 |
24 |
700 |
150% |
1px |
| medium |
24 |
22 |
700 |
150% |
0px |
| small |
19 |
19 |
700 |
150% |
0px |
| xsmall |
17 |
17 |
700 |
150% |
0px |
| xxsmall |
15 |
15 |
700 |
150% |
0px |
Body
본문과 기본 콘텐츠에 적용된다.
| Style |
Size(pc) |
Size(mobile) |
Font weight |
Line height |
Letter spacing |
| large-bold |
19 |
19 |
700 |
150% |
0px |
| medium-bold |
17 |
17 |
700 |
150% |
0px |
| small-bold |
15 |
15 |
700 |
150% |
0px |
| xsmall-bold |
13 |
13 |
700 |
150% |
0px |
| large |
19 |
19 |
400 |
150% |
0px |
| medium* |
17 |
17 |
400 |
150% |
0px |
| small |
14 |
14 |
400 |
150% |
0px |
| xsmall |
13 |
13 |
400 |
150% |
0px |
Label
컴포넌트 구성 내 label, placeholder 등에 사용한다.
| Style |
Size(pc) |
Size(mobile) |
Font weight |
Line height |
Letter spacing |
| large |
19 |
19 |
400 |
150% |
0px |
| medium |
17 |
17 |
400 |
150% |
0px |
| small |
14 |
14 |
700 |
150% |
0px |
| xsmall |
13 |
13 |
400 |
150% |
0px |
| xxsmall |
12 |
12 |
400 |
150% |
0px |