본문으로 건너뛰기
cccskills
무료GitHub에 공개

typography-scale

Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(1)

  • SKILL.md1.5 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Typography Scale

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)

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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use `test-scenario`.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Owl-Listener/designer-skills3천2026년 9월 6일 업데이트

Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use `accessibility-test-plan` (prototyping-testing).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Owl-Listener/designer-skills3천2026년 9월 6일 업데이트

Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use `accessibility-audit` (design-systems).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Owl-Listener/designer-skills3천2026년 9월 6일 업데이트

Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction. Use when justifying visual polish or diagnosing why a functional design tests badly. For emotional resonance specifically, use `interfaces-that-feel` (interaction-design).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Owl-Listener/designer-skills3천2026년 9월 6일 업데이트

Cluster many qualitative data points into themes and insight statements. Use when synthesising across multiple sessions or sources. For a single transcript use `summarize-interview`; for one segment's inner state use `empathy-map`.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Owl-Listener/designer-skills3천2026년 9월 6일 업데이트

Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Owl-Listener/designer-skills3천2026년 9월 6일 업데이트

Owl-Listener의 스킬 모두 보기

이 스킬의 문제 신고