typeset
Transform Typography Into Intentional Design
Generic fonts and inconsistent sizing undermine your interface credibility. Typeset applies professional typography principles to create clear hierarchy, readable text, and polished visuals that reflect your brand personality.
Download the skill ZIP
Upload in Claude
Go to Settings → Capabilities → Skills → Upload skill
Toggle on and start using
Test it
Using "typeset". Review typography for a blog with 14px body text, arbitrary heading sizes, and system fonts
Expected outcome:
Issues found: (1) Body text below 16px minimum - increase to 1rem, (2) No consistent scale - headings jump from 18px to 32px without intermediate steps, (3) System fonts lack personality. Recommended fix: Establish 1.25 ratio scale starting at 16px body, select a humanist sans-serif like Source Sans Pro paired with a readable serif like Source Serif Pro for headings.
Using "typeset". Create fluid heading scale for marketing page
Expected outcome:
Generated clamp-based scale: h1: clamp(2.5rem, 5vw, 4rem), h2: clamp(2rem, 4vw, 3rem), h3: clamp(1.5rem, 3vw, 2.25rem). All headings use 1.1 line-height for tight, polished appearance. Body remains fixed at 1.125rem for reading comfort.
Security Audit
SafeAll 26 static analysis findings are false positives. The scanner misinterpreted CSS code snippets (e.g., font-display, max-width, tabular-nums) as shell commands and typography analysis instructions as system reconnaissance. This is a design guideline document with no executable code, network access, filesystem operations, or cryptographic functions. Safe for publication.
Quality Score
What You Can Build
Startup Landing Page Polish
Transform a template's generic Inter/Roboto setup into a distinctive type system that reflects your brand personality while maintaining excellent readability across devices.
Design System Typography Foundation
Establish a comprehensive type scale with defined roles for each size and weight, creating reusable tokens for consistent typography across your application.
Accessibility Typography Audit
Review and fix typography issues that impact readability including insufficient contrast, small body text, poor line spacing, and non-responsive sizing.
Try These Prompts
Review the typography on this page and identify the top 3 issues affecting readability and visual hierarchy.
I need font recommendations for a [brand type: e.g., playful fintech startup]. My current setup uses [current fonts]. Suggest 2-3 font pairings with loading strategies.
Create a complete type scale for my [app UI / marketing site] with sizes for caption, body, subheading, and heading. Include line-height, letter-spacing, and weight recommendations.
Convert my fixed rem-based headings to fluid typography using clamp(). My current scale is [list sizes]. Ensure smooth scaling from mobile to desktop.
Best Practices
- Start with a fixed ratio (1.25 or 1.333) and apply consistently across all text sizes
- Combine multiple dimensions for hierarchy: size, weight, color, and spacing together
- Test typography at 100%, 150%, and 200% zoom to ensure accessibility compliance
Avoid
- Using more than 2-3 font families creates visual chaos and performance overhead
- Setting body text below 16px violates accessibility best practices
- Picking arbitrary sizes without a scale results in inconsistent, unprofessional appearance