Typography
PAI Design 타이포그래피 token과 텍스트 계층 사용 기준을 소개해요.
PAI Design typography는 본문, 라벨, 제목을 같은 기준으로 나누기 위한 token 체계예요. 이 문서는 문장 톤을 다루는 Writing과 달리, 화면에서 텍스트를 어떤 크기와 두께, 줄 높이로 보여줄지 설명해요.
Overview
현재 PAI Design typography는 atomic token과, 그 조합인 textStyles 2단계로 구성돼요. 작은 본문부터 큰 제목과 display text까지 한 세트의 기준으로 다룰 수 있게 만들었어요.
| 구분 | 예시 | 언제 쓰나요 |
|---|---|---|
| Text style | textStyles.body.md, textStyles.title.lg, textStyles.display.sm | 화면에서 반복되는 텍스트 조합을 바로 적용할 때 사용해요. |
| Atomic token | font.size.md, font.size.3xl, font.weight.semibold, lineHeight.md | 새로운 text style을 만들거나 세부 조합을 조정할 때 사용해요. |
컴포넌트와 레시피에서는 가능하면 atomic token을 매번 다시 조합하기보다 textStyles를 먼저 사용해요. 새로운 조합이 정말 필요할 때만 atomic token으로 내려가요.
기본 사용법
텍스트 스타일이 이미 있다면 textStyles를 먼저 사용해요.
import { textStyles, tokenVars } from "@pai-design/tokens";
const titleStyle = {
...textStyles.title.lg,
color: tokenVars["color.fg.default"],
};보조 설명은 textStyles.body.sm을, 기본 본문은 textStyles.body.md를 사용해요. 버튼이나 짧은 컨트롤 라벨은 textStyles.label.*을, 더 큰 제목은 textStyles.title.*이나 textStyles.display.*를 사용해요.
Text Styles
현재 PAI Design은 body, label, title, display 4계열 text style을 제공해요. 이 조합은 현재 컴포넌트에서 자주 쓰는 텍스트 패턴을 기준으로 만들었어요. 더 큰 제목이 필요해도 이 체계 안에서 size만 늘려 대응할 수 있어요.
| 이름 | 미리보기 | 구성 |
|---|---|---|
textStyles.body.xs | PAI Design | fontFamily textStyle.body.xs.fontFamilyfontSize textStyle.body.xs.fontSizefontWeight textStyle.body.xs.fontWeightlineHeight textStyle.body.xs.lineHeight |
textStyles.body.sm | PAI Design | fontFamily textStyle.body.sm.fontFamilyfontSize textStyle.body.sm.fontSizefontWeight textStyle.body.sm.fontWeightlineHeight textStyle.body.sm.lineHeight |
textStyles.body.md | PAI Design | fontFamily textStyle.body.md.fontFamilyfontSize textStyle.body.md.fontSizefontWeight textStyle.body.md.fontWeightlineHeight textStyle.body.md.lineHeight |
textStyles.body.lg | PAI Design | fontFamily textStyle.body.lg.fontFamilyfontSize textStyle.body.lg.fontSizefontWeight textStyle.body.lg.fontWeightlineHeight textStyle.body.lg.lineHeight |
textStyles.label.sm | PAI Design | fontFamily textStyle.label.sm.fontFamilyfontSize textStyle.label.sm.fontSizefontWeight textStyle.label.sm.fontWeightlineHeight textStyle.label.sm.lineHeight |
textStyles.label.md | PAI Design | fontFamily textStyle.label.md.fontFamilyfontSize textStyle.label.md.fontSizefontWeight textStyle.label.md.fontWeightlineHeight textStyle.label.md.lineHeight |
textStyles.label.lg | PAI Design | fontFamily textStyle.label.lg.fontFamilyfontSize textStyle.label.lg.fontSizefontWeight textStyle.label.lg.fontWeightlineHeight textStyle.label.lg.lineHeight |
textStyles.title.sm | PAI Design | fontFamily textStyle.title.sm.fontFamilyfontSize textStyle.title.sm.fontSizefontWeight textStyle.title.sm.fontWeightlineHeight textStyle.title.sm.lineHeight |
textStyles.title.md | PAI Design | fontFamily textStyle.title.md.fontFamilyfontSize textStyle.title.md.fontSizefontWeight textStyle.title.md.fontWeightlineHeight textStyle.title.md.lineHeight |
textStyles.title.lg | PAI Design | fontFamily textStyle.title.lg.fontFamilyfontSize textStyle.title.lg.fontSizefontWeight textStyle.title.lg.fontWeightlineHeight textStyle.title.lg.lineHeight |
textStyles.title.xl | PAI Design | fontFamily textStyle.title.xl.fontFamilyfontSize textStyle.title.xl.fontSizefontWeight textStyle.title.xl.fontWeightlineHeight textStyle.title.xl.lineHeight |
textStyles.display.sm | PAI Design | fontFamily textStyle.display.sm.fontFamilyfontSize textStyle.display.sm.fontSizefontWeight textStyle.display.sm.fontWeightlineHeight textStyle.display.sm.lineHeight |
textStyles.display.md | PAI Design | fontFamily textStyle.display.md.fontFamilyfontSize textStyle.display.md.fontSizefontWeight textStyle.display.md.fontWeightlineHeight textStyle.display.md.lineHeight |
Atomic Tokens
Text style이 이미 있는 경우에는 그 조합을 우선 사용하고, atomic token은 새로운 text style을 만들거나 세부 조합을 확장할 때 사용해요.
Font Family
font.family.sans는 앱 루트에 적용할 수 있는 공용 sans stack이에요. 웹에서는 system font 중심의 stack을 기본값으로 두고, PAI Design 컴포넌트 레시피는 font-family: inherit를 사용해 앱의 기본 font family를 따라가요. 이 문서 사이트에서는 예시를 보기 쉽게 Pretendard를 적용해두었어요.
| 토큰 | 미리보기 | 값 |
|---|---|---|
font.family.sans | PAI Design | system-ui, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif |
Font Size
크기 scale은 작은 보조 텍스트부터 큰 제목과 display text까지 한 세트로 제공해요. 지금 당장 모든 크기를 다 쓰지 않더라도, 나중에 더 큰 제목이 필요하면 같은 기준 안에서 확장할 수 있어요.
| 토큰 | 미리보기 | 값 |
|---|---|---|
font.size.xs | PAI Design | 0.75rem12px |
font.size.sm | PAI Design | 0.875rem14px |
font.size.md | PAI Design | 1rem16px |
font.size.lg | PAI Design | 1.125rem18px |
font.size.xl | PAI Design | 1.25rem20px |
font.size.2xl | PAI Design | 1.5rem24px |
font.size.3xl | PAI Design | 2rem32px |
font.size.4xl | PAI Design | 2.5rem40px |
font.size.5xl | PAI Design | 3rem48px |
Font Weight
두께 단계는 많지 않게 유지해요. regular는 기본 본문에, semibold는 제목과 라벨 강조에 사용해요.
| 토큰 | 미리보기 | 값 |
|---|---|---|
font.weight.regular | PAI Design | 400 |
font.weight.medium | PAI Design | 500 |
font.weight.semibold | PAI Design | 600 |
Line Height
줄 높이는 여러 줄 텍스트가 너무 빽빽하거나 너무 퍼져 보이지 않게 맞추는 기준이에요. 특히 여러 줄 설명, 큰 제목, display text에서 차이가 더 잘 보여요.
| 토큰 | 미리보기 | 값 |
|---|---|---|
lineHeight.xs | PAI Design Text Rhythm | 1rem16px |
lineHeight.sm | PAI Design Text Rhythm | 1.25rem20px |
lineHeight.md | PAI Design Text Rhythm | 1.5rem24px |
lineHeight.lg | PAI Design Text Rhythm | 1.625rem26px |
lineHeight.xl | PAI Design Text Rhythm | 1.75rem28px |
lineHeight.2xl | PAI Design Text Rhythm | 2rem32px |
lineHeight.3xl | PAI Design Text Rhythm | 2.5rem40px |
lineHeight.4xl | PAI Design Text Rhythm | 3rem48px |
lineHeight.5xl | PAI Design Text Rhythm | 3.5rem56px |
사용하는 기준
- 아주 작은 보조 정보나 메타 텍스트:
textStyles.body.xs를 사용해요. - 기본 본문:
textStyles.body.md를 먼저 사용해요. - 조금 더 크게 보여야 하는 본문이나 짧은 리드 문장:
textStyles.body.lg를 사용해요. - 버튼과 짧은 인터랙션 라벨:
textStyles.label.sm,textStyles.label.md,textStyles.label.lg를 사용해요. - Dialog나 HelpBubble 제목처럼 강조가 필요한 제목:
textStyles.title.sm,textStyles.title.md,textStyles.title.lg를 사용해요. - 섹션 제목이나 더 큰 히어로 카피:
textStyles.title.xl또는textStyles.display.*를 사용해요. - 같은 역할의 텍스트에는 같은 text style을 반복해서 사용해요. 그래야 화면 전체가 더 일정하게 보여요.