typography-system

Name: typography-system
Availability: InStock
Author: jacob-balslev

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

Ready to run

npx skills add https://github.com/jacob-balslev/skill-graph --skill typography-system-jacob-balslev

💬 Prompt for ChatGPT / Claude Chat▼

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.