Install Where it helps Evidence Read the skill 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.

It rarely loads on its own (about one run in ten): name it when you want it.

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).

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.

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:

Identity

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

Support Measured Type

Measured Type is free to use. If it saves you time, optional sponsorship helps
keep it measured and maintained. Issues with a reproducible case, new eval
cases and corrections to the references are welcome contributions too.

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. 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.