Typography
타이포그래피는 텍스트를 읽기 쉽고 아름답게 표현하는 시각적 체계로, 폰트 선택 · 크기 · 굵기 · 행간 · 자간을 조합하여 정보의 위계와 가독성을 만들어냅니다. 서체 하나(Pretendard)로 타이틀 · 본문 · 숫자 · 캡션의 크기와 굵기 차이를 분명히 두어 위계를 만들고, 각 단계는 .t-* 유틸리티 클래스로 제공합니다.
Basic typography
한국어와 영어를 함께 쓰는 관리 콘솔의 기본 글꼴로 Pretendard 를 사용합니다. 가변 서체 하나(Regular 400 · Medium 500 · Bold 700)로 모든 굵기를 표현하며, 숫자는 자릿수가 바뀌어도 폭이 같은 고정폭 숫자(tabular numbers)로 표 · KPI 의 정렬을 유지합니다.
Pretendard 프리텐다드 Aa0123456789 · 1,284 · 99.2%
@font-face{font-family:"Pretendard";font-weight:45 920;font-style:normal;font-display:swap;src:url("fonts/PretendardVariable.woff2") format("woff2-variations")}
:root{--font-sans:"Pretendard",-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"D2Coding",monospace}
body{font-family:var(--font-sans);font-size:16px;line-height:1.65;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}Word break
개발 시 본문 · 표 · 설명 텍스트는 브라우저 기본값대로 음절 단위로 줄바꿈됩니다. 따라서 디자인에서 별도로 줄바꿈 위치를 지정하지 않아도 되고, 폭이 좁은 셀에서도 넘치지 않습니다. 제목 · 알림 · 빈 화면 문구처럼 짧고 눈에 띄는 문장만 .keep-all 로 단어 단위 줄바꿈을 적용합니다.
보안 정책이 적용되어 모든 단말이 보호되고 있습니다
기본 · 음절 단위 — 좁은 폭에서 어절 중간에서도 줄이 바뀝니다보안 정책이 적용되어 모든 단말이 보호되고 있습니다
.keep-all · 단어 단위 — 어절이 끊기지 않고 줄이 바뀝니다/* 기본: 음절 단위(브라우저 기본). 제목·알림 등 짧은 문장만 단어 단위 */
.keep-all{word-break:keep-all;overflow-wrap:anywhere}Style
Figma Text Style 이름과 1:1 인 14단계입니다. 자간은 Pretendard 권장값(크기가 작을수록 넓게)을 따르고, 행간은 px 로 고정해 컴포넌트 높이를 예측할 수 있게 합니다. 숫자에는 .t-num 을 함께 씁니다. 클래스를 클릭하면 복사됩니다.
| 명칭 | 크기 | 행간 | 자간 | 굵기 | 클래스 |
|---|---|---|---|---|---|
| Display 1 | 40px | 52px (1.3) | -0.0282em | 700 Bold | .t-display-1 |
| Display 2 | 32px | 44px (1.375) | -0.0253em | 700 Bold | .t-display-2 |
| Heading 1 | 28px | 38px (1.357) | -0.0236em | 700 Bold | .t-heading-1 |
| Heading 2 | 24px | 32px (1.333) | -0.023em | 700 Bold | .t-heading-2 |
| Heading 3 | 20px | 28px (1.4) | -0.012em | 700 Bold | .t-heading-3 |
| Heading 4 | 18px | 26px (1.444) | -0.002em | 700 Bold | .t-heading-4 |
| Title 1 | 16px | 24px (1.5) | 0.0057em | 500 Medium | .t-title-1 |
| Title 2 | 14px | 20px (1.429) | 0.0145em | 500 Medium | .t-title-2 |
| Body 1 | 16px | 26px (1.625) | 0.0057em | 400 Regular | .t-body-1 |
| Body 2 | 14px | 22px (1.571) | 0.0145em | 400 Regular | .t-body-2 |
| Label 1 | 14px | 20px (1.429) | 0.0145em | 500 Medium | .t-label-1 |
| Label 2 | 12px | 16px (1.333) | 0.0252em | 500 Medium | .t-label-2 |
| Caption 1 | 12px | 18px (1.5) | 0.0252em | 400 Regular | .t-caption-1 |
| Caption 2 | 10px | 14px (1.4) | 0.0311em | 400 Regular | .t-caption-2 |
.t-num/* JS Design System v0.6 · .t-, .keep-all · 토큰(var(--*))은 assets/style.css :root 참고 */
.t-display-1{font-size:40px;line-height:52px;font-weight:700;letter-spacing:-0.0282em}
.t-display-2{font-size:32px;line-height:44px;font-weight:700;letter-spacing:-0.0253em}
.t-heading-1{font-size:28px;line-height:38px;font-weight:700;letter-spacing:-0.0236em}
.t-heading-2{font-size:24px;line-height:32px;font-weight:700;letter-spacing:-0.023em}
.t-heading-3{font-size:20px;line-height:28px;font-weight:700;letter-spacing:-0.012em}
.t-heading-4{font-size:18px;line-height:26px;font-weight:700;letter-spacing:-0.002em}
.t-title-1{font-size:16px;line-height:24px;font-weight:500;letter-spacing:0.0057em}
.t-title-2{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0.0145em}
.t-body-1{font-size:16px;line-height:26px;font-weight:400;letter-spacing:0.0057em}
.t-body-2{font-size:14px;line-height:22px;font-weight:400;letter-spacing:0.0145em}
.t-label-1{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0.0145em}
.t-label-2{font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.0252em}
.t-caption-1{font-size:12px;line-height:18px;font-weight:400;letter-spacing:0.0252em}
.t-caption-2{font-size:10px;line-height:14px;font-weight:400;letter-spacing:0.0311em}
.t-num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.keep-all{word-break:keep-all;overflow-wrap:anywhere}