better-typography Skill for Claude: What It Does and How to Install It

Makes Claude set and review how text looks in your UI, from the type scale to line-height, wrapping and punctuation.

Installs: 36.9K; on skills.sh
Stars: 10K; on GitHub
Files: 7; besides SKILL.md
Updated: Oct 2026; last repo commit

better-typography makes Claude check text against a fixed set of rules. Exact ones include unitless line-height, weight 400 or heavier below 18px, a 60 to 75 character line, 16px inputs on iOS and tabular numbers on changing values.

It writes fixes in your project's own styling system, and its cheat sheet maps each CSS declaration to a Tailwind utility. A review ends with a table of findings and a Block or Approve verdict. It bundles six reference guides and no scripts.

Good for

Front-end developers who want consistent type in a design system
Designers and engineers reviewing a screen for readable text
Tailwind users who want the plain CSS and the utility side by side

Install better-typography

Claude Code

Copy this prompt.

Install the better-typography skill in Claude Code. Run this command:

npx skills add https://github.com/jakubkrehel/skills --skill better-typography

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Sets and reviews how text renders, from the type scale and spacing to font features, wrapping, truncation and punctuation.

Sections in SKILL.md

Measured, not preferred
Fewer fonts, sizes and weights
Load the faces the design uses
Properties over raw tags
Use a type scale with semantic names
Heading sizes descend with level
Line-height by role
Letter-spacing by size
Cap the measure
Wrap deliberately
Tabular numbers on changing values
Truncate with a way back
Natural case, typographic punctuation
Underlines from the font
Inputs at 16px on mobile
Size floors

Key facts

Author: jakubkrehel (the repo owner)
Repository: jakubkrehel/skills
Installs on skills.sh: 36,877 as of 2026-11-02
GitHub stars: 10,003 for the whole jakubkrehel/skills repo, 2026-11-02
License: MIT
Last commit to the repo: 2026-10-25
What is inside: 8 files including SKILL.md: agents/openai.yaml and 6 reference guides (choosing-fonts, css-cheat-sheet, details-and-accessibility, spacing-and-sizing, variable-fonts-and-opentype, wrapping-and-punctuation)
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

Exact values are findings; spacing and pairing only if they break your scale
The skill separates hard values from taste. It says never to propose a new typeface unless the task asks for a type change.
Read · Measured rules vs heuristics
Rarely more than three fonts; weight 400+ under 18px
Claude flags extra fonts, thin weights on small text and weights the loaded font files do not ship, which browsers fake.
Write · Fonts, sizes and weights
Display 1.1, headings 1.2 to 1.3, body 1.5 to 1.6, unitless
Claude maps heading levels to descending sizes and keeps wrapping text at line-height 1.4 or more.
Write · Type scale, headings and line-height
Tighter at 24px and up, looser on small caps; cap lines at 60 to 75 characters
Claude sets tracking in em so it scales with size and adds a maximum line length to long text.
Write · Letter-spacing and measure
text-wrap balance and pretty, line-clamp with a way back
Balance is for short headings, pretty for paragraphs. Truncated text needs a way to reach the full value.
Write · Wrapping and truncation
tabular-nums, curly quotes, en dashes, underline from the font
Claude fixes timers and prices that shift width, and replaces keyboard stand-ins such as "..." and straight quotes in rendered text.
Write · Numbers, punctuation and underlines
Stops iOS Safari from zooming on focus
The skill offers two fixes that look different and tells Claude to ask which one you want.
Write · Inputs at 16px on mobile
19 patterns paired with the fix
A checklist such as line-height in px, text-wrap balance on a paragraph or user-select none on a text container.
Read · Before you finish table
HIGH, MEDIUM, LOW findings and a Block or Approve verdict
Findings group by principle in a table with location, before, after and why. Checks Claude could not run are marked Not verified.
Read · Reporting

From the official docs

Questions

What does better-typography do?

It makes Claude build or audit the typography of an interface: scale, spacing, font loading, wrapping, truncation and punctuation. It reports findings in a table and writes fixes in your own styling system.

How do I install better-typography?

Use the install box at the top of this page for this one skill. The repo README also gives an install for the whole collection and a Claude Code plugin route.

Does it need any other skills?

No. It names better-writing, better-accessibility, better-layout and better-colors as the owners of topics it leaves out, such as copy, heading structure, right-to-left layout and contrast. Install them from the same repo if you want those covered.

Will it change my fonts?

The skill says never to propose a new typeface, paid or free, unless the task asks for a type change. It focuses on how the fonts you have are set and loaded.

Is better-typography safe to use?

It bundles no scripts and is made of instructions and reference guides. Claude can edit your style files when you ask for fixes, so review the diff before you commit.

better-typography vs better-colors?

Typography covers how text is set. The better-colors skill covers palettes, tokens and measured contrast, and better-typography points to it for measuring contrast. Both come from the same repo and use the same report format.

Information

updated Nov 2, 2026

Repository: jakubkrehel/skills
Folder: skills/better-typography

jakubkrehel/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3