64 pages packed with actionable typography learnings. Understand categories, families, terms, performance, purpose, size, weight, hierarchy, pairing, and styles.

Early bird $19
Includes FREE Typography design kit for Sketch and Adobe XD.
Get it now!

Whats inside?

  • Type Categories
    Categories make selecting fonts a little easier. Each category has a specific characteristic.
  • Type style
    Similar to handwriting, fonts have different base styles. My handwriting sadly doesn’t have any style.
  • Type terms
    There are 5 key horizontal lines to remember when selecting a font. Next time you smack ’T’ in your favoured design tool, test yourself on these terms.
  • Type selection
    The lazy approach to selecting typography for your product is to select a trendy top 10 web font of the month. This goes against every rule of designing products for people.
  • Type alignment
    There are two axis on a device to consider. Inline and block. Inline is left to right and block is vertical top to bottom.
  • Type hierarchy
    Consistent hierarchy is one of he hardest skills in product design. Define hierarchy early.
  • Type Weight
    As you’ll learn in type performance, you should select a limited number of font weights to reduce the load time.
  • Type Pairing
    The key to pairing fonts is contrast which naturally defines hierarchy in your UI. Your choice of font pairs should come down to accessibility and purpose.
  • Type Performance
    Sadly, when it comes to converting your mockups into a real application you need to be mindful of how fonts will perform across browsers.

A FREE Typography kit for your next product

As well as 64 pages on applying typography to your designs, I've created reusable text styles and actionable examples for your next product.
Use the Light and Dark theme examples in Sketch and XD or personalise fonts to match your brand!
Get it now!

Ready for your favourite Typeface

I've created 6 design kit files with 3 typefaces for Sketch and XD. All use free Google Fonts to get you up and running in no time. Either stick with the fonts I have dropped in or change to match your brand in seconds.
I've added a guide to each file to show you how to quickly change fonts to match your brand!

Type style guide with hierarchy

I've created 9 text styles that follow an 8px line height rule and 4px baseline grid for vertical alignment. Customise this to match your product hierarchy.
I've added a guide to make it easy for you to change the kit to match your brand.

Practical examples marrying Typography with design

I've created 6 super practical examples of how to use the Text Styles in your UI. Blog posts, Hero Copy, Feature copy, and Table labels and row.
I've added a guide to make it easy for you to change the kit to match your brand.

Dark Typography themed kit

Each practical example has a dark theme to match making it easy for you to swing your designs to the dark side!
I've added a guide to make it easy for you to change the kit to match your brand.
"Super easy to digest and makes explaining the importance of Typography to clients easy. Thanks!"

Cindy Zhao

Product Designer, Knit
"Zander's Typography book was the perfect reminder of setting font size and weight. So helpful and easy to use the Type kit!"

Matt Jones

UX Designer, Drawboar

Every successful product experience marries typography with design

Get Typography now!

Recommended for you