Ui Typography
Drop proven CSS typography baselines and audit rules into new pages or design systems without guessing line length, scale, or paragraph rhythm.
Overview
ui-typography is an agent skill most often used in Build (also Ship review, Launch content pages) that supplies CSS typography templates and audit rules based on Practical Typography.
Install
npx skills add https://github.com/bencium/bencium-marketplace --skill ui-typographyWhat is this skill?
- Complete typography baseline template with every property tied to a Practical Typography (Butterick) rule
- Fluid root font-size via clamp(16px, 2.5vw, 20px) plus 120–145% line-height sweet spot on body
- Prose containers enforce 45–90 character line length with max-width: min(65ch, 90vw)
- Paragraph rhythm: choose space-between OR first-line-indent—never both
- Legibility stack: optimizeLegibility, kern/liga features, and antialiased smoothing defaults
- Complete baseline template mapping every property to a typographic rule
- Prose line length enforced at min(65ch, 90vw) within 45–90 character guidance
- Fluid html font-size clamp spanning 16px–20px range
Adoption & trust: 1.2k installs on skills.sh; 273 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your agent writes CSS with arbitrary font sizes, full-width paragraphs, and conflicting indent/spacing habits that hurt readability on the web.
Who is it for?
Solo builders shipping content sites, docs, or SaaS marketing pages who want Butterick-style defaults in one agent-readable reference.
Skip if: Teams that already lock typography exclusively in a component library (e.g. shadcn + Tailwind type plugin) and only want token renames—not full CSS doctrine.
When should I use this skill?
Generating CSS for any web project, building a design system, or auditing existing stylesheets.
What do I get? / Deliverables
You get a documented baseline stylesheet and prose layout constraints your agent can apply or diff against during the next styling pass.
- Typography baseline CSS block
- Prose container layout rules
- Audit checklist implied by template comments
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because the skill ships copy-paste CSS and layout rules during implementation and design-system work. Frontend is where typography tokens, prose containers, and stylesheet audits land in real components and global CSS.
Where it fits
Paste the baseline into globals.css before your agent builds the marketing site template.
Diff production CSS against the prose max-width and paragraph rules before launch QA.
Tighten article and docs typography so long-tail content pages meet readability expectations for organic traffic.
How it compares
Use as a typography rulebook and CSS starter, not as a chart picker or general UI kit generator.
Common Questions / FAQ
Who is ui-typography for?
Indie developers and solo founders who implement their own CSS or maintain a small design system and want typographic defaults an agent can apply consistently.
When should I use ui-typography?
During Build when scaffolding global styles; during Ship when auditing readability before release; during Launch when polishing landing and blog prose layouts.
Is ui-typography safe to install?
It is documentation and CSS patterns only—review the Security Audits panel on this Prism page before adding any marketplace skill to your agent workflow.
SKILL.md
READMESKILL.md - Ui Typography
# CSS Typography Templates Read this file when generating CSS for any web project, building a design system, or auditing existing stylesheets. These templates encode every layout and formatting rule from the skill. --- ## Complete Baseline Template Copy-paste starting point. Every property maps to a specific typographic rule. ```css /* ============================================= TYPOGRAPHY BASELINE Rules from Practical Typography (Butterick) ============================================= */ *, *::before, *::after { box-sizing: border-box; } html { font-size: clamp(16px, 2.5vw, 20px); /* 15–25px range, fluid */ -webkit-text-size-adjust: 100%; /* prevent iOS resize */ } body { font-family: /* your-font, */ Georgia, 'Times New Roman', serif; line-height: 1.38; /* 120–145% sweet spot */ color: #1a1a1a; background: #fefefe; text-rendering: optimizeLegibility; /* enables kern + liga */ font-feature-settings: "kern" 1, "liga" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---- TEXT CONTAINER: LINE LENGTH CONTROL ---- */ main, article, .prose { max-width: min(65ch, 90vw); /* 45–90 chars enforced */ margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); } /* ---- PARAGRAPHS ---- */ /* Choose ONE: space-between OR first-line-indent. Never both. */ /* Option A: Space between (default for web) */ p { margin: 0 0 0.75em 0; } /* 50–100% of font size */ /* Option B: First-line indent (uncomment to use instead) p { margin: 0; } p + p { text-indent: 1.5em; } */ /* ---- HEADINGS: SUBTLE, SPACED, BOLD ---- */ h1, h2, h3, h4 { line-height: 1.15; /* tighter than body */ hyphens: none; /* never hyphenate headings */ page-break-after: avoid; /* keep with next paragraph */ font-weight: 700; /* bold, not italic */ } h1 { font-size: 1.5em; /* smallest increment needed */ margin: 2.5em 0 0.5em; /* space above > below */ } h2 { font-size: 1.25em; margin: 2em 0 0.4em; } h3 { font-size: 1.1em; margin: 1.5em 0 0.3em; } /* ---- EMPHASIS ---- */ em { font-style: italic; } /* gentle emphasis (serif) */ strong { font-weight: 700; } /* strong emphasis */ /* NEVER: strong em, em strong, or u for emphasis */ /* ---- ALL CAPS: ALWAYS LETTERSPACED ---- */ .caps { text-transform: uppercase; letter-spacing: 0.06em; /* 5–12% range */ font-feature-settings: "kern" 1; } /* ---- SMALL CAPS: REAL ONLY ---- */ .small-caps { font-variant-caps: small-caps; /* requires font with smcp */ letter-spacing: 0.05em; font-feature-settings: "smcp" 1, "kern" 1; } /* ---- BLOCK QUOTES ---- */ blockquote { margin: 1.5em 2em; /* indent 2–5em */ font-size: 0.92em; /* slightly smaller */ line-height: 1.3; } /* ---- TABLES: CLEAN, NOT CLUTTERED ---- */ table { border-collapse: collapse; width: 100%; } th, td { padding: 0.5em 1em; /* generous cell padding */ text-align: left; vertical-align: top; border: none; /* remove cell borders */ } thead th { border-bottom: 1.5px solid currentColor; /* thin rule under header */ font-weight: 600; } /* Numeric data tables: tabular lining figures */ .data-table td { font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; } /* ---- LISTS ---- */ ul, ol { padding-left: 1.5em; margin: 0 0 1em; } li { margin-bottom: 0.3em; } /* ---- HORIZONTAL RULES ---- */ hr { border: none; border-top: 1px solid currentColor; /* 0.5–1pt, no patterns */ opacity: 0.3; margin: 2em 0; } /* ---- LINKS ---- */ a { color: inherit; text-decoration-line: