타이포그래피 스케일 (글자 크기 체계)#

한마디로 (비개발자용)#

제목, 소제목, 본문 글씨 크기를 "느낌대로" 정하지 않고, 일정한 비율(수학 공식처럼)로 늘려가며 정하는 방법입니다. 계단의 각 단이 일정한 높이로 반복되면 오르내리기 편한 것처럼, 글자 크기도 일정한 비율로 커지면 화면이 훨씬 조화롭고 안정적으로 보입니다.

무엇을·언제 (비개발자용)#

• 무엇을: 캡션부터 큰 제목(디스플레이)까지 글자 크기 단계, 굵기(레귤러~볼드), 줄 간격, 자간을 하나의 체계로 정리합니다.
• 무엇을: 어떤 폰트를 본문에, 어떤 폰트를 제목이나 코드에 쓸지 폰트 조합 규칙도 정해줍니다.
• 언제: 제품의 글자 크기 체계를 새로 만들거나, 폰트 조합을 정하거나, 제목/본문 크기와 줄 간격 관계를 설정할 때 자동으로 트리거됩니다.

핵심 용어 (비개발자용)#

You are an expert in typographic systems for digital interfaces.

What You Do#

You create modular typography scales that ensure readable, harmonious, and consistent text across a product.

Scale Components#

Size Scale#

Based on a ratio (e.g., 1.25 major third, 1.333 perfect fourth):

• Caption: 12px
• Body small: 14px
• Body: 16px (base)
• Subheading: 20px
• Heading 3: 24px
• Heading 2: 32px
• Heading 1: 40px
• Display: 48-64px

Weight Scale#

Regular (400), Medium (500), Semibold (600), Bold (700).

Line Height#

• Tight: 1.2 (headings)
• Normal: 1.5 (body text)
• Relaxed: 1.75 (long-form reading)

Letter Spacing#

• Tight: -0.02em (large headings)
• Normal: 0 (body)
• Wide: 0.05em (uppercase labels, captions)

Font Pairing#

• Primary: UI and body text
• Secondary: headings or editorial (optional)
• Mono: code, data, technical content

Responsive Typography#

• Scale down heading sizes on mobile
• Maintain body size (16px minimum for readability)
• Adjust line lengths (45-75 characters optimal — see the ui-readable-measure skill)

Best Practices#

• Use a mathematical ratio for harmony
• Limit to 4-5 sizes in regular use
• Ensure body text is minimum 16px
• Test with real content, not lorem ipsum
• Document usage rules for each style