hypertype

Justified display headlines and the OpenType features almost nobody turns on.
For AI coding tools, and the humans cleaning up after them.

Docs · Install · MCP server · Guides · Reference

CSS can justify a paragraph but not a display headline. There is no way in plain CSS to make every line of a big heading stretch to fill the column the way a magazine does. hypertype does that, and turns on the OpenType features most generated markup ignores: tabular and oldstyle figures, real small caps, fractions, a slashed zero. It is built to survive the AI tools that write a whole HTML file at once and won't run a build.

Before and after

Plain CSS	With hypertype

Same words, same layout. The only thing that changed is the type: a justified headline, a serif at a sane line length, a drop cap, small caps on the labels, figures that line up, and quotes that hang into the margin.

What you get

hypertype is three things that share one source:

• An inline kit you paste into a page (hypertype.css + slab.js + micro.js, about 6 kB, zero dependencies). The justified-slab headline CSS can't do, plus OpenType utility classes that compose. The one format that lands in AI tools that won't run a build or fetch a stylesheet. → Getting started
• An agent skill, so Claude and other AI coding tools reach for intentional typography on their own when you ask for a headline, a hero, an editorial layout, or "make the type less generic." → Use as a skill
• A local MCP server (@sceboucher/hypertype, ten tools) that verifies fonts against the real served file, generates context-fit type systems, and critiques typographic hierarchy. No API key, no hosting. → The MCP server

The typographic judgment behind the skill and the server is written up in two guides: building a type system and using hierarchy well.

Install

Point any AI assistant at one file:

"Set up hypertype by following https://raw.githubusercontent.com/sceboucher/hypertype/main/INSTALL.md"

It figures out its own tool and installs the server and skill. Or do it yourself in one command:

npx -y @sceboucher/hypertype install

That detects your tools (Claude Code, Claude Desktop, Cursor, VS Code), registers the MCP server, and installs the skill. Per-tool steps, the chat-only paste path, and the one-click buttons are on the install page.

Use the kit by hand

If you just want the typography in one file, paste the inline bundle:

<!-- Paste hypertype.css into a <style> block; put class="ht" on a wrapper. -->
<div class="ht">
  <h1 data-slab>The future is unevenly distributed</h1>
  <p class="ht-justify" lang="en">Body copy with real hyphenation and a readable measure.</p>
</div>
<script>/* …slab.js… */ slabAll('[data-slab]');</script>

A ready-to-copy file is at dist/hypertype-inline.html. The full slab.js / micro.js API, the utility classes, the OpenType tag catalog, and the browser-support table live in the reference (deep version: docs/REFERENCE.md).

Develop

npm test       # node --test, 30 tests, zero deps
npm run build  # regenerate the skill, the inline bundle, and the docs-site guides

build/generate.mjs keeps SKILL.md, the paste-block, and the guide pages in sync with their sources, so nothing drifts. The MCP server lives in mcp/ with its own suite (cd mcp && npm test) and README. Design notes are in docs/SYNTHESIS.md; how it was tested is in docs/VERIFICATION.md.

License

MIT