TaskBuild a typography-only article. <article class='prose'><p class='eyebrow'>BLOG</p><h1>Why CSS typography wins in 2026</h1><p>Body paragraph 1 (Lorem ipsum...).</p><h2>Section heading</h2><p>Body paragraph 2.</p></article>. CSS: define :root tokens (--scale 1.25, --text-base 1rem, --text-lg, --text-xl, --text-2xl using calc/var). body: system-ui sans-serif, font-size var(--text-base), line-height 1.6, padding clamp(1rem, 4vw, 3rem). h1: font-size clamp(2rem, 5vw + 1rem, 3.5rem), line-height 1.15, letter-spacing -0.02em, text-wrap balance. h2: font-size var(--text-xl), text-wrap balance. .eyebrow: font-size 0.8rem, letter-spacing 0.08em, text-transform uppercase, color #71717A. p: text-wrap pretty. .prose: max-width 65ch, margin 0 auto.
Module capstone: typography-first article page
200 XP14 min
Theory
Putting B4 together
A blog article page where typography does ALL the work β no decorations, no fancy backgrounds, just type. The kind of page Substack, Medium, and Stripe ship.
Combine every B4 concept:
- B4-01: system-ui font stack on body, ui-monospace on code.
- B4-02: rem for absolute sizes, em for em-related (button padding).
- B4-03: clamp() for the h1 (fluid).
- B4-04: line-height 1.6 on body, 1.15 on h1.
- B4-05: Variable font weight (we skip the @font-face but use weight as a token).
- B4-06: text-wrap balance on headings, pretty on p.
- B4-07: Modular scale (--text-base/--text-lg/--text-xl/--text-2xl).
- B4-08: letter-spacing -0.02em on h1.
- B4-09: max-width 65ch on .prose, margin auto.
After this, you've shipped typography that doesn't look hobby.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.