# Better Typography

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

- Repository: https://github.com/jakubkrehel/skills (10031 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-25
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add jakubkrehel/skills --skill better-typography -g -a claude-code -y`
Codex: `npx skills add jakubkrehel/skills --skill better-typography -g -a codex -y`
Cursor: `npx skills add jakubkrehel/skills --skill better-typography -g -a cursor -y`
Gemini CLI: `npx skills add jakubkrehel/skills --skill better-typography -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add jakubkrehel/skills`

## Description

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

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Typography

This skill sets and reviews how text renders, from the type scale and spacing to font loading, wrapping and punctuation. It writes every fix in the project's styling system, and the [cheat sheet](css-cheat-sheet.md) maps each declaration to its Tailwind utility.

The words belong to `better-writing`, semantic heading structure to `better-accessibility` and spatial RTL layout to `better-layout`. Measure contrast with `better-colors`; whether it passes is `better-accessibility`'s.

## Measured, not preferred

Some values here are exact. Unitless line-height, weight `400` or heavier below `18px`, a 60, 75 character measure, `16px` inputs on iOS and `tabular-nums` on changing values are findings when missed.

Letter-spacing, pairing and scale ratios are heuristics. Report them only where they break the project's own scale. Never propose a new typeface, paid or free, unless the task asks for a type change.

## Fewer fonts, sizes and weights

Rarely use more than three fonts; marketing pages can carry more than apps. Weight and size carry hierarchy, so each extra one dilutes it. Pair for contrast. A serif headline over a sans body reads as deliberate, two near-identical sans-serifs read as a mistake.

Below `18px`, use weight `400` or heavier. Weights `100`, `300` belong at `28px` and up, checked against the background even there. Categories, `Display` and `Text` cuts, formats and fallback stacks are in [choosing-fonts.md](choosing-fonts.md).

## Load the faces the design uses

Browsers synthesize a weight or style the family doesn't ship, distorting the face. Load every face the design uses. Disable synthesis only after verifying the fallback stack, and only the unwanted mode. The [synthesis longhands](variable-fonts-and-opentype.md#disable-synthesis-narrowly) show how.

## Properties over raw tags

The rest: https://github.com/jakubkrehel/skills/blob/HEAD/skills/better-typography/SKILL.md