Pretendard 한 패밀리로 역할 스케일을 올립니다 — 크기가 아니라 역할(Display·Headline·Title·Body·Label × L·M·S)로 고릅니다.
샘플 문구
Weight 미리보기
크기 배율 — 미리보기
1.00×
상단에서 샘플 문구·Weight·크기 배율을 바꿔 15개 역할 스케일을 직접 비교해 보세요. 표본·칩을 클릭하면 클래스·토큰이 복사됩니다.
Display가장 큰 표제 — 히어로·마케팅. 절제해서 한 화면에 하나.
Display L
히어로 · 랜딩 최상단 표제.wds-type-display-l
Display M
대형 마케팅 표제.wds-type-display-m
Display S
섹션 히어로 표제.wds-type-display-s
Headline섹션 표제 — 페이지·카드 제목.
Headline L
페이지 제목.wds-type-headline-l
Headline M
주요 섹션 제목.wds-type-headline-m
Headline S
카드 · 블록 제목.wds-type-headline-s
Title소제목·강조 — 리스트·폼 그룹 헤더.
Title L
리스트 · 폼 그룹 헤더.wds-type-title-l
Title M
소제목 · 강조 라벨.wds-type-title-m
Title S
조밀한 소제목.wds-type-title-s
Body본문 — 읽기 위한 텍스트. 넉넉한 행간(1.6).
Body L
기본 본문 — 긴 읽기.wds-type-body-l
Body M
보조 본문 · 설명.wds-type-body-m
Body S
캡션 · 메타 본문.wds-type-body-s
LabelUI 라벨 — 버튼·탭·캡션. medium·약한 양수 자간.
Label L
버튼 · 큰 탭 라벨.wds-type-label-l
Label M
칩 · 배지 · 탭.wds-type-label-m
Label S
메타 · 짧은 보조 라벨.wds-type-label-s
원시 토큰 · 합성 규칙
역할 스타일은 tokens/core/typography.json composite 토큰이 SSOT로 웹(.wds-type-*)·Flutter(WizTextStyles)에 동시 생성됩니다(A3). 큰 표제일수록 자간을 좁히고(−2%) 라벨은 약한 양수 자간(+1%)으로 또렷하게 합니다.
유동(fluid) 타입 — display·headline은 뷰포트 따라 부드럽게 스케일합니다. 웹은 clamp(모바일 min, vw 보간, 데스크톱 max)로 미디어쿼리 없이 연속 스케일(모바일서 표제 과대 방지·데스크톱서 임팩트 유지), Flutter는 고정 size + OS Dynamic Type(textScaler, ADR-014)로 접근성 스케일 — 네이티브는 뷰포트-유동이 아닌 접근성-스케일이 관용구입니다(title/body/label은 양 플랫폼 고정). emphasis 티어는 후속.
한글은 음절(글자)이 아니라 어절(띄어쓰기) 단위로 끊어야 자연스럽습니다. 브라우저 기본값은 음절을 쪼개 “장바구→니”처럼 어색하게 끊깁니다. .wds-root 가 이를 전역 기본으로 막습니다.
word-break: keep-all — 어절 단위로만 줄바꿈(음절 분리 방지).
overflow-wrap: anywhere — keep-all 짝. 긴 URL·영문 토큰이 컨테이너를 넘치지 않게 어디서든 끊습니다. 둘은 항상 함께 씁니다.
소비처에서 국소 적용하거나 의도를 명시할 땐 재사용 유틸 3종을 씁니다:
.wds-keep-all — 위 두 속성을 한 번에(리셋을 못 받는 블록·third-party 위젯에).
.wds-wrap-pretty — text-wrap: pretty. 문단 고아줄(마지막 줄 단어 1개) 방지. 본문·긴 문단에 권장.
.wds-wrap-balance — text-wrap: balance. 짧은 제목·헤드라인의 줄 길이를 고르게. 2~3줄 표제에 권장(긴 본문엔 비용·줄수 제한으로 비권장).
text-wrap: pretty 는 성능을 고려해 .wds-root 전역에 강제하지 않고 유틸 + 권고로 둡니다. 제목엔 balance, 본문엔 pretty 를 기준으로 골라 쓰세요. 미지원 브라우저(text-wrap 미대응)는 무시하고 기본 줄바꿈으로 자연 폴백합니다.
표제의 유동 스케일과 본문 유틸 3종을 직접 보세요 — 아래는 전부 실제 토큰 산출물입니다(시뮬레이션 아님). 유동은 .wds-type-*의 clamp(), 유틸은 .wds-tabular-nums·.wds-text-emphasis·.wds-measure. 첫 패널에서 브라우저 창 폭을 바꾸면 표제가 따라 줄고/커지며, 미터의 현재값이 모바일(32px)↔데스크톱(48px) 사이를 실시간으로 가리킵니다.
유동 타입
표제는 뷰포트 폭을 따라 연속 스케일합니다 — 미디어쿼리 없이 모바일에선 과대를 막고 데스크톱에선 임팩트를 유지. 브라우저 창 폭을 바꿔보세요.
성장은 매일의 합
모바일 · 32px— …데스크톱 · 48px
고정폭 숫자
.wds-tabular-nums — 자릿수가 흔들리지 않게 글리프 폭을 고정(표·차트·KPI). 음수는 하이픈이 아니라 진짜 마이너스(−).
기본(비례폭)9,040,911−441,200−118,2008,481,511
tabular ✓9,040,911−441,200−118,2008,481,511
본문 강조
.wds-text-emphasis — 크기·색은 그대로, 굵기만 한 단계. bold 남발 없이 위계.
이번 분기 활성 사용자는 전월 대비 38% 늘었고, 이탈률은 절반으로 줄었습니다.
(강조 없는 같은 문장) 이번 분기 활성 사용자는 전월 대비 38% 늘었고, 이탈률은 절반으로 줄었습니다.
읽기 폭
.wds-measure — 한 줄 ~65자로 제한해 긴 글의 가독성을 지킴.
좋은 본문은 한 줄이 너무 길어지면 다음 줄 첫 글자를 눈이 찾기 어려워집니다. 한 줄을 약 65자로 제한하면 시선이 자연스럽게 다음 줄로 떨어져 긴 글도 편하게 읽힙니다.
↔ 약 65ch
.wds-tabular-nums는 Flutter TextStyle.tabular 확장과 1:1 대응합니다(크로스플랫폼 동일 규칙).
숫자·부호는 별도 폰트를 쓰지 않습니다. Pretendard 한 패밀리 + tabular-nums(고정폭 숫자) OpenType 피처면 충분합니다 — 숫자만 다른 폰트로 빼면 본문과의 일관성이 깨져 오히려 지양합니다. “정상적인 기호”의 핵심은 폰트 교체가 아니라 올바른 문자를 쓰는 것입니다: 음수는 하이픈 -이 아니라 진짜 마이너스 −(U+2212), 본문 따옴표는 곧은 '"이 아니라 곡선 따옴표(빌드 시 remark-smartypants가 자동 변환 — 코드·속성은 보존), 줄임표는 점 세 개가 아니라 …. Pretendard에는 이 글리프가 모두 들어 있어 폴백 없이 렌더됩니다.
광학 사이징(opsz)은 Pretendard Variable이 굵기(wght) 단일 축이라 적용 대상이 아닙니다(폰트에 광학 축 없음). 텍스트 박스 트림(text-box, 반-리딩 제거)은 브라우저 지원이 아직 한정적이라 후속 과제로 둡니다.
곡률은 6단계입니다 — 각 토큰을 측정 블루프린트와 실물 표본으로 나란히 렌더합니다(셀 클릭 = var(--wds-radius-*) 복사). xxl(28px)은 xl(20)과 알약(full) 사이의 “넉넉히 둥근” 단계입니다.
중첩 표면은 동심(concentric) 규칙으로 곡률을 정렬합니다 — 안쪽 반지름 = 바깥 반지름 − 패딩.
아래에서 바깥 반지름과 패딩을 직접 맞춰, 안쪽 곡률이 어떤 토큰으로 떨어지는지 확인하세요.
바깥 반지름radius.lg · 14px
패딩space-1 · 4px
r14
r10
바깥 표면 안에 패딩만큼 안쪽 표면을 띄운 모습 — 슬라이더를 움직이면 곡률이 따라 정렬됩니다.
안쪽=max(0,14−4)=10px
calc(--wds-radius-lg−--wds-space-1)
동심 정합은 정확값(바깥 − 패딩)을 그대로 써야 합니다 — 가까운 토큰으로 스냅하면 곡률 중심이 어긋나 동심이 깨집니다. 토큰에 딱 떨어지지 않으면 위 calc()로 관계를 유지하거나(권장) 패딩을 조정해 토큰에 떨어뜨리세요. WDS 동심 반경 규칙도 이 값을 자동 도출하며, 직각이 싫으면 0 대신 최소 반지름으로 바닥을 둡니다(.concentric(minimum:)).
모서리의 곡률 자체도 끌어올릴 수 있습니다 — 원호(현행)에서 WDS 연속 곡률(스쿼클, superellipse(2))로.
곡률은 반지름·동심 공식과 직교합니다(같은 radius.lg 위에서 곡선만 교체). 지원 브라우저(Chromium 139+)에서만
적용되고 그 외에는 원호로 자연 폴백하는 점진적 향상입니다. (실험적 · 기획안 08)
이 브라우저: 미지원 — 원호로 표시CSS corner-shape · Chromium 139+ · 미지원 시 border-radius 원호로 자연 폴백
WDS의 깊이는 틴트가 1차, 그림자가 2차입니다 — 레벨이 오를수록 surface-container 틴트가
한 단 진해지고(다크에서는 밝아지고) 그림자는 보조로만 거듭니다. 브랜드 심볼의 “겹침의 농도”(Quintal
Bloom)를 표면 위계로 옮긴 것입니다. 아래에서 테마를 바꿔 틴트·그림자 거동을 직접 확인하세요.
엘리베이션은 숫자가 아니라 역할로 명명합니다(flat·raised·overlay·modal). 유틸 클래스
.wds-elevation-<역할> 한 줄이 표면 틴트와 그림자를 함께 입히며, surface-container 5티어 중
가운데 base(ambient 예약)를 건너뛰어 매핑합니다(새 색 정의 0, 별칭 소비만).
레벨
클래스
표면 티어
그림자
권장 본문 잉크
용처
flat
.wds-elevation-flat
surface-container-lowest
없음
text-subtle 이상 (flat만 라이트 AA)
휴지 페이지·베이스 카드
raised
.wds-elevation-raised
surface-container-low
sm
text-muted 이상
카드·올라온 컨트롤
overlay
.wds-elevation-overlay
surface-container-high
md
text-muted 이상
드롭다운·팝오버·툴팁
modal
.wds-elevation-modal
surface-container-highest
lg
text-muted 이상
모달·시트·다이얼로그
본문 잉크 — text-subtle은 라이트에서 flat에서만 AA(4.5:1)입니다(raised 위 4.38:1 미달). raised 이상 티어 위 본문은 text-muted(또는 text)를 쓰세요. 다크에서는 전 티어에서 text-subtle이 AA를 유지합니다.
안티패턴 — 그림자만 키운 카드는 다크에서 위계가 사라집니다(그림자 비가시). 항상 표면 티어를 먼저 올리고 그림자는 보조로만 더하세요.
고대비 · forced-colors — 인접 티어 틴트 대비는 3:1 미만이라, 비텍스트 경계 대비(3:1)가 필요하면 1px outline(전 티어 ≥3.5:1)을 함께 입히세요(스튜디오 “보더” 토글로 미리보기). @media (forced-colors: active)에서는 배경·그림자가 제거되므로 보더가 유일한 깊이 단서가 됩니다.
동심 라운딩 — 중첩 표면의 안쪽 반지름 = 바깥 반지름 − 간격. 라운딩 섹션의 concentric 규칙을 따릅니다.