Learn typography, one decision at a time.
Master typographic principles, from micro-details like counters and sidebearings to macro-systems like musical modular scales, pair kerning, and WCAG 2.2 screen accessibility. Completely free, no registration required.
Recommended Learning Pathways
Getting Started with Type
Build an intuitive and technical vocabulary for letterforms and harmonious pairing.
Typography for Screens & UI
Calibrate WCAG 2.2 contrast, fluid clamp scales, and micro-typography ergonomics.
Font Engineering & Micro-Spacing
Master OpenType font variations, variable axes, pair kerning, and tracking math.
Curriculum Inventory (28 Topics)
Sorted by Pedagogical ProgressionTypography Fundamentals
The foundational role of type in visual communication, language preservation, and human cognition.
The Anatomy of Letterforms: From Stems to Counters
Master the universal structural terminology of type design. Understand baselines, ascenders, descenders, counters, and why optical alignment differs from mechanical geometry.
Typeface Classification: Historical & Functional Taxonomy
From Humanist and Transitional serifs to Geometric and Neo-grotesque sans: understand the historical lineage of letterforms.
Serif Fonts Guide: Elegance, Authority, and Modern Digital Legibility
Debunking the myth that serifs are unsuited for screens. Explore bracketed, unbracketed, and slab serif implementations in contemporary digital products.
Typography Psychology: How Letterforms Elicit Emotion & Trust
Explore how geometric stroke weights, curvature, and formality trigger subconscious cognitive impressions of reliability, prestige, or playfulness.
Dual-Font Pairing: Contrast, Concordance, and Conflict
Learn how to pair display headlines with high-legibility body typefaces. Discover how historical concord, geometric sympathy, and distinct structural roles prevent visual disharmony.
Typography Hierarchy: Directing the Eye with Weight, Size, and Space
Structure content so readers can effortlessly scan, parse, and absorb information according to visual priority.
Modular Scales & Fluid Responsive Type Engineering
Construct mathematical typographic hierarchies using classic musical intervals (Minor Third, Major Third, Perfect Fourth) and translate them into responsive CSS clamp() formulas.
Spacing & Rhythm: Vertical Baseline Grids and Micro-Leading
Align headlines, body paragraphs, and UI components to a unified 4px or 8px vertical baseline rhythm for cohesive composition.
Measure & Readability: The 45-to-75 Character Reading Envelope
Why line length (the measure) directly dictates cognitive fatigue. Constrain containers using modern CSS ch units for comfortable sustained reading.
Kerning, Tracking & Letterspacing: The Craft of Horizontal Spacing
The definitive architectural guide to horizontal spacing. Distinguish pair-specific kerning (AV, To) from uniform tracking, learn when to tighten headlines, and apply CSS font-kerning and letter-spacing correctly.
Typesetting Rules: Punctuation, Quotes, Hyphens, and Hanging Punctuation
Master the typographic conventions that separate amateur layouts from refined editorial craft: em dashes, en dashes, curly quotes, and optical margin alignment.
Typography for UI Design: Buttons, Badges, Tables, and Form Labels
Calibrate letterforms for dense SaaS applications, data-heavy dashboards, interactive controls, and tabular financial grids.
Screen Readability & WCAG 2.2 Typographic Accessibility
Implement strict compliance with WCAG 2.2 Level AA and AAA standards. Optimize contrast ratios, line lengths (measure), line-height (leading), and letter spacing for all users.
Typography for Branding: Wordmarks, Custom Letterforms, and Identity
Crafting distinctive brand typography that scales across mobile app icons, outdoor billboards, and legal documents with unmistakable voice.
Editorial Typography: Multi-Column Grids, Pull Quotes, and Drop Caps
Techniques from luxury publications and long-form digital magazines: balanced subheads, drop caps, and responsive multi-column layouts.
Typography Posters: Expressive Scale, Overlap, and Tension
Push type to the edge of abstraction. Balance dramatic scale shifts, overlapping glyphs, and asymmetric negative space in promotional posters.
Typography for Print: Ink-Traps, Dot Gain, and High-Resolution Output
How physical ink, paper stock, and printing plates affect letterforms: ink-traps, dot gain compensation, and vector prepress standards.
Typography for Presentations: Legibility from the Back of the Room
Optimizing keynote and pitch deck typography for high-ambient lighting, low-resolution projectors, and executive decision-makers.
Typography for Social Media: Thumb-Stopping Kinetic Letterforms
Creating high-impact square, vertical, and carousel typography that captures attention within fast-scrolling mobile feeds.
Typography for YouTube & Video: Lower Thirds and Title Cards
Crafting readable lower thirds, chapter cards, and title sequences that do not clash with complex moving backgrounds.
Responsive & Fluid Typography: Mathematical Viewport Calibration
Deep mathematical derivation of linear interpolation formulas for CSS clamp(). Scale typography fluidly across mobile, tablet, desktop, and ultra-wide displays.
Variable Fonts: Engineering Precision with Single-Binary Assets
Deep-dive into OpenType Font Variations (OpenType 1.8). Learn how weight (wght), width (wdth), slant (slnt), and optical sizing (opsz) compress 18 font files into a single 40kb .woff2 asset.
Typography Tokens: Architecting Scalable Design Systems
Structuring semantic design tokens for global typography: mapping base font-size, line-height, and weight to semantic aliases across web, iOS, and Android.
Modern Typography Systems: Comparing Material Design, Apple HIG, and Swiss Craft
A structural comparative study of modern design systems: Google Material 3 type roles, Apple San Francisco Dynamic Type, and traditional International Typographic Style.
Common Typography Mistakes: 12 Traps and How to Fix Them
From faux bolding and squished tracking to low contrast and orphan words: an exhaustive diagnostic guide to spotting and correcting subtle typography flaws.
Typography Checklist: The Pre-Launch Design & Frontend Audit
A comprehensive 24-point checklist to run before pushing any landing page, SaaS application, or brand editorial live to production.
Typography Resources: Foundries, Open-Source Repositories, and Tools
Curated directory of reputable type foundries, open-source font repositories with verified licenses (OFL/Apache), and essential type engineering utilities.
Companion Typography Lab Tools
Letter Anatomy Lab
Inspect real OpenType vector outlines, baselines, cap-heights, and sidebearings on verified reference fonts.
Open Anatomy Lab →Typeface Playground
Real-time testing of line height, letter spacing, measure, and A/B compare treatments with clean CSS export.
Open Playground →Custom Type Engineering
Need bespoke corporate typefaces, Gujarati/Devanagari script extensions, or custom font mastering?
Inquire Engineering Services →