/coleoni-type

The type your visitors actually see. On a scale.

Most of an interface is text. Thirteen sizes where six would do, a font that exists only on the designer’s laptop, lines 130 characters long: readers feel all of it as “hard to read”. The skill measures what the page really shows and gives it a scale.

npx skills add c0le0ni/skills --skill coleoni-type

View on GitHub

10 checks Specimen from the page A scale in rem tokens

The typography report of a cake order page

Example

Thirteen sizes and a font nobody loaded.

The CSS asked for Inter. It looked right on the machine that built it, because Inter was installed there. For visitors it was the system font all along.

type.css

body  { font: 15px Inter, system-ui }  /* never loaded */
h1    { font: 800 46px Georgia; letter-spacing: .01em }
.lead { font-size: 18px; max-width: 1100px;
        text-align: justify }
.eyebrow { font-size: 12px; text-transform: uppercase }

sizes in use: 12 13 13.5 14 15 15.5 17 18
              21 22 23 28 46

13 → 6font sizes

~130 → ~65characters per line

1font that only loaded locally

0findings after

Open the report, before Open the report, after See the example on GitHub

Checks

What it measures.

Run it on the live site: that is where missing fonts show.

Check	What counts as a problem
Missing fonts	A family that doesn’t render, or one with no @font-face that only some systems have
Faked styles	A weight or italic the browser synthesizes
Scale	More than 7 sizes, or sizes less than 8% apart
Line height	Under 1.35 on paragraphs; over 1.3 on large headings
Line length	Over 85 characters per line
Details	Justified text, caps without tracking, open tracking on big headings, a lonely last word, numbers without tabular-nums

Install

One command, any agent.

The only package is playwright-core. Part of the interface family with polish, color and layout.

AgentClaude Code, Codex, Cursor…

Node.js18 or newer

Chrome or Edgealready on the machine

01Install

npx skills add c0le0ni/skills --skill coleoni-type

02Use it in your agent

/coleoni-type https://yoursite.com

For your whole user, not just the project-g

Claude Code only-a claude-code

Codex only-a codex

Every Coleoni skillnpx skills add c0le0ni/skills

Examples

Before a redesign, or instead of one.

It shows the report first.

Audit the type of a site.

/coleoni-type https://yoursite.com

Build a scale and apply it.

/coleoni-type the app, propose a scale in rem tokens and apply it

Self-host the fonts.

/coleoni-type the fonts don’t load, fix it

Options

The engine, from the terminal.

node type.mjs https://yoursite.com --out type-report

Option	What it does
`--select "main"`	Only one part of the page
`--lang en\|pt`	Language of the report

Text is most of the interface. Set it well.

npx skills add c0le0ni/skills --skill coleoni-type

View on GitHub See all skills