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: Invisible defaults? (Inter, Roboto, Arial, Open Sans) Does the font match the brand? Too many font families?

2. Hierarchy: Can you tell headings from body from captions at a glance? Are font sizes too close together? Are weight contrasts strong enough?

3. Sizing & scale: Is there a consistent type scale, or are sizes arbitrary? Does body text meet minimum readability (16px+)?

4. Readability: Are line lengths comfortable (45-75 characters ideal)? Is line-height appropriate? Is there enough contrast?

5. Consistency: Are the same elements styled the same way throughout?

CRITICAL: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional.

Plan Typography Improvements

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?
• Spacing: Line-heights, letter-spacing, and margins

Improve Typography Systematically

Establish Hierarchy

• 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 — don't rely on size alone
• App UIs: Use fixed rem-based scale — fluid sizing undermines spatial predictability
• Marketing/content pages: Use fluid sizing via clamp(min, preferred, max) for headings

Fix Readability

• Set max-width on text containers using ch units (max-width: 65ch)
• Line-height: tighter for headings (1.1-1.2), looser for body (1.5-1.7)
• Body text: at least 16px / 1rem
• Use tabular-nums for data tables

Weight Consistency

• Define clear roles for each weight and stick to them
• Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold)
• Load only the weights you actually use

NEVER:

• Use more than 2-3 font families
• Pick sizes arbitrarily — commit to a scale
• Set body text below 16px
• Use px for font sizes — use rem to respect user settings
• Default to Inter/Roboto/Open Sans when personality matters

Verify Typography Improvements

• Hierarchy: Can you identify heading vs body vs caption instantly?
• Readability: Is body text comfortable to read in long passages?
• Consistency: Are same-role elements styled identically?
• Accessibility: Does text meet WCAG contrast ratios? Is it zoomable to 200%?

Mirrored from https://github.com/pbakaus/impeccable — original author: pbakaus, license: Apache-2.0. This is an unclaimed mirror. Content and ownership transfer to the author when they claim this account.