TypographyTypography

Pretendard 하나와 코드용 Geist Mono를 씁니다. 글자 스타일은 13개이고, 같은 이름이 플랫폼마다 다른 크기를 가집니다.Pretendard for text and Geist Mono for code. There are 13 text styles, and one style name carries a different size per platform.

서체와 굵기Typeface and weights

본문 서체는 Pretendard Variable, 코드는 Geist Mono Variable입니다. 굵기는 regular 400, medium 500, semibold 600, bold 700 네 가지만 씁니다.Body text uses Pretendard Variable; code uses Geist Mono Variable. Four weights ship: regular 400, medium 500, semibold 600, bold 700.

글자 스타일Text styles

크기와 줄 높이는 Figma Typography 보드(26:2)의 표를 그대로 옮겼습니다. 웹은 기본값이 Web이고, 데스크톱 앱은 data-platform="desktop", 모바일 웹은 data-platform="mobile"을 상위 요소에 둡니다. 자간은 em 단위라 크기가 바뀌어도 비율이 유지됩니다.Sizes and line heights come straight from the Figma Typography board (26:2). Web is the default; a desktop app sets data-platform="desktop" and mobile web sets data-platform="mobile" on an ancestor element. Tracking is in em, so the ratio survives a size change.

스타일Style webdesktopmobile굵기 · 자간Weight · tracking
display-lg 56 / 68 48 / 58 36 / 44 700 · -0.03em
display-md 44 / 52 40 / 48 30 / 36 700 · -0.025em
title-lg 32 / 40 28 / 36 24 / 32 600 · -0.02em
title-md 24 / 32 22 / 28 20 / 28 600 · -0.015em
title-sm 20 / 28 18 / 26 18 / 26 600 · -0.01em
body-lg 18 / 30 16 / 26 17 / 28 400 · -0.008em
body-md 16 / 26 14 / 22 16 / 26 400 · -0.005em
body-sm 14 / 22 13 / 20 14 / 22 400 · -0.002em
label-lg 16 / 22 14 / 20 16 / 22 500 · -0.005em
label-md 14 / 20 13 / 18 14 / 20 500 · -0.003em
label-sm 12 / 16 11 / 16 12 / 16 500 · 0em
caption 12 / 18 11 / 18 12 / 18 400 · 0.005em
code 14 / 22 13 / 20 13 / 20 400 · 0em

규칙Rules

  • 13개 스타일만 씁니다. 없는 크기가 필요하면 세 플랫폼 값을 함께 토큰으로 추가합니다.Use only the 13 styles. When a size is missing, add it as a token for all three platforms at once.
  • 본문 문단 뒤에는 빈 줄 대신 0.75em을 띄웁니다.Body paragraphs get 0.75em of space after them instead of an empty line.
  • 한국어는 단어 단위로 줄을 바꿉니다(word-break: keep-all).Korean wraps between words (word-break: keep-all).