Foundations

Typography

Designed around reading speed and the order of information, so the brand's big statements and the product's small guidance connect naturally.읽는 속도와 정보의 순서를 고려합니다. 브랜드의 큰 문장과 제품의 작은 안내가 자연스럽게 연결되도록 설계합니다.

Font family

Pretendard Variable, with well-balanced Korean and Latin proportions, is the default typeface. The bundled dynamic subset loads only the glyphs a page needs.한글과 라틴 문자의 비례가 고른 Pretendard Variable을 기본 서체로 사용합니다. 저장소에 포함된 다이내믹 서브셋으로 필요한 글자만 불러옵니다.

Pretendard VariableAa 뒹글

400 / where meeting becomes possibility만남이 가능성이 되는 곳500 / where meeting becomes possibility만남이 가능성이 되는 곳600 / where meeting becomes possibility만남이 가능성이 되는 곳700 / where meeting becomes possibility만남이 가능성이 되는 곳800 / where meeting becomes possibility만남이 가능성이 되는 곳

CSS

font-family: var(--dy-font-sans);
/* 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif */

Type scale

Size, line height, letter spacing, and weight are defined as one set. Use Display and Heading for brand statements, and Body and Label for product information.크기, 줄 높이, 자간, 두께를 한 묶음으로 정의합니다. 브랜드 문장에는 Display와 Heading을, 제품 정보에는 Body와 Label을 사용합니다.

Display & Heading

Things come together.Things come together.

display-1
72px / 1 / 700

Where new connections begin새로운 연결의 시작

display-2
56px / 1.05 / 700

Experiences that connect possibilities가능성을 연결하는 경험

heading-1
40px / 1.2 / 700

Where interests meet관심사가 만나는 곳

heading-2
30px / 1.3 / 650

Today's new connections오늘의 새로운 연결

heading-3
22px / 1.4 / 650

Body & Label

Different ideas come together to make everyday life better.서로 다른 생각이 만나 더 나은 일상을 만듭니다.

body-lg
18px / 1.7 / 400

People, technology, and ideas meet to create new possibilities.사람, 기술, 아이디어가 만나 새로운 가능성을 만듭니다.

body
16px / 1.7 / 400

Choose interests관심사 선택하기

label
14px / 1.5 / 600

Last updated / Oct 7, 2026마지막 업데이트 / 2026.10.07

caption
12px / 1.5 / 500

Korean text & numbers한글과 숫자

Do권장

Break Korean lines at meaningful word boundaries (word-break: keep-all). Use font-variant-numeric: tabular-nums for numbers people compare, like prices and dates.문장은 의미 단위로 줄을 바꿉니다(word-break: keep-all). 금액, 날짜처럼 비교하는 숫자는 font-variant-numeric: tabular-nums를 사용합니다.

Don't지양

Don't shrink body text below 14px or tighten Korean letter spacing to fit more information. Don't use the tight tracking of large headlines on body text.본문을 14px 미만으로 줄이거나, 한글 자간을 과하게 좁혀 정보 밀도를 높이지 않습니다. 대형 헤드라인의 좁은 자간을 본문에 쓰지 않습니다.

Using tokens토큰 사용

CSS

.page-title {
  font: var(--dy-text-heading-1);
  letter-spacing: var(--dy-text-heading-1-tracking);
}

#Font family

#Type scale

#Display & Heading

#Body & Label

#Korean text & numbers한글과 숫자