skills.rest
legioncodeinc
legioncodeincOFFICIAL
Explore all skills by this author →
WebsiteGitHub

typography-font-stinger

Implements web font loading strategies, variable font subsetting, and fluid clamp() type scales.

84|37|Updated May 23, 2026
Search Tags:#typography#font-display#variable fonts#web fonts#fluid type#next/font#css clamp
One-click install
npx skills add https://github.com/legioncodeinc/vibe-coding-tools --skill typography-font-stinger-legioncodeinc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typography-font-stinger
Source: https://github.com/legioncodeinc/vibe-coding-tools/tree/main/src/skills/typography-font-stinger
Command: npx skills add https://github.com/legioncodeinc/vibe-coding-tools --skill typography-font-stinger-legioncodeinc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Web typography decisions directly affect Core Web Vitals (LCP, CLS), accessibility, and brand consistency, yet font loading, subsetting, and type scale setup are easy to get wrong. This Skill encodes the 2026 state-of-the-art for the full technical typography stack so font infrastructure is implemented correctly the first time. ## Core Features & Use Cases - Font Hosting Strategy: Decision tree covering next/font (Google and local), Fontsource npm imports, and full self-hosting with a pyftsubset subsetting pipeline. - FOIT/FOUT/FOFT Remediation: A font-display decision matrix plus size-adjust and metric-override patterns to eliminate layout shift from font swapping. - Fluid Type Scales & Token Layer: clamp()-based modular scale arithmetic, vertical rhythm tokens, and a three-tier font-token CSS architecture wired into Tailwind. - Use Case: Ask it to set up fonts for a Next.js 15 App Router project and it produces app/fonts.ts with next/font, a tokens/typography.css fluid scale, and a performance audit checklist. ## Quick Start Set up fonts for my Next.js App Router project using next/font with a fluid type scale and a typography token file.

Frequently Asked Questions about typography-font-stinger

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up fonts in Next.js App Router with next/font?▼

Configure fonts in app/fonts.ts using next/font/google or next/font/local with subsets, display, and a variable option, then apply the CSS variable className to the html element in app/layout.tsx. Reference the variable in a tokens/typography.css file rather than in component code.

next/font vs Fontsource vs self-hosting fonts: which should I use?▼

Use next/font for Next.js projects since it self-hosts at build time and auto-generates fallback metrics. Use Fontsource npm packages for non-Next.js React or Vite projects. Use full self-hosting with pyftsubset subsetting for paid or licensed fonts requiring maximum control.

What font-display value should I use to avoid FOIT and CLS?▼

Use font-display: optional with preload for body text to get the best LCP and zero swap, which is the next/font default. Use font-display: swap with size-adjust and ascent/descent overrides on the fallback font for headings where brand consistency matters more than a metric-matched swap.

How do I build a fluid type scale with CSS clamp()?▼

Compute slope and intercept from your min and max sizes across a viewport range, then express each step as clamp(min, intercept + slope vw, max). Always include a rem component in the preferred value so browser text zoom still works for WCAG 1.4.4 compliance.

Why is my variable font file so large and how do I reduce it?▼

Unsubsetted variable fonts are typically 300-800 kB because they contain glyphs for many Unicode ranges. Subset to the Latin range with pyftsubset and WOFF2 output to reduce the file to roughly 20-60 kB, and declare font-weight as a range in @font-face.

When should I not use this typography skill?▼

Do not use it for typeface selection or brand identity decisions, which belong to design system work, or for per-component application of type tokens in UI code. It also excludes build pipeline font CI steps and persisted user font preference schemas.

Related Skills

Explore More Software Engineering Skills→
andrey-belenandrey-belen

frontend-google-fonts

Automate typography setup and font loading for Next.js and Tailwind projects.

Community
Basic
erikhazzarderikhazzard
1

design__designing-typography

Define semantic typography roles and tokens for web and mobile game UI.

Community
Advanced
doanchienthangdevdoanchienthangdev
4

profiling-performance

Run Lighthouse audits and analyze Core Web Vitals for browser performance.

Community
Intermediate
dembrandtdembrandt
33

modular-scale-typography

Generate modular typography scales from a base font size and ratio.

Official
Intermediate