Install Where it helps Evidence Read the skill Contribute Support License

Measured Type is an agent skill for web typography: Bringhurst's rules translated into current CSS and scripts that measure what can be measured (line length, zoom growth, contrast, figures in a number column, font coverage) in a real browser or in the font file. It is for design engineers, frontend developers and design-system teams who let agents set and review text.

Zoom doubles rem but halves the CSS viewport, so the viewport term in a fluid size stops growing. In the development benchmark both runs without the skill shipped heroes like the second row; with it, both did the ratio math first. WCAG 1.4.4 sets no ratio of its own; the 1.6× bar is this project's.

Where it helps, what it costs, when to skip it

Where it helps

• Line length in a wide face: 66ch in Verdana sets 81 characters; the skill counts lines instead of trusting the unit, and came closer to 66 than a model given a one-sentence hint.
• Fluid type under zoom when the brief fixes the sizes: type-scale.js --fit gives two forms that keep both sizes and pass the zoom bar. On a held-out case every run with the skill met all three checks against none without it; a one-sentence hint did as well there (see Evidence).
• Right-to-left audits that convert text flow but leave decoration and already-mirrored glyphs alone.
• Dense product UI: tabular figures, numbers aligned at the end, tracked capitals, truncated text, contrast in both colour schemes.
• Agents without a browser of their own: the bundled Chromium measures, and without it the tools say what they could not check.
• Teams: one report format with rule IDs, severities and a Block or Approve verdict that can gate a pull request.

What it costs

• 7% to 25% more tokens and up to twice the time per task, measured across every experiment in Evidence.
• npm install and a Chromium download for the measuring scripts (the linter and the estimate need neither).
• The text is CC BY-NC 4.0; whether paid client work may use it is not settled (License).

When to skip it

• Fluid type under zoom on its own: one sentence ("check that it still grows at least 1.6× at 200% zoom") matched the skill on the held-out case; the skill pulled ahead only on the wider 1.8× range of the hero case, where the sentence's runs gave up the desktop size.
• One-off questions a current model already answers well.
• Logos, drawing icons or fonts, build setup.

Installed in a project, it loaded before the agent's first edit on every typography prompt with Opus 5.5 (26 of 26) and on 15 of 16 with Sonnet 5.5, and never on a near miss (spec 0016). Other type or design skills installed alongside it were not tested; name it when you want it for certain.

How it works

1. Classify the text. Reading, display and interface text follow different rules; book rules applied to a button are their own mistake.
2. Direction and language first. Every rule is flow-relative, with lang and dir in place, so an RTL or vertical edition is a content change.
3. Decide with the rules. Bringhurst's The Elements of Typographic Style, numbered so reviews can cite §2.1.2, translated into CSS that ships today.
4. Measure what can be measured, and when no browser is available, estimate and say so. Anything a check cannot compute is listed under Not verified, never passed in silence.
5. Review with a point of view. A taste reference for what reads as considered and the template tells that read as defaults.

Install

skills CLI (skills.sh), as a personal skill in every project:

npx skills add PetriLahdelma/measured-type --skill measured-type --agent claude-code -g

Leave out -g to install into the current project, or --agent to choose other agents. Tested with skills 1.7.4 on macOS, 29 October 2026. Without the CLI, copy skills/measured-type from a clone into ~/.claude/skills/, or use gh skill install PetriLahdelma/measured-type measured-type (preview).

Claude Code plugin, from this repository's marketplace:

/plugin marketplace add PetriLahdelma/measured-type
/plugin install measured-type@measured-type

The plugin installs the skill and its scripts, not the evals, and runs npm install for Playwright itself. Add the browser with npx [email protected] install chromium, and fontTools as below.

The measuring scripts are optional; without them the skill advises but cannot measure:

cd ~/.claude/skills/measured-type && npm install && npx playwright install chromium

pip install fonttools brotli

Check the install with npm test in the same folder. A few tests skip in an installed copy because their fixtures live in this repository; the estimate calibration skips where its macOS fonts are not installed.

Use it

Name the skill. A first task, in a project with a stylesheet:

Use measured-type to audit the typography in styles.css and fix the HIGH findings. Measure the line length in the browser.

Tasks it is written for:

• Set the article body for our docs in Verdana at 1.125rem, about 66 characters per line.
• Build a type scale for this site that still works at 200% zoom.
• Audit this stylesheet before we ship the Arabic edition.
• Does our italic have real small caps?
• The numbers in our admin table don't line up and the status badges are hard to read.
• Put this article on an 8px baseline grid and check that it holds.

It works alongside general frontend and design-system skills: they keep layout and components, this one makes the type decisions inside them.

Without installing anything. The linter and the estimate need only Node:

node ~/.claude/skills/measured-type/scripts/estimate-measure.js "Verdana" 66ch

about 81 characters per line in Verdana at 66ch (estimate from a Chromium calibration, not a measurement)
  671.6px at 16px; average character 0.504em, zero 0.636em

What it measures

Every script was written test first (specs/); both audits report in one format (references/audit.md). The audit of the ops dashboard from head-to-head 2 and 3 (evals/h2h-dashboard/), with the Fix column and half the rows left out:

Verdict: Block (9 HIGH).

Product UI fails differently from an article: nothing is too long to read, but it is hard to compare. Proportional figures cannot line up, so 411 108 and 80 011 end at different edges even in a column of their own:

More proof

ch is the width of the zero. The same 66ch sets different measures in different faces, so the skill counts the rendered lines:

Asked for about 66 characters per line in Verdana, the skill set the box in em and checked it with measure-line.js: 66.1 characters per line, range 60 to 71, in a box of 34.5em (54.3ch).

A feature tag is not coverage. font-features.py reads the file: Source Serif 4's roman has complete small caps and its italic has none, although both files list the same family.

