skills.rest
DanialHaseeb
DanialHaseebCOMMUNITY
Explore all skills by this author →
GitHub

typeset

Diagnose and correct typography in UI and content text.

Updated Mar 21, 2026
Search Tags:#typography#accessibility#readability#design-system#hierarchy#type-scale#font-selection
One-click install
npx skills add https://github.com/DanialHaseeb/dotfiles --skill typeset-danialhaseeb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typeset
Source: https://github.com/DanialHaseeb/dotfiles/tree/main/codex/skills/typeset
Command: npx skills add https://github.com/DanialHaseeb/dotfiles --skill typeset-danialhaseeb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Improves unclear, generic, or inconsistent typography by diagnosing and correcting font choices, hierarchy, sizing, weight, spacing, and readability so text feels intentional and communicates clearly.

Core Features & Use Cases

  • Font selection & pairing: Replace invisible defaults or mismatched families with purposeful fonts that match brand personality and load efficiently.
  • Type scale & hierarchy: Establish a consistent modular scale, size and weight roles for headings, body, captions, and labels to make structure immediately recognizable.
  • Readability & accessibility: Set comfortable line-lengths, appropriate line-height, contrast, and rem-based sizing to meet usability and accessibility goals.
  • Use Case: Audit a marketing page or product UI that looks default and muddy, then deliver a prioritized plan with new font choices, a 5-step type scale, weight roles, spacing rules, and webfont loading recommendations.

Quick Start

Assess the typography of the provided page or component, identify font and hierarchy problems, and return a prioritized remediation plan with specific type scale, weight assignments, spacing, and accessibility adjustments.

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 hierarchy in my UI?▼

Improve readability by setting comfortable line-lengths, appropriate line-height, sufficient contrast, and rem-based sizing to meet usability and accessibility goals for body text and captions.

What is the best way to select and pair fonts for a design system?▼

Audit typography by assessing the provided page or component to identify font and hierarchy problems, returning a prioritized remediation plan with specific type scale, weight assignments, spacing, and accessibility adjustments.

How do I set up a modular type scale with rem-based sizing for web fonts?▼

Set up a modular type scale by defining rem-based sizing rules for headings and body text, establishing consistent size ratios, weight strategies, and spacing across the design system.

Does this typography approach work for both marketing pages and product UI?▼

Yes, this typography approach works for both marketing pages and product UI by diagnosing and correcting font choices, hierarchy, sizing, weight, and readability across web and app interfaces.

What webfont loading strategies should I use to meet readability and performance requirements?▼

Meet readability and performance requirements by applying webfont loading guidance alongside concrete recommendations for font pairings, rem-based sizing rules, line-height, and max-width settings.

Related Skills

Explore More Design & Creative Skills→
zhushen12580zhushen12580
184

typeset

Improve typography for text with font selection, hierarchy, sizing, and spacing.

Community
Advanced
microlinkhqmicrolinkhq
142

typeset

Audit and improve UI typography with modular scales and accessibility checks.

Official
Intermediate
IFIR649IFIR649

visual-design-foundations

Build cohesive visual design systems with typography, color, spacing, and iconography tokens.

Community
Advanced
nikglavinnikglavin
1

lyra-typography-system

Create accessible typography systems with tokenized scales and WCAG-compliant contrast.

Community
Advanced