타이포그래피 | CoUI
LogoCoUI

타이포그래피

CoUI 타입 스케일 — Material 3 기반 15개 텍스트 역할

타이포그래피#

CoUI 는 Material 3 의 15개 텍스트 역할(Display / Headline / Title / Body / Label × Large/Medium/Small)을 Flutter / Web 동일 토큰으로 제공합니다. 아래는 라이브 테마 값으로 렌더된 전체 스케일입니다.

사용법#

// Flutter — chain API
Text('Heading').headlineLarge
Text('Body').bodyMedium.onSurface

// Web — 동일 chain
Text('Heading').headlineLarge

전체 스케일#

Display Large
display-large · 52px / 1.4 / 300 / -0.025em
Display Medium
display-medium · 48px / 1.4 / 300 / -0.025em
Display Small
display-small · 44px / 1.4 / 300 / -0.025em
Headline Large
headline-large · 32px / 1.4 / 600 / -0.025em
Headline Medium
headline-medium · 28px / 1.4 / 600 / -0.025em
Headline Small
headline-small · 24px / 1.4 / 600 / -0.025em
Title Large
title-large · 20px / 1.6 / 600 / 0
Title Medium
title-medium · 18px / 1.6 / 600 / 0
Title Small
title-small · 16px / 1.6 / 600 / 0
Body Large
body-large · 18px / 1.6 / 400 / 0
Body Medium
body-medium · 16px / 1.6 / 400 / 0
Body Small
body-small · 14px / 1.6 / 400 / 0
Label Large
label-large · 14px / 1.6 / 400 / 0
Label Medium
label-medium · 12px / 1.6 / 400 / 0
Label Small
label-small · 10px / 1.6 / 400 / 0

각 행의 메타는 역할 · 크기 / line-height / weight / letter-spacing 입니다. 값은 --coui-text-<role>-* CSS 변수에서 직접 렌더되어 항상 현재 테마와 일치합니다.