skills.rest
jacob-balslev
jacob-balslevCOMMUNITY
Explore all skills by this author →
GitHub

typography-system

Define typefaces, modular scales, and WOFF2 variable font delivery.

1|Updated May 6, 2026
Search Tags:#typography#readability#design tokens#variable fonts#web fonts#vertical rhythm#modular scale
One-click install
npx skills add https://github.com/jacob-balslev/skill-graph --skill typography-system-jacob-balslev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typography-system
Source: https://github.com/jacob-balslev/skill-graph/tree/main/marketplace/skills/typography-system
Command: npx skills add https://github.com/jacob-balslev/skill-graph --skill typography-system-jacob-balslev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you design a cohesive typography system that makes type choices consistent across surfaces by defining the typefaces, modular scale, and rhythm rules (line-height and measure) plus reliable web font delivery details.

Core Features & Use Cases

  • Typeface + pairing rules: selects display/text/optional mono roles and documents when each face is justified.
  • Modular type scale & tokenization: derives sizes from a single ratio and maps them to semantic tokens like display, heading-1, body, and caption.
  • Typography mechanics for the web: sets line-height, letter-spacing, measure targets, and implements WOFF2 variable font delivery practices (subsetting and font-display swap) to reduce layout shift.

Quick Start

Design your typography system by defining up to three faces, deriving a modular scale from one ratio, setting vertical rhythm with consistent line-heights and baseline snapping, and specifying WOFF2 subsetting with font-display: swap for variable fonts.

Frequently Asked Questions about typography-system

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

FAQPage Schema
How do I build a typography system with a modular scale for web design?▼

Build a typography system by defining up to three typefaces and deriving a modular scale from a single ratio. Map these sizes to semantic tokens like display, heading-1, and body for consistent hierarchy across surfaces.

How do I set vertical rhythm and line-height for readable web layouts?▼

Set vertical rhythm by establishing consistent line-heights and baseline snapping rules. Apply these typography mechanics across product surfaces to ensure readable layout and validate measure targets.

What's the best way to deliver variable fonts while preventing layout shift?▼

Deliver variable fonts using WOFF2 subsetting and font-display: swap. Specify metrics-matched fallbacks to reduce layout shift and validate CLS targets for reliable web font rendering.

How do I tokenize typography sizes for a design system?▼

Tokenize typography sizes by deriving them from a chosen modular scale ratio. Map these derived sizes to semantic design tokens like display, heading-1, body, and caption to ensure consistent text hierarchy.

Can I use this to justify typeface pairings for display and text roles?▼

Yes, the system selects display, text, and optional mono roles while documenting when each face is justified. This ensures cohesive typeface pairing rules for your product surfaces.

Does this typography system require specific web font formats?▼

The system specifies WOFF2 variable font delivery practices, including subsetting and font-display swap. It validates measure and CLS targets while providing metrics-matched fallbacks.

Related Skills

Explore More Design & Creative Skills→
ConradmakerConradmaker

ds-typography

Codifies product UI typography decisions into reusable frameworks with design tokens.

Community
Advanced
DevXojeDevXoje

ui-design-system

Generate color, typography, spacing, and breakpoint tokens from brand inputs.

Community
Basic
BigPapiCBBigPapiCB
2

accessibility

Identify and enforce WCAG compliance, ARIA patterns, and keyboard operability in UI components.

Community
Advanced
dylantarredylantarre
38

type-scale

Generate CSS, Tailwind, or JSON typography scales with modular ratios and auto-calculated line heights.

Community
Intermediate