← ClaudeAtlas

typesetlisted

Improve typography by fixing font choices, hierarchy, sizing, weight consistency, and readability. Makes text feel intentional and polished.
aiskillstore/marketplace · ★ 329 · AI & Automation · score 82
Install: claude install-skill aiskillstore/marketplace
Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. ## MANDATORY PREPARATION Use the frontend-design skill — 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 teach-impeccable 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 b