How do we create hierarchy, not just identify it?
[Name], will you pray for us today?
Typography is structure — hierarchy, readability, and personality all flow from type choices
You'll understand how type scales create natural hierarchy (ratios, sizes, spacing)
You'll be able to set up reusable text styles that update globally
You'll have started a working type stylesheet for your product page
Why typography matters more than any other visual element
It creates hierarchy — the most fundamental structure in interface design.
A mathematical ratio between sizes
Each step up multiplies the previous size by the ratio — creating natural, harmonious relationships.
Demo: typescale.com
Limit yourself to a maximum of 4 type sizes
Size jumps should be at least 2px — avoid 14px vs 13px (too subtle)
Create variety with color, weight, and case — not more sizes.
Use weight to emphasize and de-emphasize
| Body copy | Regular (400) or Medium (500) |
| Headings | Semi-bold (600) or Bold (700) |
| Large headlines only | Light/Hairline (300 or less) |
Light weights are hard to read at small sizes — save them for display text only.
Reusable styles for consistency across your design
For each style, define:
When you update a style, it updates everywhere it's used.
Demo: Create and apply Figma text styles
What hierarchy structure does your product page need?
Create your type stylesheet
Due: Feb 17 @ 5:15pm
Export as PDF
These styles will evolve — this is a starting point, not final.
Work Session: Finish C1 first (due 5:15pm today), then start C2 type stylesheet
Choose typefaces (Google Fonts, Adobe Fonts, system fonts) · Use typescale.com · Create Figma text styles
1:1 feedback available as instructor circulates
Due today:
C1 Persona Sheet + Product Details (5:15pm)
Due Feb 17:
C2 Type Hierarchy
Before Day 11:
Rough wireframe sketches for PDP