Typography Masterclass

Your course video

What's covered

• Why typography matters: how the right or wrong font can make or break a design, and why it's important for accessibility and readability (including the new EU accessibility laws from June 2025).
• Types of font: serif, sans serif, display, handwriting and monospace, a short history of typesetting, and the anatomy of a font, such as the baseline and x-height.
• Font setting terms: typeface versus font, glyphs, and how to avoid widows, orphans and runts.
• Spacing: leading, tracking and kerning, and how to adjust them without hurting readability.
• Font units and sizes: pixels, points, ems and rems, and good body text sizes for websites and apps (usually 16 to 18px).
• Font personality and brand: choosing fonts that suit a brand, making sure they work across every format, and the best fonts for digital design.
• Finding and pairing fonts: where to find good fonts, what to check in the licence, how to pair them, and how to find out which fonts a website uses.
• Layout and hierarchy: line length, H1 to H6 headings for people and for SEO, type scales, and how to build a clear hierarchy into your designs.
• Real examples: good and bad typography in apps and websites, including common contrast and hierarchy mistakes.
• The process: a step-by-step way to develop a design with fonts, plus UX writing basics and why you should design with real content instead of lorem ipsum.

Practical activity

At the end of the video you'll design a website header in Figma and apply everything you've learned about typography to it. When you buy the course you'll get the activity instructions PDF and a starter header Figma file to download.

1. Look at a few website headers first, to see how the headline, sub-heading and button work together. The activity has 8 real examples to study.
2. Choose a concept for a business, or design a header for your own design portfolio.
3. Make a list of brand words, for example a recycling company that's modern, clean, forward-thinking and transparent. Is the brand friendly or superior, professional or casual, fun or serious? These words guide your font choices.
4. Open the starter header Figma file, or put a desktop frame on a blank Figma page. Using only black and white, write a headline, a short paragraph or sub-heading below it, and a button.
5. If you like, add a photo that suits your idea and mask it in a shape made with Blobmaker.
6. Collect lots of suitable fonts and try them in pairs, such as Source Sans Pro for the headings and Nunito for the body copy, which is the pairing I chose for one brand.
7. Adjust the size, weight, leading, tracking and kerning, and try out heading sizes with a type scale tool.
8. After a few minutes on one idea, copy and paste the whole frame and try a new direction. Keep all the old versions, so you can see how your design has progressed.

You've succeeded when you have at least one header that feels right for the project, using fonts you chose.