1. Habit
  2. Skills
  3. Web Typography skill
wondelai · 9K installs

Web Typography skill
Runs by itself, CSS or fonts change.

Type stays readable on every release.

Install the Web Typography skill and make it a habit: follow https://gethabit.dev/skills/wondelai/web-typography.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

9K installs2K starsMIT licenceSource on GitHub ↗

Web Typography

by wondelai · 9K installs

The skill

The web typography skill helps an agent choose, pair and set typefaces for the web, from line length and line height to fluid sizes and font loading.

Only when you ask.

The habit

Type stays readable on every release.

↻ Runs by itselfCSS or fonts change

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

CSS or fonts change. Runs in GitHub Actions or Claude Code routine.

  • ↻ CSS or fonts change
  • pull_request with changed css or woff2 files

02

It checks its work

diagnostic score check. If a check fails, it tells you.

  • ✓body text is 16px or larger
  • ✓prose containers cap the measure under 75 characters
  • ✓total font payload under 200KB
  • ✓every font-family has a fallback

03

It remembers

typography score log. The next run reads it first: the last score and the diagnostic rows that failed.

loops/web-typography-check-loop/runs.md

One run, step by step.
Then it stops.

Stop ruleStops after one pull request per run.

  1. 01

    Read the log

    The agent reads the last score and which rows failed.

  2. 02

    Inspect the CSS

    It reads the changed styles and font loading rules.

  3. 03

    Run the diagnostic

    It answers the ten Quick Diagnostic rows for body, headings and links.

  4. 04

    Check loading

    It checks font-display swap, preload, WOFF2 and subsetting.

  5. 05

    Score and log

    It states the score out of 10, the failing rows and the fixes in the log.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Web Typography skill helps.

Use it when

  • ✓ You pick or pair typefaces
  • ✓ Text feels hard to read
  • ✓ Web fonts load slowly

Skip it when

  • – You need a full design system
  • – The product has no web text

Questions

Web Typography skill, answered.

Does it pick fonts for me?

It can suggest faces and pairings, but this loop only checks what changed.

What fails the run?

Small body text, long lines, a heavy font payload or missing fallbacks.

How do I install the Web Typography skill?

Copy the prompt at the top into your agent. It installs the skill from wondelai/skills and sets up the habit. Or run npx skills add wondelai/skills --skill web-typography.

Is the Web Typography skill free?

Yes. It is published under MIT. Habit is free too.

Web Typography. Now as a habit.

Install the Web Typography skill and make it a habit: follow https://gethabit.dev/skills/wondelai/web-typography.md

  • Free
  • No account
  • Undo in one line

All wondelai skills →More design skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by wondelai, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.