DesignBeginnerPreview
Typography Fundamentals
A ground-up course in typography that takes beginners from type anatomy to confident typographic composition. Covers the principles professionals use every day across print and digital work.
Aspiring and early-career graphic designers, brand designers, and anyone who works with type and wants to move beyond guesswork.
Course content
Workbook & downloads
Put the course into practice — a printable workbook plus editable templates you can fill in and reuse.
Preview the workbook
This workbook turns the course material into hands-on practice. Each section pairs with a module and gives you exercises, worksheets, and checklists to apply what you have learned to real work. Work through it alongside the course or use it as a reference after you finish.
Type Anatomy and Classification
Practice identifying, naming, and interpreting letterform anatomy in typefaces you encounter in daily life.
Exercise: Anatomy Dissection
Print or open a large-size specimen of each typeface listed below (at least 72pt). On each specimen, identify and label as many anatomical parts as you can without referring to notes. Then check your answers against the lesson vocabulary.
- Garamond Regular — find the bracketed serifs, the oblique stress axis, the double-storey 'a', and the calligraphic tail on the 'y'
- Futura Bold — find the near-perfect circular bowls, the single-storey 'a' and 'g', and the absence of stroke contrast
- Bodoni — find the extreme stroke contrast, the hairline serifs (unbracketed), and the vertical stress axis
- Georgia — find the Old Style proportions on screen and note how the x-height compares to Garamond at the same point size
Worksheet: Classification Log
Over one week, collect 10 typeface specimens from the world around you — packaging, signage, websites, books. For each, fill in the fields below before looking up the typeface name.
- Source (where you found it)
- Serif or sans-serif
- Estimated classification (Old Style / Transitional / Modern / Humanist Sans / Geometric Sans / Slab / Other)
- Stroke contrast level (none / low / medium / high / extreme)
- Estimated x-height (small / medium / large)
- Tone it projects (1 sentence)
- Actual typeface name (look it up after)
Checklist: Anatomy Fluency Checklist
- I can name the baseline, x-height, cap height, ascender line, and descender line without prompting
- I can distinguish a bracketed from an unbracketed serif by eye
- I can estimate stroke contrast ratio (high / low / none) in an unfamiliar typeface within 10 seconds
- I can identify stress axis (oblique vs. vertical) in at least five different typefaces
- I understand the difference between a true italic and an oblique and can identify which a given typeface uses
- I can explain why x-height matters for legibility at small sizes in one sentence
- I have examined at least one variable font and understand what the weight axis controls
Exercise: Tone Mapping
Choose six typefaces from the list below. For each, write three adjectives that describe its tone, then write one sentence describing the brand or publication it would suit best. Do not look up existing uses before completing your own assessment.
- Assign tone adjectives and a brand context to: Futura, Garamond, Rockwell, Gill Sans, Playfair Display, and Helvetica Neue
- After completing your own assessment, find two or three real brands that use each typeface and compare their brand positioning to your predicted tone — note where your instinct matched and where it diverged
- Identify which typeface in your list you feel least confident reading tonally and spend 15 minutes finding 5 real-world uses of it to calibrate your instinct
Building Typographic Hierarchy
Apply the three-level hierarchy model to real layouts and practice diagnosing and correcting common hierarchy failures.
Exercise: Hierarchy Audit
Find three printed or digital layouts — aim for one editorial (magazine or newspaper), one brand (poster or brochure), and one web page (screenshot at full viewport). For each, complete the analysis below.
- Identify the primary, secondary, and tertiary text elements — write them out explicitly rather than pointing at them
- Apply the squint test to each layout and describe what you see at blur: is there a clear focal point, or is the layout a uniform grey field?
- Identify one specific hierarchy failure in at least one of the three layouts and describe how you would fix it using only size, weight, and style (no color changes)
- Find a layout with more than three levels of text hierarchy and assess whether the extra levels add clarity or create noise
Worksheet: Type Scale Builder
Build a complete type scale for a hypothetical editorial website using the Perfect Fourth ratio (1.333x). Start from a 16px base. Fill in all fields for each level.
- Base size (px): 16
- Ratio: 1.333 (Perfect Fourth)
- Level 1 — Display: size, weight, leading, tracking, use case
- Level 2 — H1 Page Title: size, weight, leading, tracking, use case
- Level 3 — H2 Section Heading: size, weight, leading, tracking, margin above
- Level 4 — H3 Subsection / Label: size, weight, leading, tracking, case treatment
- Level 5 — Body Text: size, weight, leading, measure (column width in ch), paragraph spacing
- Level 6 — Caption / Footnote: size, weight, leading, tracking, color note
Checklist: Hierarchy Check Before You Ship
- I can identify the primary element in my layout within 2 seconds of viewing it at a distance
- My layout has no more than three visually distinct levels of hierarchy
- I have applied the squint test and the focal point is clear
- I have not used bold as a substitute for size to establish the primary level
- All-caps label text has positive tracking applied (+100 to +200)
- My heading sizes follow a consistent ratio rather than arbitrary choices
- The hierarchy works in grayscale (not dependent on color alone)
- On mobile, the headline scale has been reduced to fit the viewport without losing hierarchy clarity
Typeface Pairing
Build and evaluate typeface pairings using the structural framework from the module — contrast, harmony, shared root, and emotional register.
Exercise: Pairing Lab
Build three typeface pairings from scratch using only typefaces available on Google Fonts or Adobe Fonts. For each pairing, produce a specimen showing the pair in a realistic context: a short article layout with headline, subhead, body, and caption.
- Pair one Old Style serif with one Humanist sans — document your reasoning using the three pairing questions from the lesson
- Pair one Geometric sans (headline) with one Transitional serif (body) — then reverse the roles and describe how the character of the layout changes
- Attempt one same-classification pairing (two sans or two serifs) and describe specifically where and why it fails — or, if it works, explain the unusual shared properties that allow it
Worksheet: Pairing Analysis Sheet
Use this worksheet to document and justify a typeface pairing decision for any real or hypothetical project. Complete all fields before finalizing the pairing.
- Project name and context
- Primary typeface: name, classification, weight range available, x-height description, stroke contrast level
- Secondary typeface: name, classification, weight range available, x-height description, stroke contrast level
- X-height compatibility: do they share a similar x-height? (yes / close / mismatched — note the impact)
- Role assignment: which face leads, which recedes, and why
- Shared historical or design root (if any)
- Emotional register: both formal / both casual / intentionally mixed (state the intent)
- License check: desktop / web / app / embedding covered?
- Alternative pairing considered and reason rejected
Checklist: Pairing Quality Checklist
- The two typefaces are from different classifications (or I have a documented reason for same-class pairing)
- One face is clearly dominant and one is clearly recessive
- The emotional register of both faces is consistent with the project brief
- I have tested the pairing in a real layout at real sizes — not just in a font preview tool
- The x-heights are compatible at the sizes I plan to use them
- I have confirmed the license covers all planned use contexts
- I have checked that the pairing does not strongly evoke an overused trend (and if it does, I have a deliberate reason for using it)
Exercise: Brand Pairing Brief
Write a short typeface pairing rationale (200–300 words) for a fictional brand identity as if you were presenting to a client. Choose one of the three brand scenarios below.
- A new independent bookshop: artisanal, community-focused, literary. Annual turnover under $1M. The client wants to feel different from Amazon but not precious.
- A B2B SaaS platform for construction project management: professional, practical, reliable. Primary audience is project managers in hard hats, not designers.
- A premium olive oil brand launching in Canadian specialty food retailers: Mediterranean heritage, modern premium positioning, competing at $28–$45 per bottle.
Spacing, Composition, and the Typographic Page
Put the full typographic system into practice — set precise spacing values, build a style sheet, and complete a full layout audit.
Exercise: Spacing Correction Lab
Download or create a paragraph of text set in an intentionally broken way: incorrect leading, no kerning on a display headline, and inconsistent tracking. Correct all spacing issues systematically and document each change made.
- Set a display headline at 72pt in Playfair Display with default tracking, then apply correct optical kerning and negative tracking — document the before and after values
- Set body text at 14pt with 14pt leading (solid), then correct to 120–145% leading and describe the change in readability
- Apply all-caps label treatment to a 10pt label: set tracking, confirm it reads comfortably, and note the tracking value used
Worksheet: Type Style Sheet Template
Complete this style sheet for a real or hypothetical project. Every field should have a specific value — no vague entries like 'large' or 'bold-ish'.
- Project name
- Primary typeface: name, source, license type
- Secondary typeface: name, source, license type
- Display/Hero: size (px or pt), weight, leading (px or %), tracking (em thousandths), color, max-width
- H1: size, weight, leading, tracking, margin-bottom
- H2: size, weight, leading, tracking, margin-top, margin-bottom
- H3: size, weight, leading, tracking, margin-top
- Body: size, weight, leading, measure (ch or px), paragraph spacing or indent size
- Intro/Lead paragraph: size, weight, leading (if different from body)
- Caption: size, weight, leading, tracking, color hex
- Label/Tag: size, weight, case, tracking, color hex
- Pullquote: size, weight, style (italic/roman), left border or other distinguishing treatment
- Alignment mode for body text and rationale
- Margin/padding specifications for print (in mm) or screen (in px or rem)
Checklist: Final Layout Typographic Audit
- Body text is set at 16px minimum on screen or 10pt minimum in print
- Leading for body text is between 120–145% of the point size
- Display headlines have negative tracking applied appropriate to their size
- All-caps label text has positive tracking (+100 to +200)
- Column width is between 45–75 characters per line for body text
- Alignment mode is left-aligned (screen) or left-aligned/justified with hyphenation (print)
- No widows or orphans are present in the final document
- White space is used actively: margins are consistent and purposeful
- The layout passes the squint test with a clear three-level hierarchy
- All color contrast ratios meet WCAG AA (4.5:1 for body text, 3:1 for large text)
- The type scale follows a consistent ratio (not arbitrary size choices)
- All styles are documented in a style sheet or CSS custom property system
- The layout has been checked at multiple sizes (mobile, tablet, desktop if screen; at 100% and 75% zoom if print)
Your Action Plan
- Complete the Anatomy Dissection exercise using Garamond, Futura, Bodoni, and Georgia before moving past Module 1
- Start a Classification Log this week: collect 10 typeface specimens from your environment and classify each before looking up the name
- Build your first type scale using the Perfect Fourth ratio in the Type Scale Builder worksheet and use it as the basis for your next design project
- Audit one layout you have made in the last six months using the Hierarchy Check checklist — make at least one concrete correction
- Construct three typeface pairings in the Pairing Lab using only Google Fonts or Adobe Fonts, producing a real layout specimen for each
- Complete the Pairing Analysis Sheet for your next brand or editorial project before finalizing typeface choices
- Write one Brand Pairing Brief as a client-facing document — practice presenting typographic rationale in plain language
- Apply the Spacing Correction Lab exercise to a headline in a current or recent project — measure before and after tracking values
- Complete a full Type Style Sheet for one ongoing project using the template in Section 4
- Run the Final Layout Typographic Audit checklist on your next completed layout before presenting or publishing it
Pairs well with
Courses members commonly take alongside this one.
Flagship CoursePreview
Freelance Business Foundations: Position, Price, Sell, and Deliver High-Value Services
Freelancing · Beginner · 16h
Self-pacedPreview
Client GrowthPreview
Freelance Client Acquisition: Outreach, Leads, Referrals, and Deal Flow
Freelancing · Beginner · 15h 30m
Self-pacedPreview
Sales SystemPreview
Freelance Sales & Proposals: Discovery Calls, Scoping, Objections, and Closing
Freelancing · Intermediate · 16h
Self-pacedPreview