타이포그래피#
Figma Foundation · 02. Typography · 값은
coui_core가 정본입니다. 정본 파일은 Figma 라이브러리.
이 페이지는 텍스트 역할을 고르고, 지금 테마의 스케일을 확인하는 곳입니다. 17개 역할은 coui_core 의 CoreTypography
가 정하고, Flutter / Web 이 같은 Text chain 으로 읽습니다.
픽셀 크기나 weight 를 직접 주지 마세요. 역할이 크기·무게·트래킹을 함께 가져갑니다. 토큰 축 전체는 디자인 토큰 을 보세요.
Display / Headline / Title / Body 가 각각 Large · Medium · Small 로 12개, Label 이 XL2 · XL · Large · Medium · Small 5단계입니다. Label 이 다섯인 이유는 컨트롤 라벨이 Body 보다 넓은 크기 범위를 덮어야 하기 때문이고, 그래서 Label 은 Body 보다 한 단계 무겁습니다(500 대 400) — 크기가 아니라 무게로 "읽는 글"과 "누르는 것의 이름"을 가릅니다.
언제 쓰나#
역할을 고르세요
- 화면 제목 →
headline*/title* - 본문·설명 →
body* - 버튼·칩·탭·필드 라벨 →
label* - 색은 chain 으로 붙입니다 —
Text('저장').labelMedium.onPrimary
쓰지 마세요
fontSize: 16/fontWeight: FontWeight.w600를 위젯에 박기 — 테마 스케일이 비껴갑니다- Body 로 버튼 글자를 쓰기 — 무게가 달라 "누르는 것"으로 안 읽힙니다
긴 카피·문서 본문은 Text 컴포넌트와 chain API 를 같이 보세요.
coui_core 맵#
| 쓰는 이름 | 의미 |
|---|---|
CoreTypography |
17 역할 스케일 (displayLarge … labelSmall) |
Text('…').headlineLarge | Flutter / Web 동일 chain — 역할 getter |
Text('…').bodyMedium.onSurface | 역할 + 시맨틱 색 (CoreColors) |
--coui-text-<role>-* |
Web CSS 변수 (size / line-height / weight / tracking) |
아래 표의 샘플은 CSS 변수를 읽으므로 테마를 따라 움직입니다. 오른쪽 수치(크기 / line-height / weight / letter-spacing)는 저작된 스케일을 옮겨 적은 것이라 테마를 따라 움직이지 않습니다.
사용법#
// Flutter — chain API
Text('Heading').headlineLarge
Text('Body').bodyMedium.onSurface
// Web — 동일 chain
Text('Heading').headlineLarge