本文へ移動
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

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

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-skills2,9012026年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-skills2,9012026年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-skills2,9012026年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-skills2,9012026年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-skills2,9012026年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-skills2,9012026年9月6日 更新

Owl-Listener のスキルをすべて見る

このスキルの問題を報告する