agentsclimarketplace

Web typography

Skill Amey-Thakur/AI-SKILLS/skills/css-styling/web-typography

Plug-and-play skills and prompts for every AI coding agent

Install
npx -y skills add Amey-Thakur/AI-SKILLS --skill web-typography

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • 19 days oldThe repository was created 19 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
  • 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Set a type scale, measure, and loading strategy that make text readable and stable across devices. Use when establishing typography for a site or fixing cramped, shifting, or slow-loading text.

SKILL.md

2.3 KB, as published. Nobody here has run it

Web typography

Body text is the product for most sites. Get measure, leading, and loading right and the design is 80% done before a single decorative choice.

Method

  1. Set the measure first. 45-75 characters per line for body copy; enforce with max-width: 65ch on prose containers, not on the page. Long-form reading quality collapses beyond 90ch faster than any font choice can rescue.
  2. Build a modest scale. Base 1rem (never shrink the root), a ratio around 1.2-1.333, and only the steps you use: sm, base, lg, xl, 2xl covers most products. Make display sizes fluid with clamp() (see responsive-design); body text stays fixed or barely fluid.
  3. Tie leading to size and measure. Body: 1.5-1.7 line-height, unitless. Headings: 1.1-1.25. Long lines need more leading, short lines less. Add space above headings (two-thirds) more than below (one-third) so sections cohere.
  4. Load fonts without breaking the page. Self-host WOFF2, preload the one or two critical files, font-display: swap, and define size-adjust-tuned fallback metrics (or use a tool that generates them) so the swap does not reflow the page. Subset to the scripts you serve; a 40KB font beats a 400KB one on every metric that matters.
  5. Use variable fonts when you need three-plus weights. One file serving 300-800 weights costs less than three static files and unlocks font-variation-settings animation; check the file is not carrying axes you never use.
  6. Turn on the quiet features. text-wrap: balance on headings, text-wrap: pretty on paragraphs where supported; font-variant-numeric: tabular-nums in tables; real quotes and hyphens: auto for justified or narrow columns; -webkit-font- smoothing left alone.

Boundaries

  • Users zoom and override; px-based font sizes and maximum-scale=1 fight accessibility and lose. Everything in rem.
  • Icon fonts are ligature hacks with screen-reader side effects; use SVG.
  • Brand display faces are for display; do not push a quirky face into 10,000 words of documentation.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.