Typography

글자는 쓰는 곳을 뜻하는 이름으로 골라요. 이름 하나가 크기, 행간, 굵기를 함께 정해요. 원하는 크기가 없으면 추가 가이드를 보고 바꾸거나 더하세요.

사용 예시

이름

제목, 본문, 라벨처럼 쓰는 곳이 정해진 글자에 써요.

display주문부터 배송까지

title주문 상세

section결제 수단

subsection받는 사람

prose주문한 순서대로 보여 줘요.

value1,204,000

label저장

caption최근 30일 기준이에요.

microNEW

tsx

<p className="text-display">주문부터 배송까지</p><p className="text-title">주문 상세</p><p className="text-section">결제 수단</p><p className="text-subsection">받는 사람</p><p className="text-prose">주문한 순서대로 보여 줘요.</p><p className="text-value font-mono">1,204,000</p><p className="text-label">저장</p><p className="text-caption">최근 30일 기준이에요.</p><p className="text-micro">NEW</p>

스케일

이름에 없는 크기가 필요할 때 써요. 숫자가 px 크기이고 굵기는 400이에요.

Agt10

Agt11

Agt12

Agt13

Agt14

Agt16

Agt18

Agt20

Agt24

Agt28

Agt32

Agt40

Agt48

Agt56

Agt64

tsx

<p className="text-t28 font-mono">1,204</p><p className="text-t64 font-mono">14:30</p>

이름과 스케일

결제 금액1,204,000

권장

뜻이 맞는 이름이 없으면 스케일을 써요. 카드의 큰 숫자는 text-t28이에요.

결제 금액1,204,000

지양

크기가 같다고 text-display를 쓰면 숫자까지 굵어지고, 히어로 크기를 바꾸면 숫자도 함께 바뀌어요.

화면 폭

prose와 value는 640px 아래에서 커져요.

640px 아래

주문한 순서대로 보여 줘요.

1,204,000

640px 위

주문한 순서대로 보여 줘요.

1,204,000

tsx

<p className="text-prose">주문한 순서대로 보여 줘요.</p><p className="text-value font-mono">1,204,000</p>

고정폭 글꼴

주문 번호, 금액처럼 시스템이 만든 값에 font-mono를 붙여요. code, pre, kbd, samp는 붙이지 않아도 돼요.

주문 번호A-2026-0831-0042

결제 금액0000001204000

tsx

<div className="flex items-center justify-between">  <span className="text-label">주문 번호</span>  <span className="text-value font-mono">A-2026-0831-0042</span></div><div className="flex items-center justify-between">  <span className="text-label">결제 금액</span>  <span className="text-value font-mono">0000001204000</span></div>

덧붙이기

행간, 굵기, 글꼴, 색은 이름 위에 덧붙이고, 크기가 다르면 이름을 바꿔요. 행간은 leading-16처럼 숫자로 적어요.

14:30

1,204개

tsx

<p className="text-t64 leading-16 font-mono">14:30</p><p className="text-t32 font-medium">1,204개</p>

컨트롤

권장

글자 크기는 size가 정해요. lg는 높이 40px에 글자 16px이에요.

지양

className으로 글자 크기를 덮으면 높이와 글자가 어긋나요.

추가 가이드

값 바꾸기

전역 CSS에 적어요. 이름은 3줄을 함께 바꾸고, prose와 value는 --pds-prose, --pds-value에 640px 양쪽 값을 적어요.

css

@import "tailwindcss";@import "@pantoia/ui/tailwind.css";/* 이름 하나. 크기, 행간, 굵기를 함께 적어요 */@theme {  --text-caption: 12px;  --text-caption--line-height: 16px;  --text-caption--font-weight: 400;}/* prose와 value. 640px 아래 값과 위 값 */:root {  --pds-prose: 17px; --pds-prose-lh: 25px;  @variant sm { --pds-prose: 15px; --pds-prose-lh: 23px; }}

글꼴 바꾸기

init이 전역 CSS에 추가한 Pretendard 줄을 쓸 글꼴로 바꾸고, --font-sans에 그 글꼴 이름을 적어요. 고정폭 글꼴은 --font-mono예요.

css

@import "tailwindcss";@import "@pantoia/ui/tailwind.css";@import "@fontsource-variable/noto-sans-kr";@theme {  --font-sans: "Noto Sans KR Variable", sans-serif;}

새 값 더하기

이름에 없는 크기와 굵기가 필요할 때 써요. tv.ts에서는 text 목록에 더해요.

css

/* 크기, 행간, 굵기가 한 벌이에요. text-intro처럼 써요 */@theme {  --text-intro: 18px;  --text-intro--line-height: 26px;  --text-intro--font-weight: 400;}

명세

글자

값은 크기 / 행간 / 굵기예요. 값이 2개면 640px 아래, 위 순이에요.

글자
이름	값	설명
이름
text-display	28 / 38 / 700	홈 히어로
text-title	24 / 32 / 700	페이지 제목
text-section	20 / 27 / 700	섹션 제목, Dialog 제목
text-subsection	16 / 22 / 700	카드 제목
text-prose	16 / 24 / 400, 14 / 22 / 400	본문, Callout
text-value	16 / 22 / 400, 14 / 19 / 400	Input, Select의 값
text-label	14 / 19 / 500	라벨, 버튼, 탭
text-caption	13 / 18 / 400	도움말, Tooltip
text-micro	11 / 15 / 500	Badge, Kbd
스케일
text-t10	10 / 14 / 400
text-t11	11 / 15 / 400
text-t12	12 / 16 / 400
text-t13	13 / 18 / 400
text-t14	14 / 19 / 400
text-t16	16 / 22 / 400	size가 lg인 컨트롤
text-t18	18 / 24 / 400
text-t20	20 / 27 / 400
text-t24	24 / 32 / 400
text-t28	28 / 38 / 400
text-t32	32 / 43 / 400
text-t40	40 / 54 / 400
text-t48	48 / 65 / 400
text-t56	56 / 76 / 400
text-t64	64 / 86 / 400
글꼴과 굵기
font-sans	Pretendard Variable	기본 글꼴
font-mono	JetBrains Mono	한글은 Pretendard로 나와요
font-normal	400
font-medium	500
font-bold	700