What is the better-typography skill?
The better-typography skill sets and reviews how text renders in a product. It covers the type scale, spacing, font loading, wrapping, truncation and punctuation, and writes fixes in your styling system. It separates measured rules, such as unitless line-height, from heuristics it only reports when they break your own scale.
Better-typography splits its advice into two piles. Some values are exact and count as findings when missed. Others are heuristics that get reported only when they break the project's own scale.
The exact pile is short: unitless line-height, weight 400 or heavier below 18px, a 60 to 75 character measure, 16px inputs on iOS and tabular-nums on changing values.
Rules worth knowing
- Line-height by role: display text 1.1, headings 1.2 to 1.3 and body copy 1.5 to 1.6, always unitless.
- Letter-spacing in em: negative 0.01em to 0.02em on headings of 24px and up, 0.05em on small uppercase labels.
- Wrapping: text-wrap: balance on headings, pretty on paragraphs and nowrap on badges.
- Typographic punctuation in rendered text, with straight quotes kept in code.
Why font loading is in scope
Browsers synthesize a weight or style that a family does not ship, which distorts the face. The skill asks you to load every face the design uses and to disable synthesis only after checking the fallback stack.
Who it suits
Best for
- Applying a consistent type scale with semantic names across a codebase.
- Finding shifting numbers, lone last-line words and truncation with no way back.
- Mobile forms where iOS Safari zooms the page on small inputs.
Not for
- Choosing a new typeface. The skill never proposes one unless the task asks for a type change.
- Copy edits, semantic heading structure and RTL spatial layout, which sit with other better skills. Related pages: typeset and tailwind-design-system.
Use it with UiChemy
Lock the scale, weights and measure while the design is still cheap to change. When it is settled, bring it into WordPress with UiChemy Figma to WordPress or AI to WordPress, then compare the rendered text against the scale. Get Started on uichemy.com.
How to install Better Typography Skill: Type Scale, Wrapping and Punctuation
git clone https://github.com/jakubkrehel/skills.gitClone the repository
Run
git clone https://github.com/jakubkrehel/skills.git. The skill sits in skills/better-typography.Copy the whole folder
Copy skills/better-typography to your agent's skills location. Keep css-cheat-sheet.md, choosing-fonts.md and the other reference files beside SKILL.md, because the skill links to each.
Claude Code plugin alternative
Run
/plugin marketplace add jakubkrehel/skillsand/plugin install interfaces@interfaces, the commands the README gives.Request a typography check
Point the agent at a stylesheet or component and ask for a typography review. The skill writes every fix in your project's styling system.
Check that it loaded
Ask for a review of one component. The report should list findings by principle with path and line, give before and after values, and end in Block or Approve.
Key features
- Fewer fonts and weightsIt rarely wants more than three fonts, because weight and size carry hierarchy and each extra one dilutes it. Marketing pages may carry more than apps.
- Properties over raw tagsUse font-weight: 650 and not font-variation-settings, and tabular-nums instead of feature tags, so styling survives a non-variable fallback face.
- Semantic type scalePair each size with a line-height and weight so a role is one decision. Teams are advised to name sizes by use, such as text-body-sm.
- Descending headingsHeading levels map to descending steps of the scale, a subordinate heading never overpowers its parent and no heading is smaller than body text unless it is an overline.
- Measure capLong-form text is capped at 60 to 75 characters per line, in any unit, as long as a cap exists and the result lands in range.
- Deliberate wrappingBalance evens out headings, pretty protects paragraphs from a lone last word, and overflow-wrap: break-word catches long links and IDs.
- Tabular numbersTimers, counters, prices and numeric table columns take font-variant-numeric: tabular-nums so digits keep one width and nothing shifts.
- Truncation with a way backOne line uses ellipsis with nowrap, several lines use a line clamp, and any truncated value needs a route to the full text.
- Mobile input sizeInputs under 16px make iOS Safari zoom the page. The skill offers two fixes and asks which look the design wants.
- Detection tableA before you finish table flags px line-height, font-synthesis: none, justify in application UI and a missing bdi around mixed-direction values.
Frequently asked questions
What is the better-typography skill?
It is a skill in Jakub Krehel's skills repository that sets and reviews how text renders: type scale, spacing, font loading, wrapping, truncation and punctuation. It writes every fix in the styling system your project already uses and keeps a cheat sheet mapping CSS to Tailwind utilities.
How do I install better-typography?
Clone jakubkrehel/skills and copy skills/better-typography, with its reference files, into your agent's skills folder. In Claude Code you can run the plugin marketplace add and plugin install commands from the README. Then ask for a typography review of a named file or component. Related: ui-styling.
Which values does it treat as exact?
Unitless line-height, weight 400 or heavier below 18px, a 60 to 75 character measure, 16px inputs on iOS and tabular-nums on changing values. Missing any of these is a finding. Letter-spacing, pairing and scale ratios are heuristics reported only when they break your own scale.
Will it recommend a different font?
No. It never proposes a new typeface, paid or free, unless the task asks for a type change. It does ask you to load every face the design uses so the browser does not synthesize a missing weight or style.
Why do iOS inputs matter here?
iOS Safari zooms the whole page when an input's text is smaller than 16px. The skill offers two fixes: size the input up on mobile, or keep 16px and render the intended size with a transform scale. It asks which one the design wants.
Which AI coding agents can use better-typography?
The README documents a Claude Code plugin install, and the skill folder includes an agents/openai.yaml file. For other agents, copy the folder to their skills location. The README lists no other agents, so confirm yours reads SKILL.md folders.
How does it relate to better-interface?
Better-interface runs every better skill as one review, and typography is one of its six domains. Better-typography also supplies two of that review's automatic HIGH triggers: text clipped at 320px width or 200 percent zoom, and truncation with no way back to the full text.