typeset

Improves web and app typography by fixing fonts, hierarchy, sizing, and accessibility.

Updated Mar 7, 2026
One-click install
npx skills add https://github.com/jcdiv47/cool-paper --skill typeset-jcdiv47
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: typeset
Source: https://github.com/jcdiv47/cool-paper/tree/main/.agents/skills/typeset
Command: npx skills add https://github.com/jcdiv47/cool-paper --skill typeset-jcdiv47

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Improve typography that feels generic, inconsistent, or poorly structured by fixing font choices, hierarchy, sizing, weight consistency, and overall readability so text communicates clearly and feels intentional rather than default.

Core Features & Use Cases

  • Assessment & Diagnosis: Identify issues with font selection, muddled hierarchy, arbitrary sizes, poor line-length, and inconsistent weight usage across UI or content.
  • Systematic Remediation: Establish a modular type scale, weight roles, spacing rules, font pairing and web font loading strategies to reduce layout shift and improve performance.
  • Verification & Accessibility: Validate readability, WCAG contrast, max-width and line-height, and ensure consistent application across components and pages.
  • Use Case: Turn a default-looking product or marketing page into a polished experience by unifying font choices, defining a 5-step type scale, and enforcing consistent weight and spacing across the design system.

Quick Start

Improve the typography of the product listing page by establishing a clear type scale, selecting appropriate fonts, and fixing sizing, spacing, and weight inconsistencies.

Frequently Asked Questions about typeset

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix inconsistent typography and establish a clear type scale in a UI design system?

To fix inconsistent typography, establish a modular type scale, assign consistent weight roles, and define spacing rules. This creates a structured UI design system where text hierarchy feels intentional and polished across all components.

What is the best way to choose font pairings for web and app interfaces?

The best way to choose font pairings is by evaluating readability and hierarchy needs for web and app interfaces. Systematic remediation selects complementary fonts and establishes efficient web font loading strategies to reduce layout shift.

How do I ensure my text meets WCAG-compliant contrast and readability standards?

Ensure WCAG-compliant contrast and readability by validating text contrast ratios, maximum line-length, and line-height. This verification process checks that base sizes are readable and accessibility standards are met across marketing pages and components.

Why does my marketing page typography look generic and poorly structured?

Marketing page typography looks generic due to arbitrary sizes, muddled hierarchy, and poor font choices. Systematic remediation fixes this by unifying font selection, defining a 5-step type scale, and enforcing consistent weight and spacing.

Can I apply a modular type scale to an existing component library without breaking layouts?

Yes, you can apply a modular type scale to an existing component library. By defining weight roles, spacing rules, and efficient web font loading strategies, you ensure consistent application across pages while reducing layout shift.

What line-height and line-length should I use for optimal readability in interfaces?

For optimal readability in interfaces, apply appropriate line-height and maximum line-length values based on the content type. Verification checks these spacing rules against accessibility standards to ensure text communicates clearly.