Dansori_EQ/docs/TYPOGRAPHY.md

TYPOGRAPHY — 타이포그래피 규칙

⚠️ 가독성 최우선(readability first). 이 앱은 오디오 튜닝 도구로, 사용자가 값을 읽고 자연어를 입력하며 오래 들여다봅니다. 작고 흐린 글자로 인한 피로를 피하는 것이 규칙의 목적입니다. 애매하면 더 크게, 더 또렷하게를 택한다.

핵심 규칙 (절대 원칙)

1. 최소 12px — 어떤 텍스트도 12px 미만 금지. (라벨·힌트·배지·축 포함)
2. 최대 24px — 최상위 제목만 24px. 그 이상 키우지 않는다.
3. 저대비 회색 텍스트(dim/mute)는 12px 이상을 유지하고, 중요한 정보는 14px 이상을 권장.
4. 정보 위계는 크기 + 굵기 + 색으로 표현한다(크기만으로 과하게 벌리지 않기).

타입 스케일 (12 → 24)

역할(Role)	px	Weight	사용처
Caption (최소)	12	400/600	라벨, 힌트, 배지, 그래프 축, 보조 캡션
Body S	13	400/600	칩, 버튼, 보조 본문
Body	14	400	기본 본문, 리스트 항목, 설명문
Body L	15	600	값 강조, 입력 텍스트, 프로파일명(목록)
Subtitle	16	600	카드 강조, 대상 기기명
Section	18	700	섹션/창 소제목, 헤더 타이틀
Heading	21	700	다이얼로그 제목
Title (최대)	24	700	페이지/최상위 제목

• 반(半)단계(13.5·14.5 등)는 목업(HTML) 미세조정용일 뿐, WPF에서는 위 정수 스케일로 스냅한다.

색·대비 (다크 테마 기준)

• 본문 기본: #F2F3F5 (text)
• 보조: #A8ABB4 (dim) — 12px 이상에서만 사용
• 약한 보조: #767A83 (mute) — 캡션/각주 한정, 작은 크기에서 남용 금지
• 강조/링크: #4CC2FF (accent)
• 라이트 테마(M5) 도입 시에도 동일 대비 비율을 유지한다.

간격·굵기 가이드

• 줄간격(line-height) 본문 1.4~1.6.
• 굵기: 제목 700, 강조 값 600, 본문 400. 얇은(300) 폰트 금지(가독성).
• 폰트 패밀리: Segoe UI Variable, Segoe UI.

WPF 구현 지침 (M1/M5에서 적용)

• 창 기본 FontSize = 14 로 두고, 역할별 스타일 키를 리소스로 정의해 인라인 FontSize 사용을 지양한다.
• 예시 ResourceDictionary:

<sys:Double x:Key="Font.Caption">12</sys:Double>
<sys:Double x:Key="Font.BodyS">13</sys:Double>
<sys:Double x:Key="Font.Body">14</sys:Double>
<sys:Double x:Key="Font.BodyL">15</sys:Double>
<sys:Double x:Key="Font.Subtitle">16</sys:Double>
<sys:Double x:Key="Font.Section">18</sys:Double>
<sys:Double x:Key="Font.Heading">21</sys:Double>
<sys:Double x:Key="Font.Title">24</sys:Double>

<Style x:Key="Caption" TargetType="TextBlock">
    <Setter Property="FontSize" Value="{StaticResource Font.Caption}"/>
    <Setter Property="Foreground" Value="{DynamicResource TextMuteBrush}"/>
</Style>
<!-- Body / Section / Title 등 동일 패턴 -->

• 기존 프리빌트 XAML의 인라인 FontSize는 M5(테마) 단계에서 위 스타일 키로 치환한다.
• 접근성: 사용자 OS 글꼴 배율(125%/150%)에서도 레이아웃이 깨지지 않도록 고정 폭보다 Auto/*, 최소 높이 지정을 선호.

스케일 기준

• **수치 기준(정수 스케일, 최소 12·최대 24)은 이 문서가 원본(source of truth)**이다. (구 mockups/gallery.html 시각 목업은 저장소 정리로 삭제됨.)