skills.rest
PavkaBrika
PavkaBrikaCOMMUNITY
Explore all skills by this author →
GitHub

typeset

Adjusts UI and marketing text typography including fonts, hierarchy, sizing, spacing, and readability.

1|Updated Jun 23, 2022
Search Tags:#typography#consistency#accessibility#readability#fonts#design-principles#type-scale
One-click install
npx skills add https://github.com/PavkaBrika/debtbookapp --skill typeset-pavkabrika
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typeset
Source: https://github.com/PavkaBrika/debtbookapp/tree/main/.cursor/skills/typeset
Command: npx skills add https://github.com/PavkaBrika/debtbookapp --skill typeset-pavkabrika

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.

Core Features & Use Cases

  • Font selection: choose fonts that reflect brand personality and ensure readable contrast.
  • Type scale & hierarchy: establish a modular scale with clear heading vs body distinctions.
  • Readability & consistency: improve line-length, line-height, and maintain consistent weights throughout.

Quick Start

Invoke the mandatory preparation (/frontend-design) and follow the Context Gathering Protocol before applying typography improvements.

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

Fix inconsistent typography by aligning font choices, hierarchy, sizing, and readability to create intentional text. Apply this across UI body text, headings, and captions to ensure a consistent visual language in product interfaces and documentation.

What is a modular type scale and how does it improve readability?▼

A modular type scale establishes clear heading versus body distinctions through structured font sizing. It improves readability by maintaining consistent weights, appropriate line-height, and intentional spacing throughout the product interface.

How do I choose fonts for product interfaces that ensure accessible contrast?▼

Choose fonts that reflect brand personality while ensuring readable contrast for accessibility. Font selection must satisfy requirements for readable contrast, type scale, line-height spacing, and semantic token usage with specific guardrails for accessibility.

Does this typography tool work for both UI body text and marketing content?▼

Yes, typography improvements apply across UI body text, headings, captions, and marketing content. This ensures a consistent visual language and intentional text presentation throughout product interfaces and documentation.

What do I need to set up before applying typography improvements?▼

Invoke the mandatory frontend-design preparation and follow the Context Gathering Protocol before applying typography improvements. This establishes the proper environment setup required before aligning font choices, hierarchy, and readability.

Related Skills

Explore More Design & Creative Skills→
AkaraChenAkaraChen
270

typeset

Fix typography issues in user-facing text for readability.

Community
Intermediate
PosteriotPosteriot

design-system

Translate design specifications into structured CSS variables and Tailwind tokens.

Community
Intermediate
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic
erichowenserichowens
181

typography-expert

Generates font pairings and CSS type scales for web typography.

Community
Advanced