hypertypelisted

Use whenever generating or styling HTML/CSS or web UI and the typography should look intentional rather than default, especially justified display headlines (the magazine slab effect, which pure CSS cannot do), and underused OpenType features (tabular/oldstyle/slashed-zero figures, true small caps, fractions, case-sensitive forms, ligatures), plus modular type scale, readable measure, text-wrap balance/pretty, drop caps, hanging punctuation, and variable fonts. Reach for this for landing pages, headlines, hero sections, editorial layouts, data tables, and any "make the type nicer / less generic / more editorial" request, even when the user does not say "typography". Inline-first and portable across Claude (Code, Design, Cowork, Desktop) and other AI coding tools (works in artifact sandboxes with no build step). The kit is hypertype.css + slab.js + micro.js.
sceboucher/hypertype · ★ 0 · Web & Frontend · score 70

Install: claude install-skill sceboucher/hypertype

## Advanced web typography (hypertype) When generating HTML/CSS, produce *intentional* typography, not defaults. Apply these by default unless the brief says otherwise. Everything below is inline-safe: no build step, no npm, no remote stylesheet required. **The seven defaults** 1. **Pair type intentionally.** Skip the defaults every AI mock-up uses (Inter/Roboto/Arial, and the Fraunces/Lora/Space-Grotesk look). Choose a display face and a readable text face that someone would actually pick: a grotesk like Archivo or Hanken Grotesk over a humanist sans, or a serif like Source Serif 4 or Newsreader under a clean sans. State the direction before coding, and note the pairing in a comment. 2. **Use a modular scale.** Size headings off one ratio (1.2–1.333), not arbitrary px. hypertype.css exposes `--ht-step-0…4` and `--ht-ratio`. 3. **Turn on OpenType features.** Kerning + contextual alternates always. Then: `tabular-nums` in tables/data/tickers, `oldstyle-nums` in running prose, `slashed-zero` in IDs/code/data, true `all-small-caps` for acronyms, `case` for ALL-CAPS strings, `diagonal-fractions` (scoped) for recipes/measures. Prefer `font-variant-*` longhands over `font-feature-settings` (they compose and inherit; `font-feature-settings` is all-or-nothing). 4. **Hold a readable measure.** Body text `max-inline-size: ~60–66ch`. Never justify a column narrower than ~45ch. 5. **Balance and pretty.** `text-wrap: balance` on headings/short blocks; `text-wrap: pretty` on body paragr