Screens pick a role, never a raw size. A role is written as size / line height / weight.
| Token |
Value |
Use |
typography.display |
28px / 1.25 / 700, tracking -0.3px |
One per screen at most: the name of the place. |
typography.title |
22px / 1.25 / 700, tracking -0.2px |
Section and dialog titles. |
typography.heading |
18px / 1.4 / 600, tracking 0px |
Card titles and group headings. |
typography.body |
16px / 1.5 / 400, tracking 0px |
Running text. |
typography.body-strong |
16px / 1.5 / 600, tracking 0px |
Emphasis inside running text. |
typography.label |
14px / 1.4 / 500, tracking 0px |
Button labels and field labels. |
typography.detail |
14px / 1.5 / 400, tracking 0px |
Descriptions, hints and secondary lines. |
typography.footnote |
12px / 1.4 / 500, tracking 0px |
Badges and timestamps. |
| Token |
Value |
Use |
font.family.sans |
Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif |
Pretendard covers Hangul, Latin and Kana with matching metrics. Where it is not loaded, Latin text falls to the system’s own font and Hangul to the system’s Korean font, in that order. |
font.size.xs |
12px |
The smallest size Hangul stays legible at. |
font.size.sm |
14px |
|
font.size.md |
16px |
Body text. Also the size below which iOS zooms the page when a field is focused. |
font.size.lg |
18px |
|
font.size.xl |
22px |
|
font.size.2xl |
28px |
|
font.weight.regular |
400 |
|
font.weight.medium |
500 |
Labels on controls: heavier than body text without shouting. |
font.weight.semibold |
600 |
|
font.weight.bold |
700 |
|
font.line-height.tight |
1.25 |
Large type and single-line labels. |
font.line-height.snug |
1.4 |
Headings and short text that may wrap. |
font.line-height.normal |
1.5 |
Body text. Hangul needs more leading than Latin at the same size. |