Typography

Pretendard Variable v1.3.9 dynamic subset을 jsDelivr에서 한 번 로드합니다. 요청이 실패하면 시스템 산세리프 fallback이 즉시 보입니다. 로더는 CSS stylesheet이며 JavaScript FontFace API는 사용하지 않습니다.

Glyph sample

한글 타이포그래피 Hangul Typography 0123456789

Untrusted probe (must render as text): <script>alert(1)</script>

Family, weights, loader

Sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif
Mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace
Weights: 400 regular, 500 medium, 600 semibold, 700 bold (variable axis 45–920)
Fallback: Pretendard Variable 미로드 시 Pretendard, 이어서 시스템 UI/한글 산세리프, 마지막 sans-serif
Loader: preconnect jsDelivr + stylesheet as=style crossorigin. No SRI, no JS loader. https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css

Semantic roles

Display

큰 제목 Display 가나다 123

Class: type-display
Family: --text-display-family = var(--font-sans)
Size: --text-display-size = var(--font-size-3xl)
Weight: --text-display-weight = var(--font-weight-bold)
Leading: --text-display-leading = var(--line-height-tight)
Tracking: --text-display-tracking = var(--letter-spacing-tight)

Title

페이지 제목 Title 가나다 123

Class: type-title
Family: --text-title-family = var(--font-sans)
Size: --text-title-size = var(--font-size-2xl)
Weight: --text-title-weight = var(--font-weight-bold)
Leading: --text-title-leading = var(--line-height-tight)
Tracking: --text-title-tracking = var(--letter-spacing-tight)

Heading

섹션 제목 Heading 가나다 123

Class: type-heading
Family: --text-heading-family = var(--font-sans)
Size: --text-heading-size = var(--font-size-xl)
Weight: --text-heading-weight = var(--font-weight-semibold)
Leading: --text-heading-leading = var(--line-height-snug)
Tracking: --text-heading-tracking = var(--letter-spacing-tight)

Heading SM

작은 제목 Heading SM 가나다 123

Class: type-heading-sm
Family: --text-heading-sm-family = var(--font-sans)
Size: --text-heading-sm-size = var(--font-size-lg)
Weight: --text-heading-sm-weight = var(--font-weight-semibold)
Leading: --text-heading-sm-leading = var(--line-height-snug)
Tracking: --text-heading-sm-tracking = var(--letter-spacing-normal)

Body LG

큰 본문 Body LG 가나다 ABC 0123456789

Class: type-body-lg
Family: --text-body-lg-family = var(--font-sans)
Size: --text-body-lg-size = var(--font-size-lg)
Weight: --text-body-lg-weight = var(--font-weight-regular)
Leading: --text-body-lg-leading = var(--line-height-relaxed)
Tracking: --text-body-lg-tracking = var(--letter-spacing-normal)

Body

기본 본문 Body 가나다 ABC 0123456789

Class: type-body
Family: --text-body-family = var(--font-sans)
Size: --text-body-size = var(--font-size-md)
Weight: --text-body-weight = var(--font-weight-regular)
Leading: --text-body-leading = var(--line-height-relaxed)
Tracking: --text-body-tracking = var(--letter-spacing-normal)

Body SM

작은 본문 Body SM 가나다 ABC 0123456789

Class: type-body-sm
Family: --text-body-sm-family = var(--font-sans)
Size: --text-body-sm-size = var(--font-size-sm)
Weight: --text-body-sm-weight = var(--font-weight-regular)
Leading: --text-body-sm-leading = var(--line-height-normal)
Tracking: --text-body-sm-tracking = var(--letter-spacing-normal)

Label

폼 레이블 Label 가나다 123

Class: type-label
Family: --text-label-family = var(--font-sans)
Size: --text-label-size = var(--font-size-sm)
Weight: --text-label-weight = var(--font-weight-semibold)
Leading: --text-label-leading = var(--line-height-snug)
Tracking: --text-label-tracking = var(--letter-spacing-wide)

Caption

보조 설명 Caption 가나다 123

Class: type-caption
Family: --text-caption-family = var(--font-sans)
Size: --text-caption-size = var(--font-size-xs)
Weight: --text-caption-weight = var(--font-weight-regular)
Leading: --text-caption-leading = var(--line-height-normal)
Tracking: --text-caption-tracking = var(--letter-spacing-normal)

Code

const count = 42;

Class: type-code
Family: --text-code-family = var(--font-mono)
Size: --text-code-size = var(--font-size-sm)
Weight: --text-code-weight = var(--font-weight-regular)
Leading: --text-code-leading = var(--line-height-normal)
Tracking: --text-code-tracking = var(--letter-spacing-normal)

Data

1,234,567.89

Class: type-data
Family: --text-data-family = var(--font-sans)
Size: --text-data-size = var(--font-size-md)
Weight: --text-data-weight = var(--font-weight-medium)
Leading: --text-data-leading = var(--line-height-normal)
Tracking: --text-data-tracking = var(--letter-spacing-normal)