Design under constraints~45 min

Design Under Constraints: Two Typefaces, Five Levels

Early preview draft — not yet practitioner or accessibility reviewed.
Goal
Practice the core of interface typography: a small system of sizes and weights that carries a whole product's hierarchy legibly, on a phone, at arm's length.
Scenario
A content-heavy product (docs tool, news reader, learning app — your choice) needs its type system rebuilt: one typeface for headings, one for body, five levels total, working from a 320px phone up.
Audience
A developer who will implement exactly what you spec — sizes, line heights, weights — and nothing you left implicit.
Constraints
Exactly two typefaces (free ones — Google Fonts is fine), exactly five levels. Set REAL content in it: a heading, a subheading, two paragraphs, a caption. Lorem ipsum is not real content.
Deliverable
The five-level spec (name, size, line height, weight for each) plus one screen of real content set in it at phone width, and two sentences on the pairing: why these two faces work together for this product.
Counts on your evidence profile as
A completed Skill Lab with its rubric and your deliverable
Accessibility requirement
Line lengths in your sample must stay in a readable range (roughly 45-75 characters) — a beautiful scale set in unreadable measures fails the lab.
AI policy
AI use is allowed for this lab. Type pairing suggestions from AI are a legitimate starting point; the spec decisions and the real-content test are the practiced skill.
Rubric
  • Legible at phone scale: Body text is at least 16px-equivalent with a line height that survives two-paragraph reading on a 320px screen — checkable from the spec alone.
  • Hierarchy needs no color: The five levels are distinguishable in pure black-on-white — size/weight/spacing do the work.
  • The spec is buildable: A developer could implement every level from the spec without asking a single question — nothing left as "designer's eye."

Skills: Typography, Layout

Relevant to: UI Designer, Visual Designer, Graphic Designer

Your work

Sign in to start this lab.