# Source Serif 4 Italic  (SourceSerif4-Italic[opsz,wght].ttf)
italic: yes
default figures: tabular lining
GSUB: aalt case ccmp dnom frac liga lnum locl numr onum ordn pnum sinf ss01 ss02 ss03 subs sups tnum zero

  smcp: ABSENT  (small caps from lowercase: should cover a-z and accented letters)
  c2sc: ABSENT  (small caps from capitals: should cover A-Z and accented capitals)

check smcp: absent
  missing: abcdefghijklmnopqrstuvwxyzäöå

One article set twice. The "before" uses template defaults; no model wrote it:

examples/editorial/ holds both pages and a table of every change with the section it follows. The audit blocks before.html with 4 HIGH findings and approves after.html.

In CI and pull requests

The linter exits 1 when a HIGH finding remains, so it can gate a pull request with no install. --diff limits it to what the branch changed, which lets an older codebase adopt it gradually:

node path/to/measured-type/scripts/lint-css.js src --diff origin/main

The rendered audit needs Playwright and a page: point it at a preview deployment or a built HTML file. Exit codes for both: 0 approve, 1 block, 2 usage error.

Reference, by decision

Evidence

The head-to-heads ran on Claude Opus 5.5 on 29 October 2026 (head-to-head 3 added Sonnet 5.5), two runs per cell; the 2×2 and spec 0008 ran on Sonnet 5.5 on 30 October, five and then ten runs per cell. Cases and graders were committed before the runs, and every result is reproducible from the committed run files.

How to read it. The 2×2 and spec 0008 separate the skill's guidance from its measuring tools and from one sentence of advice. On line length the browser does most of the work, and the skill adds a little on top: with a browser its runs came within a quarter of a character of 66 on average, against 0.68 off without it (p = 0.031, ten runs per cell) and 1.54 off with the hint (p = 0.0001); without a browser its estimator beat a model guessing by about one character (p = 0.010). Every run of every kind was inside the graded band. On the fluid hero the skill raised growth under zoom (1.50× against 1.43×, p < 0.0001), but one sentence naming the 1.6× bar raised it further (1.63×, p < 0.0001); 14 of the 20 runs with that sentence reached the bar by giving up the 72px desktop size the task asked for, and no configuration reliably met both until spec 0009 added type-scale.js --fit, after which all 20 runs with the skill met both; that is the tool printing the answer, measured on the case that motivated it. On a held-out twin (48 to 80px) the skill again met all three checks in 10 of 10 runs against 0 of 10 without it, and the one-sentence hint matched it (10 of 10). The bar is this project's own convention. Before these experiments, the guidance changed nothing measurable on the cases written after the content was frozen. The development set shows that the content reaches the agent, but the references contain worked answers for some of those cases; most of the baseline's misses there are conventions this project chose (the 1.6× zoom bar, the 1.15× step floor, spacing from the body line). Not yet tested: models other than Claude, and cases beyond these two for the hint.

Each results folder has the method, every run's output, grade and timing, and every correction and incident. How to run the cases yourself: evals/README.md.

Pairs with Rhythmguard

Rhythmguard, a Stylelint plugin by the same author, keeps every spacing value (and, opt in, every type size) on your scale. Measured Type decides whether the scale reads well. They meet only at the type scale: type-scale.js --prefix font-size writes tokens Rhythmguard reads as its typography scale, and its README has the config.

On one stylesheet, run with Stylelint 17.16 and Rhythmguard 3.14.0, each tool finds what the other leaves alone:

A strict baseline grid splits the same way. Rhythmguard's editorial-baseline presets keep spacing values on a 4 or 6 unit cadence in the source; whether the text then sits on the grid depends on the font that loads, so page-audit.js --baseline measures it in the browser (spec 0020).

Identity

_{Generated illustrations of the identity. They show no measurement.}

Contributing

Corrections, wrong results and new eval cases are the most useful contributions, and each has an issue form that asks for what makes it checkable: a page that reproduces the result, a source or a measurement. CONTRIBUTING.md covers the setup (npm test with Playwright and fontTools), the spec-and-test-first workflow, the house style and how an eval is pre-registered and reported. Questions and ideas go to Discussions; changes are listed in the changelog. Everyone taking part follows the Code of Conduct, and security problems are reported privately (SECURITY.md).

Support Measured Type

Measured Type is free to use. If it saves you time, optional sponsorship helps keep it measured and maintained. Contributions are welcome too (Contributing).

License

Text (SKILL.md, references and eval prose) is CC BY-NC 4.0 because it adapts Richard Rutter's webtypography.net, which is published under that license. Scripts are MIT. Contributions take the license of the files they change (CONTRIBUTING.md). The test fonts are under the SIL Open Font License. The Measured Type name and the artwork in .github/brand/ identify this project and are not licensed for other use. See LICENSE; the skill folder carries its own copy of the notices, so an installed skill keeps them.

Can I use it in paid work? The scripts, MIT, can be used anywhere. The text is CC BY-NC 4.0, which restricts uses primarily intended for commercial advantage. Whether an agent consulting it during paid client work is such a use has not been settled with the rights holders; this README does not settle it. If it matters for your work, read the license or ask before you rely on it.

The rules follow Robert Bringhurst's The Elements of Typographic Style and the rule order of webtypography.net. They are paraphrased and the CSS is rewritten for current browsers. The skill is a working translation, not a substitute: if it is useful to you, buy the book. The wordmark is set in Source Serif 4 by Adobe; the brand's interface type is IBM Plex. Both are released under the OFL.

Measured Type is an independent project. It is not affiliated with, endorsed by or sponsored by Robert Bringhurst, Richard Rutter, webtypography.net, Matej Latin, Ina Saltz or the publishers of their books; their names appear only to credit the sources.