typeset_skill

This skill analyzes typography and delivers a systematic plan to improve font choice, hierarchy, sizing, and readability for clearer, more intentional text.

JavaScript

10.4k

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

3 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill pbakaus/impeccable --skill typeset

SKILL.md5.6 KB

Overview

This skill improves typography by fixing font choices, hierarchy, sizing, weight consistency, and overall readability. It turns default or inconsistent text into intentional, polished type that supports brand voice and usability. Before work begins, it follows the frontend-design Context Gathering Protocol and runs teach-impeccable if no design context exists.

How this skill works

First, the skill audits current typography for weak font choices, unclear hierarchy, arbitrary sizing, poor readability, and inconsistency. It then produces a systematic plan: recommended fonts, a modular type scale, weight roles, spacing rules, and web-font loading strategies. Finally, it applies changes and verifies outcomes against readability, consistency, performance, and accessibility checks.

When to use it

Interfaces that feel generic or use default system fonts (Inter, Roboto, Arial, etc.)
Designs with unclear heading/body hierarchy or inconsistent weights and sizes
Content pages that need fluid, readable headings and stable body text
Apps where type scale and spacing are arbitrary or break at small screens
Projects prioritizing accessibility, performance, and reduced layout shift

Best practices

Run frontend-design’s Context Gathering Protocol before changes; run teach-impeccable if no context exists
Limit families to 1–2 and weights to 3–4 (Regular, Medium, Semibold, Bold)
Adopt a modular type scale (e.g., ratio 1.25) and express sizes in rem, not px
Use fixed rem scales for dense app UIs and clamp() fluid sizing for marketing headings
Set body >=16px, max-width ≈65ch, and appropriate line-height (body 1.5–1.7; headings 1.1–1.2)
Optimize web fonts (font-display: swap, metric fallbacks) and load only used weights

Example use cases

Redesigning a SaaS dashboard to improve scanability and reduce visual noise
Updating a marketing site so headings scale fluidly while body text remains stable
Standardizing typography across a product suite to ensure consistent brand voice
Fixing accessibility issues: low contrast, tiny body copy, or poor line-length
Reducing CLS by configuring font loading and fallbacks for smoother page load

FAQ

No. Sometimes the current family is fine; the priority is meaningful contrast, consistent weights, and a clear scale. Replace only when the font conflicts with brand personality or readability.

When should I use fluid sizing versus fixed rems?

Use fixed rem scales for app UIs where spatial predictability matters. Use clamp() fluid sizing for marketing or long-form content headings that benefit from responsive scale.