Typeset
Fix generic or muddy typography—fonts, scale, weight, and hierarchy—so marketing and product UI text reads intentional.
Overview
Typeset is an agent skill most often used in Build (also Validate landing, Launch geo-facing pages) that assesses weak typography and improves fonts, hierarchy, scale, and readability for intentional type.
Install
npx skills add https://github.com/pbakaus/impeccable --skill typesetWhat is this skill?
- Mandatory /impeccable prep with Context Gathering Protocol; run impeccable teach if no design context exists
- Audits font choices against invisible defaults (Inter, Roboto, Arial) and brand fit
- Fixes hierarchy with clearer size steps and weight contrast beyond medium-vs-regular
- Enforces readable body sizing and a consistent type scale instead of arbitrary px steps
- Targets polished, intentional type when users mention fonts, readability, or sizing feeling off
Adoption & trust: 65.3k installs on skills.sh; 35.9k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your UI text looks like generic defaults—weak hierarchy, too many similar sizes, and fonts that do not match the product’s personality.
Who is it for?
Indie builders polishing SaaS or marketing UI who already use Impeccable and want a focused typography pass on real screens.
Skip if: Greenfield brand identity from scratch with no UI yet, or teams unwilling to run impeccable and Context Gathering Protocol first.
When should I use this skill?
User mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished intentional typography; argument-hint [target].
What do I get? / Deliverables
You get concrete typography fixes aligned to Impeccable design context—clearer hierarchy, fewer families, and a consistent scale—after impeccable teach when context was missing.
- Typography assessment notes
- Concrete font, scale, and hierarchy adjustments in project files
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Typography edits land in real UI code and components, so Build frontend is the canonical shelf even when the pain shows up on landing pages earlier. Frontend is where font families, type scale, and hierarchy tokens are applied in markup and CSS—matching the skill’s assess-and-improve loop on live layouts.
Where it fits
Tighten hero and body type on a waitlist page so sizing steps read clearly on mobile.
Replace muddy 14–16px ramps and weak weights in dashboard copy with a deliberate scale.
Improve paragraph readability and heading contrast on content pages you want cited in AI search.
How it compares
Use as a typography specialist pass on top of Impeccable principles—not a substitute for full layout, color, or component system work.
Common Questions / FAQ
Who is typeset for?
Solo developers and designers-in-one-person shops using the Impeccable stack who need structured typography critique and fixes in their frontend.
When should I use typeset?
Use it in Build frontend when fonts or hierarchy feel off; in Validate on landing or prototype pages before you commit to visual direction; and in Launch when SEO or GEO pages need readable, credible type.
Is typeset safe to install?
It mainly edits local project files after design-context prep—review the Security Audits panel on this Prism page before granting broad filesystem access to your agent.
Workflow Chain
Requires first: impeccable
SKILL.md
READMESKILL.md - Typeset
Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. ## MANDATORY PREPARATION Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- ## Assess Current Typography Analyze what's weak or generic about the current type: 1. **Font choices**: - Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults) - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface) - Are there too many font families? (More than 2-3 is almost always a mess) 2. **Hierarchy**: - Can you tell headings from body from captions at a glance? - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy) - Are weight contrasts strong enough? (Medium vs Regular is barely visible) 3. **Sizing & scale**: - Is there a consistent type scale, or are sizes arbitrary? - Does body text meet minimum readability? (16px+) - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings) 4. **Readability**: - Are line lengths comfortable? (45-75 characters ideal) - Is line-height appropriate for the font and context? - Is there enough contrast between text and background? 5. **Consistency**: - Are the same elements styled the same way throughout? - Are font weights used consistently? (Not bold in one section, semibold in another for the same role) - Is letter-spacing intentional or default everywhere? **CRITICAL**: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting. ## Plan Typography Improvements Consult the [typography reference](reference/typography.md) from the impeccable skill for detailed guidance on scales, pairing, and loading strategies. Create a systematic plan: - **Font selection**: Do fonts need replacing? What fits the brand/context? - **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy - **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits) - **Spacing**: Line-heights, letter-spacing, and margins between typographic elements ## Improve Typography Systematically ### Font Selection If fonts need replacing: - Choose fonts that reflect the brand personality - Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights - Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks) ### Establish Hierarchy Build a clear type scale: - **5 sizes cover most needs**: caption, secondary, body, subheading, heading - **Use a consistent ratio** between levels (1.25, 1.333, or 1.5) - **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone - **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need - **Marketing / content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed ### Fix Readability - Set `max-width` on text containers using `ch` units (`max-width: 65ch`) - Adjust line-height per context: tighter for headings (1.1-1.2), looser fo