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