BitWithBite
UI/UX Worksheet
🎨 Typography
SCORE___ / 20
NameClassDate
After this worksheet you can
Explain type scaleCompare serif vs sans-serifExplain font pairingApply line-height/length rules📚 Quick Recap
🎯 What you'll practice: Type scale, font pairing, and typographic readability rules.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1A type scale defines:
2Serif fonts are generally associated with:
3Recommended line-height range for body text is:
4Recommended line length for readable text is:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5Combining two typefaces with enough contrast is called font .
6 Fonts is a free source of reliable web font pairings.
7Why is a limited type scale better than using arbitrary font sizes everywhere?
8Give an example of a good serif + sans-serif font pairing.
9Why does line length matter for readability?
🚀 Section C · Challenge ● CHALLENGE 5
10Design a simple type scale (4 sizes: h1, h2, body, caption) for a blog. Explain your reasoning for each size.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-B 4-B | 5 = pairing 6 = Google 7 = A limited scale keeps sizing consistent and predictable across the whole design instead of ad-hoc and mismatched 8 = e.g. Playfair Display (serif headline) + Inter (sans-serif body) 9 = Lines that are too long make it hard for the eye to track back to the start of the next line, slowing reading | 10 = Answers vary — e.g. h1: 32px bold for the post title, h2: 22px for section headers, body: 16px for readable paragraphs, caption: 13px for metadata/dates.