Week 2 tutorial notes
Typography: Type Roles, Hierarchy, Readability, and Tone
Explain typography as roles, hierarchy, readability, tone, accessibility, and system reuse, then create a typography audit board and one evidence-backed type decision.
Lesson thesis
Typography is the product reading system. Type roles, scale, weight, line length, spacing, and tone tell users what to read, compare, trust, and act on before the words are fully processed.
Preparation status
Outline only. Research pass still required before teaching.
1. Lecture spine
This lesson should become a full typography studio, not a reading assignment. The learner studies type as an interface system: roles, hierarchy, readability, tone, accessibility, and reuse.
The practical standard is simple: every important piece of text should have a job, a readable treatment, and a reason for its visual priority.
2. Vocabulary
Typography vocabulary should make the learner more precise. The goal is not to sound advanced. The goal is to diagnose why a screen is hard to read, scan, trust, or act on.
Type role
The job a text element performs in the interface.
Example: Title, heading, body, label, helper text, action text, caption, or data.
Type hierarchy
The order in which text asks to be read.
Example: Screen title first, summary second, action label third.
Readability
The comfort and effort required to read text in context.
Example: Size, line height, line length, contrast, and paragraph spacing.
Type scale
A reusable set of type roles and treatments.
Example: Title, heading, body, label, caption, and button label styles in Figma.
3. AI critique lab
The AI prompt should force role-first critique. The learner should compare AI advice against the visible screen and record accept, adapt, and reject notes.
I am learning typography for product interfaces. Screen or rough UI: [describe the screen or paste a screenshot description] Please review the typography in simple but professional language. Return: 1. Type roles: title, heading, body, label, helper text, action text, caption, and data text. 2. Hierarchy: what should be read first, second, and third? 3. Scale and weight: which text is too loud, too quiet, too similar, or too small? 4. Readability: line length, line height, paragraph spacing, and scanning issues. 5. Voice: what the typography makes the product feel like before the words are read. 6. Accessibility risk: resizing, contrast, small text, dense text, and label clarity. 7. System recommendation: a small type scale with 4 to 6 reusable roles. 8. AI risk: where a generated UI may look polished but use weak type hierarchy. 9. One improvement: the first typography change I should make and why. Rules: - Do not choose fonts for decoration first. - Start with type roles and reading order. - Avoid vague advice like "make it modern." - Mark assumptions clearly. - Finish with one typography decision sentence.
- Does the output classify type roles before recommending style?
- Does it name the intended reading order?
- Does it identify readability risks with visible evidence?
- Does it propose a reusable type scale?
- Does it include accessibility and resizing risk?
- Does the learner reject decorative font advice that ignores the task?
- The answer says only to use a modern font.
- The answer recommends too many sizes or weights.
- The answer ignores labels, captions, helper text, or action text.
- The answer treats tone as brand mood without checking readability.
4. Studio exercise
The studio should produce a typography audit board. It should not become a font-pairing exercise. The artifact must show role, reading order, readability, accessibility, AI critique, and one decision.
- Inventory every type role on one screen.
- Mark the intended first, second, and third read.
- Identify one scale, weight, spacing, or contrast issue.
- Create a small reusable type scale in Figma or a simple board.
- Run the AI critique prompt and mark accept/adapt/reject notes.
- Write one typography decision sentence with product reason.
5. References
These references support the tutor. The lesson itself should teach the fundamentals directly through examples, prompts, and board work.
Reference spine
References
Professional guidance for readable text, type styles, dynamic type, hierarchy, and platform-aware typography.
Material Design: typographyA design-system model for type scale, type roles, readability, and consistent interface hierarchy.
GOV.UK Design System: typographyA practical public-service reference for readable body text, headings, links, and content hierarchy.
Figma Help Center: text stylesTool guidance for creating and applying reusable text styles so typography decisions become systematic.
W3C WCAG: resize textAccessibility guidance for supporting text resizing without loss of content or functionality.
Web examples
Use this to show how a mature system defines type as roles, not decoration: large title, headline, body, caption, label, and supporting text each have a job.
Material DesignTypography overviewUse Material type roles to teach the difference between visual size and interface responsibility. A type choice should explain what the text is doing.
GOV.UK Design SystemTypographyUse GOV.UK to show restraint: readable defaults, clear headings, strong links, and no decorative typography that slows task completion.
Figma Help CenterCreate and apply text stylesUse Figma text styles to turn a one-off type decision into reusable product design practice.
Choose one screen, annotate type roles, define intended reading order, run the typography prompt, create a small reusable type scale, and write one typography decision sentence.
- Can the learner identify type roles beyond title and body?
- Can the learner explain intended reading order through scale, weight, and spacing?
- Can the learner identify readability issues in line length, line height, text size, and density?
- Can the learner explain tone without treating font choice as decoration?
- Can the learner consider contrast, resizing, labels, and accessibility risk?
- Can the learner use AI critique while rejecting decorative font advice?
I am learning typography for product interfaces. Screen or rough UI: [describe the screen or paste a screenshot description] Please review the typography in simple but professional language. Return: 1. Type roles: title, heading, body, label, helper text, action text, caption, and data text. 2. Hierarchy: what should be read first, second, and third? 3. Scale and weight: which text is too loud, too quiet, too similar, or too small? 4. Readability: line length, line height, paragraph spacing, and scanning issues. 5. Voice: what the typography makes the product feel like before the words are read. 6. Accessibility risk: resizing, contrast, small text, dense text, and label clarity. 7. System recommendation: a small type scale with 4 to 6 reusable roles. 8. AI risk: where a generated UI may look polished but use weak type hierarchy. 9. One improvement: the first typography change I should make and why. Rules: - Do not choose fonts for decoration first. - Start with type roles and reading order. - Avoid vague advice like "make it modern." - Mark assumptions clearly. - Finish with one typography decision sentence.
Home study
Choose two safe product screens. For each, inventory the type roles, mark first/second/third reading order, identify one readability issue, one accessibility risk, and one typography decision with a product reason.