Typography Scaleby Owl-Listener

Typography Scale Skill.

Create a readable hierarchy from a small set of documented text styles.

UI Design
Typography

Source Review · Typography ScaleSKILL.md

Task UI Design Produces • A named text-style scale with size, weight, line height, and tracking. • Font-role assignments for body, headings, and technical text. • Responsive usage rules and real-content checks. Before You Start Requires the actual font files or available platform fonts for meaningful visual validation.

Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Build a Coherent Type System

A typography-system reference covering modular sizes, weight, leading, tracking, font roles, and responsive use.

Source-based workflowNot an execution benchmark

The Working Approach

Typography Scale combines size relationships with weight, line height, and letter spacing. It treats a type system as more than a sequence of font sizes: a caption, body paragraph, heading, and display line need different roles and conditions of use.

The source includes example modular ratios and font-role choices, plus mobile guidance for headings and reading measure. These are starting rules to test with actual content. It does not claim that a mathematical ratio alone guarantees readable typography across every font or script.

Expected Deliverables

A named text-style scale with size, weight, line height, and tracking.
Font-role assignments for body, headings, and technical text.
Responsive usage rules and real-content checks.

See the Example Brief

From Brief to Review

01
Choose the Base Relationship
Select a body baseline and ratio appropriate to the content and existing brand.
02
Define Complete Styles
Pair each size with weight, leading, tracking, and a clear usage role.
03
Test Real Text
Check long headings, body paragraphs, and mobile widths; avoid introducing unnecessary sizes to repair individual cases.

02 When to Use It

When to Use It

Requires the actual font files or available platform fonts for meaningful visual validation.

A Good Fit

Inconsistent Text StylesUseful when a product has accumulated near-duplicate headings and labels.
New UI FoundationsEstablishes type roles before screens invent their own scales.

Limits to Check

Not Only Reading MeasureLine length matters, but this Skill addresses a broader type system.
Not a Typeface LicenseFont selection and usage still require appropriate licensing and platform availability.

Bring These Inputs

Fonts and BrandProvide approved families, available weights, and existing constraints.
Content SamplesInclude realistic labels, headings, paragraphs, code, or numerical displays.
Screen ContextsDescribe mobile, dense UI, and long-form reading requirements.

03 Decisions That Matter

Decisions That Matter

Styles Carry Roles
Documented use cases reduce arbitrary decisions between neighboring sizes.
Mobile Without Shrinking Everything
The source differentiates scaling headings from preserving a readable body baseline.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Use the repository's documented installation route and retain any referenced companion files. This entry describes a focused design method rather than an executable application.

Upstream Source File

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/typography-scale/SKILL.md

Requires the actual font files or available platform fonts for meaningful visual validation.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief

Use typography-scale for a research reading app with article text, notes, navigation labels, and code excerpts. Define a restrained modular scale with complete style values and mobile heading behavior. Test against the supplied long titles and paragraphs rather than placeholder text.

Inspect the Result

Check the actual output against these observable criteria.

Every style includes more than a font-size value.
Frequent text roles use a limited set of styles.
Long headings and body copy remain readable at narrow widths.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill File: ui-design/skills/typography-scale/SKILL.md
License: MIT
Reviewed Snapshot: 2026-10-07 · 9a6930cf84a8

Editorial Source Summary

A typography-system reference covering modular sizes, weight, leading, tracking, font roles, and responsive use.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Does a modular scale choose the font?

No. The ratio organizes sizes; font selection and actual rendering still require judgment.

Should all desktop sizes shrink on mobile?

The source suggests reducing headings while preserving a readable body size and adjusting line length.

How many styles should be used regularly?

The source recommends limiting routine use to a small set, while documenting additional roles such as captions or display text.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesign Browse Design Skills