Skip to content
Back to skills

Typography Polish

ASecurity

Audit typography for reading comfort, heading hierarchy, responsive scaling, and content rendering surfaces.

  • 2 stars
  • 0 votes
  • 0 copies
  • 6 views
  • Added October 26, 2026
developmentgo

Security analysis

A100/100

Scanned October 26, 2026

npx -y skills add JoshuaShepherd/my-skills --skill typography-polish --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Typography Polish?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Typography Polish
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/joshuashepherd-typography-polish-6b972088/badge)](https://www.skillsdirectory.com/skills/joshuashepherd-typography-polish-6b972088)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
name: typography-polish
description: Audit typography for reading comfort, heading hierarchy, responsive scaling, and content rendering surfaces.
user-invocable: true
allowed-tools: Read, Grep, Glob, Edit
---

Audit typography across the project for readability and consistency.

Target: $ARGUMENTS (optional — specific component or page)

If no target is provided, audit all content-rendering surfaces.

## Audit Dimensions

### 1. Reading Comfort

- **Body text size**: 16-18px (text-base to text-lg)
- **Line height**: 1.6-1.8 for body text (leading-relaxed or leading-loose)
- **Line length**: max 65-75ch (`max-w-prose` or `max-w-[65ch]`)
- **Paragraph spacing**: adequate margin between paragraphs

### 2. Heading Hierarchy

- Clear visual progression: h1 > h2 > h3 > h4
- Consistent heading styles across pages
- No skipped heading levels in document structure
- Headings use appropriate font weight (bold/semibold for distinction)

### 3. Responsive Typography

- Text scales appropriately: `text-xl md:text-2xl lg:text-4xl`
- No text overflow on mobile (long words, URLs)
- Minimum 16px body text on mobile (prevents iOS zoom on inputs)

### 4. Font Loading

- Web fonts loaded with `font-display: swap` or `optional`
- System font fallback stack is appropriate
- No FOIT (Flash of Invisible Text) on slow connections

### 5. Content Typography

For rich text / article content:
- Lists (ul/ol) have proper indentation and markers
- Blockquotes are visually distinct
- Code blocks have monospace font and appropriate styling
- Links are visually distinct from surrounding text
- Bold and italic styles render correctly

### 6. Whitespace & Spacing

- Consistent spacing between sections
- Adequate padding in cards and containers
- No cramped text against edges

## Output Format

```
## Typography Audit: [target]

### Issues
| # | Severity | Category | File:Line | Issue | Fix |
|---|----------|----------|-----------|-------|-----|

### Recommendations
- ...
```

Apply Critical and High severity fixes automatically.

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.