alterlab-vcd-typographer

Generate complete typography systems with hierarchy, modular scales, and CSS fallbacks.

9|1|Updated Mar 26, 2026

Search Tags:#typography #accessibility #hierarchy #type-system #font-pairing #responsive-typography #modular-scale

Ready to run

npx skills add https://github.com/AlterLab-IEU/AlterLab-FC-Skills --skill alterlab-vcd-typographer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: alterlab-vcd-typographer
Source: https://github.com/AlterLab-IEU/AlterLab-FC-Skills/tree/main/skills/vcd/alterlab-vcd-typographer
Command: npx skills add https://github.com/AlterLab-IEU/AlterLab-FC-Skills --skill alterlab-vcd-typographer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Typography design for brands and products is complex and iterative; this skill automates end-to-end type system design, hierarchy specification, and readability optimization, delivering production-ready guidelines and deliverables without manual back-and-forth.

Core Features & Use Cases

Type Analysis & Recommendation: evaluate candidates for display, heading, body, caption roles; propose a cohesive pairing and a clear hierarchy.
System Design & Documentation: generate modular scales, baseline grids, breakpoints, fallback stacks, and CSS-ready output files.
Readability & Accessibility: optimize measure, line height, contrast, and accessibility considerations to support diverse readers.
Workflow Autonomy: conducts research, iterates, self-reviews, and outputs complete documentation with minimal user prompts.

Quick Start

Analyze a project brief and generate a complete type system specification with hierarchy, modular scale, breakpoints, and CSS-friendly defaults.

Frequently Asked Questions about alterlab-vcd-typographer

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

FAQPage Schema

How do I generate a complete typography system for a digital product?▼

Generate a complete typography system by analyzing a project brief to produce modular scales, baseline grids, and CSS-ready fallback stacks. This automates type system design, delivering production-ready hierarchy specifications and readability guidelines.

What is a modular scale and how does it apply to responsive typography?▼

A modular scale is a mathematical ratio used to define proportional typography sizing across hierarchy levels. For responsive typography, it generates consistent base sizes and breakpoints that adapt across digital products while maintaining visual balance.

How do I choose accessible font pairings for headings and body text?▼

Choose accessible font pairings by evaluating candidates for display, heading, body, and caption roles to ensure cohesive contrast and readability. This process optimizes measure, line height, and color contrast to support diverse readers.

Does this typography system generator output CSS-ready code for web development?▼

Yes, the typography system generator outputs CSS-friendly defaults including base size, ratio, line height, letter spacing, color, and fallback stacks. These production-ready deliverables integrate directly into web development workflows.

Can I use this for editorial websites and apps requiring multiple typefaces?▼

Yes, this typography system design applies to editorial websites, apps, and brands requiring multiple typefaces. It specifies distinct hierarchy levels, modular scales, and accessibility-ready guidelines for diverse digital product contexts.

What's the best way to document type hierarchy and readability guidelines?▼

Document type hierarchy and readability guidelines by generating complete specifications that include modular scales, baseline grids, breakpoints, and accessibility considerations. This autonomous workflow outputs ready-to-use documentation with minimal prompts.