Semantic Typography Token
Heading
대제목(표제)의 역할을 해요. 사용자에게 다른 폰트들보다 크게 보여요.
$semantic.typography.h1
Font Size
$scale.dimension.font-size-1000
48px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.none
0
$semantic.typography.h2
Font Size
$scale.dimension.font-size-900
42px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.none
0
$semantic.typography.h3
Font Size
$scale.dimension.font-size-800
34px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.none
0
$semantic.typography.h4
Font Size
$scale.dimension.font-size-700
32px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.none
0
Title
하위 항목의 제목의 역할을 해요, 주로 하나의 섹션, 챕터를 나타내요.
$semantic.typography.title1Regular
Font Size
$scale.dimension.font-size-500
24px
Font Weight
$static.font-weight.regular
regular
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.none
0
$semantic.typography.title1Bold
Font Size
$scale.dimension.font-size-500
24px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.none
0
$semantic.typography.title2Regular
Font Size
$scale.dimension.font-size-400
20px
Font Weight
$static.font-weight.regular
regular
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.none
0
$semantic.typography.title2Bold
Font Size
$scale.dimension.font-size-400
20px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.none
0
$semantic.typography.title3Regular
Font Size
$scale.dimension.font-size-300
18px
Font Weight
$static.font-weight.regular
regular
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.none
0
$semantic.typography.title3Bold
Font Size
$scale.dimension.font-size-300
18px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.none
0
Subtitle
부가제목을 표기하고, Title의 보조 역할을 할 수 있어요.
$semantic.typography.subtitle1Regular
Font Size
$scale.dimension.font-size-200
16px
Font Weight
$static.font-weight.regular
regular
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
$semantic.typography.subtitle1Bold
Font Size
$scale.dimension.font-size-200
16px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
$semantic.typography.subtitle2Regular
Font Size
$scale.dimension.font-size-100
14px
Font Weight
$static.font-weight.regular
regular
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
$semantic.typography.subtitle2Bold
Font Size
$scale.dimension.font-size-100
14px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
Body-L
넓은 행간값을 가지고 있어요.
본문의 모든 내용과 정 보를 포함하여 전달해야 하는 글에 사용해요.
요약되지 않은 장문의 글일 경우에 사용하는 게 가장 좋아요.
$semantic.typography.bodyL1Regular
Font Size
$scale.dimension.font-size-200
16px
Font Weight
$static.font-weight.regular
regular
Line Height
$static.line-height.static-large
162%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
$semantic.typography.bodyL1Bold
Font Size
$scale.dimension.font-size-200
16px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-large
162%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
$semantic.typography.bodyL2Regular
Font Size
$scale.dimension.font-size-100
14px
Font Weight
$static.font-weight.regular
regular
Line Height
$static.line-height.static-medium
150%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
$semantic.typography.bodyL2Bold
Font Size
$scale.dimension.font-size-100
14px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-medium
150%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
Body-M
본문의 간단한 내용을 나타내요.
요약된 정보거나, 요약해서 전달할 수 있는 정보 글에 사용할 수 있어요.
$semantic.typography.bodyM1Regular
Font Size
$scale.dimension.font-size-200
16px
Font Weight
$static.font-weight.regular
regular
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
$semantic.typography.bodyM1Bold
Font Size
$scale.dimension.font-size-200
16px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
$semantic.typography.bodyM2Regular
Font Size
$scale.dimension.font-size-100
14px
Font Weight
$static.font-weight.regular
regular
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
$semantic.typography.bodyM2Bold
Font Size
$scale.dimension.font-size-100
14px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
Caption
부가설명을 위한 작은 텍스트를 표기할 때 사용해요.
$semantic.typography.caption1Regular
Font Size
$scale.dimension.font-size-75
13px
Font Weight
$static.font-weight.regular
regular
Line Height
$static.line-height.static-medium
150%
Letter Spacing
$scale.letter-spacing.narrow-400
-0.04em
$semantic.typography.caption1Bold
Font Size
$scale.dimension.font-size-75
13px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-medium
150%
Letter Spacing
$scale.letter-spacing.narrow-400
-0.04em
$semantic.typography.caption2Regular
Font Size
$scale.dimension.font-size-50
12px
Font Weight
$static.font-weight.regular
regular
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.narrow-400
-0.04em
$semantic.typography.caption2Bold
Font Size
$scale.dimension.font-size-50
12px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.narrow-400
-0.04em
Label
Button, Chip, Tag같은 UI에서 범용적으로 사용해요.
~을 붙이다는 의미를 가지고 사용자가 확인해야는 정보의 구분을 위한 키워드를 제공하거나 분류할 수 있도록 하는 역할을 해요.
$semantic.typography.label1Regular
Font Size
$scale.dimension.font-size-300
18px
Font Weight
$static.font-weight.regular
regular
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
$semantic.typography.label1Bold
Font Size
$scale.dimension.font-size-300
18px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
$semantic.typography.label2Regular
Font Size
$scale.dimension.font-size-200
16px
Font Weight
$static.font-weight.regular
regular
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
$semantic.typography.label2Bold
Font Size
$scale.dimension.font-size-200
16px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
$semantic.typography.label3Regular
Font Size
$scale.dimension.font-size-100
14px
Font Weight
$static.font-weight.regular
regular
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
$semantic.typography.label3Bold
Font Size
$scale.dimension.font-size-100
14px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
$semantic.typography.label4Regular
Font Size
$scale.dimension.font-size-50
12px
Font Weight
$static.font-weight.regular
regular
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
$semantic.typography.label4Bold
Font Size
$scale.dimension.font-size-50
12px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
$semantic.typography.label5Regular
Font Size
$scale.dimension.font-size-25
11px
Font Weight
$static.font-weight.regular
regular
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
$semantic.typography.label5Bold
Font Size
$scale.dimension.font-size-25
11px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
$semantic.typography.label6Regular
Font Size
$scale.dimension.font-size-10
10px
Font Weight
$static.font-weight.regular
regular
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.none
0
$semantic.typography.label6Bold
Font Size
$scale.dimension.font-size-10
10px
Font Weight
$static.font-weight.bold
bold
Line Height
$static.line-height.static-small
135%
Letter Spacing
$scale.letter-spacing.none
0
Scale Typography Token
Font Size
$scale.dimension.font-size-10
10px
$scale.dimension.font-size-25
11px
$scale.dimension.font-size-50
12px
$scale.dimension.font-size-75
13px
$scale.dimension.font-size-100
14px
$scale.dimension.font-size-150
15px
$scale.dimension.font-size-200
16px
$scale.dimension.font-size-300
18px
$scale.dimension.font-size-400
20px
$scale.dimension.font-size-500
24px
$scale.dimension.font-size-600
26px
$scale.dimension.font-size-700
32px
$scale.dimension.font-size-800
34px
$scale.dimension.font-size-900
42px
$scale.dimension.font-size-1000
48px
$scale.dimension.font-size-1100
54px
$scale.dimension.font-size-1200
60px
$scale.dimension.font-size-1300
72px
Font Weight
$static.font-weight.regular
regular
$static.font-weight.bold
bold
Line Height
$static.line-height.static-small
135%
$static.line-height.static-medium
150%
$static.line-height.static-large
162%
Letter Spacing
$scale.letter-spacing.narrow-200
-0.02em
$scale.letter-spacing.narrow-300
-0.03em
$scale.letter-spacing.narrow-400
-0.04em
$scale.letter-spacing.none
0