Typography Study Guide for UX designers (2024)

LEARN TYPOGRAPHY

Why learning typography is key & what my favorite resources are

As I recently wrote in my article about my favorite UI design books, I’m originally a designer who has a strong focus on research and UX design, so learning about typography is a constant, yet very enjoyable challenge for me.

Back in 2006, Oliver Reichenstein, Founder Information Architects Inc. stated that web design is 95% typography. Naturally, it is just an estimate, but written information is one of the most important content type indeed.

I really like the summary written in the Human Interface Guidelines:

“In addition to ensuring legible text, your typographic choices can help you clarify an information hierarchy, communicate important content, and express your brand.”

So typography plays an important role in digital product design. Here are some of the aspects you should learn about:

• typographic terms (so that you can dig deeper in each topic and talk about it, ask questions etc.)
• different types of typefaces and how to choose fonts for UI design, how to pair fonts
• how to style text, how to establish a meaningful visual hierarchy and how to create a typographic system (e.g. a typescale)
• applying grids, alignment types, creating vertical and horizontal rhythm
• how to use whitespace effectively
• how users read (scan) on the web and reading patterns
• accessibility: e.g. legibility and readability
• emotional design (evoking emotions and feelings by typography, setting the mood)
• internalization and localization (preparing for different markets and languages, e.g. glyphs)
• motion design (kinetic typography)
• performance, e.g. loading times and font file sizes (and other technical details, like px vs. rem — or responsive typography)
• legal stuff, e.g. licensing

So to put it simply, typography plays a critical role in the overall user experience of a product or service, so learning typography is essential for UX designers.

In this study guide, I summarize what my favorite resources are — hopefully I’ll be able to provide a good starting point for your learning journey! 🚀

TLDR: I highly recommend Supercharge Design’s comprehensive Typography Masterclass, it will give you a great foundation, then you should complement your knowledge by the other resources I mention in this article.

Supercharge Design’s Typography Masterclass

This is a mindblowing UI design resource by Supercharge Design (taught by Andrija Prelec): it contains a 5-hour video course, a lot of assignments to solidify your understanding, cheat sheets, discounts for design tools and resources, ebooks, a Notion database of typefaces and more. The release price is $249, so you get a $100 off discount.

This UI Typography Kit contains a collection of Excellent UI Typefaces, Reliable UI Type Pairings, a Figma file for kickstarting your typography work, a Superior Type Foundries list, a teaching material called All about Typography and a Typeface Notion Table, a great database of typefaces.

If you get the course, you’ll also receive this kit as a bonus.

Interactive type tutorial by Erik Kennedy

I learnt so much about typography from Erik D. Kennedy (his learnui.design course is awesome).

In this interactive tutorial, he covers these topics:

• Best practices for styling text
• How to pick great fonts
• Typographical design patterns you can apply to your own designs

Erik Kennedy’s blog

You’ll find several articles on Erik’s blog that are about typography, here are two posts I really like:

What I mostly appreciate about the article, The Step-by-Step Guide for Pairing Fonts is the fact that it goes much further than pairing: it emphasizes the importance of setting clear usage rules:

“As we add more fonts, it becomes more and more important to be clear about which is used when. With just two fonts, you’d think this is pretty simple, right? Headers: Scala Sans, Text: Minion

Not so fast! Even in a fairly straightforward text-based site, there are plenty of other places we will need to pick a font: Bylines, Subheaders, Navigation menus, Contact forms (labels, text inputs, buttons), Footers”

Font Sizes in UI Design: The Complete Guide is a series of 5 articles, it covers iOS, Android, Web and the general rules you should follow, for instance:

“as of writing, the typical desktop now has about 33% smaller pixels than your typical mobile device. This means that it’s not stupid to make any desktop text about 33% larger than its mobile equivalent, at least on a page optimized for longform reading.”

Typewolf’s Typography Resources by Jeremiah Shoaf

Jeremiah Shoaf’s website is a fantastic design inspiration resource. You should also subscribe to his newsletter.

Material Design Guidelines

Material Design Guidelines covers so many typography topics, like the different properties and terminology, type classifications, baseline grids, legibility and readability, spacing, alignment — it is a great starting point for beginners!

The Human Interface Guidelines (HIG)

While Material Design Guidelines provides a more detailed general overview of typography, you should check out HIG, too, e.g. it contains a list of best practices, and it is also useful to know about the system fonts of Apple.

Google Fonts Knowledge

Google Fonts Knowledge is a good starting point for discovering the world of typography, for instances it contains a set of introductory articles and articles on choosing fonts and pairing typefaces. It also provides a Glossary.

Practical Typography by Matthew Butterick

Practical Typography is a great comprehensive resource of the basics. Matthew explains really well why we are typographers:

“Typography is the visual component of the written word. Thus, being a publisher of the written word necessarily means being a typographer. This book will make you a better typographer.”

He also lists out why you should care about typography:

“Typography can create a better first impression. Typography can reinforce your key points. Typography can extend reader attention. When you ignore typography, you’re ignoring an opportunity to improve the effectiveness of your writing.”

Matthew generously made his book free, so it is a very accessible resource (and if you like it, you can support him by paying for the book.)

The Anatomy of Type by Stephen Coles

It is an awesome book that helps you develop an eye for typography: after reading it, you’ll be able to spot little differences in typefaces.

“The Anatomy of Type explores one hundred traditional and modern typefaces in loving detail, with a full spread devoted to each entry. The full character set from each typeface is shown, and the best letters for identification are enlarged and annotated, revealing key features, anatomical details, and the finer, often-overlooked elements of type design.”

Stop Stealing Sheep and find out how type works

erik spiekermann’s iconic typography book has recently been uploaded as a free resource, you can get it here: “Stop Stealing Sheep and find out how type works” (PDF, 23 Mb). Its 4th edition contains updated content, e.g. a new chapter on variable fonts.

Here is a recent interview with Erik.

Flexible Typesetting by Tim Brown

Tim Brown’s book explains what typesetting is: “Setting type well makes it easy for people to read and comprehend textual information. It covers jobs like paragraphs, subheads, lists, and captions. Arranging type turns visitors and passersby into readers, by catching their attention in an expressive, visual way. It’s for jobs like large headlines, titles, calls to action, and “hero” areas. Calibrating type helps people scan and process complicated information, and find their way, by being clear and organized. This is for jobs like tabular data, navigation systems, infographics, math, and code”

“Typesetting shows readers you care. If your work looks good and feels right, people will stick around — not only because the typography is comfortable and familiar, but also because you show your audience respect by giving their experience your serious attention”

Btw. I heard about this book from Piotr Sierżęga — thanks for the recommendation!

Fonts Ninja

It is one of my favorite browser extensions (next to muz.li :) ), I’ve learnt so much thanks to this little tool: it lets me discover and identify fonts and their attributes in a very smooth way.

What The Font

This tool helped me many times in the past: I just uploaded an image, and I could quickly find out what font was used in the given design.

Type Scale Calculator

Jeremy Church created this great online tool inspired by Tim Brown’s Modular Scale site.

Michael Wong shows you how to use this tool in this video:

Wordmark

Wordmark is a fantastic tool that helps you choose the right font for your project. Just enter a word, then check out how it looks with all the fonts on your computer. Created by Fahri Özkaramanlı. Localfonts.xyz is a very similar too, check that out, too.

Style Manual

A reference document by Andy Taylor. It contains rules on punctuation, title capitalization, abbreviating words and a lot more — it is a useful guide especially if English is not your native language.

Accessibility for Teams: Typograpy (U.S. GSA)

“Everyone benefits from designs that are easier to see. People with different visual abilities see your designs in varying ways — the diverse nature of impairments creates a wide variation in how your designs are perceived. A clean and clear visual presentation helps everyone make sense of a website’s information and functionality.”

WCAG Guidelines

Web Content Accessibility Guidelines (WCAG) “explain how to make web content more accessible to people with disabilities” (Source). Remember, disabilities can be temporary and situational, too! E.g. a parent holding a child, or reading a screen in direct sunlight (I love Microsoft’s inclusive design toolkit, but that is an other topic).

There are useful Figma plugines that help you with designing for accessibility, I recommend you to check out Stark.

“With tools like Contrast Checker, Focus Order, Alt-Text Annotations, Vision Simulator, and more all in one place, you can find accessibility issues in a design before it goes into production — or quickly analyze and fix what’s already in flight.”

Typespiration

Inspirational font combinations and color palettes free to use in your own designs.

Volume 01. Typography Tips

A great article by Nguyen Le: he explains that creating clean looking typography is all about contrast:

“So when it comes to using and controlling type, think about how you can use contrast to great effect to:

- Emphasise or de-emphasise text

- Create order and hierarchy

- Evoke emotion

- Promote readability and ease of use

- Make the damn work beautiful”

He lists out all the tools you have to achieve this contrast, and he uses a lot of real life examples!

Thinking with Type — book and website

This book is a classic one, I’m not saying you must read it, but I think you’ll enjoy it, it contains a lot of good examples. And the 3rd, updated version is coming this year! (Which is really good news, since the 2nd edition was published in 2010, it’ll be nice to see new, fresh examples.)

“Ellen Lupton provides clear and focused guidance on how letters, words, and paragraphs should be aligned, spaced, ordered, and shaped. The book covers all typography essentials, from typefaces and type families, to kerning and tracking, to using a grid.”

There is also a website with the same name that contains a vast amount of typographic knowledge.

The Elements of Typographic Style Applied to the Web

Richard Rutter applied the principles written in Robert Bringhurst’s book The Elements of Typographic Style to the web— btw. Bringhurst’s book is also worth checking out, for instance one of my favorite designers, Chris R Becker recommends it, too in this article: UX Typography Tips. Richard then went on and wrote a book on this topic in 2017, it is called Web Typography, you can download a sample chapter here.

Fonts in Use

An other great website for typography inspiration.

“Fonts In Use is a public archive of typography indexed by typeface, format, industry, and period. Supported by examples contributed by the public, we document and examine graphic design with the goal of improving typographic literacy and appreciation.”

Guide for designing better mobile apps typography

Andrii Zhulidin focuses on nuances and hacks that can be used in the typography in mobile apps design.

Typographic Hierarchy in Print, Web & App Design

Visual hierarchy enables viewers to get the things they need quicker. This is why it’s key to let your print, web, or app design perform at its best. In this practical article you will learn how to leverage the two main principles of visual hierarchy in typography.

Pimp my Type is a typography knowledge base by Oliver Schöndorfer, check out his other awesome articles here.

Typography resources by Figma

My related UX Knowledge Piece Sketches

Design System examples

I believe that it is really useful to analyze existing design systems. Here are some typography sections from my favorite design systems:

• U.S. Web Design System (USWDS)

• Shopify Polaris

• IBM Carbon

• Pinterest Gestalt

• Audi

• Ant

• Atlassian

Discover more design systems here:

(Naturally, Material Design and HIG are design systems, too, but I wanted to highlight and discuss them in their own, distinct section.)

Type Connection — A Typographic Dating Game

Learn how to pair fonts the fun way:

“Start by choosing a typeface to pair. Like a conventional dating website,
Type Connection presents you with potential “dates” for each main character — without the misleading profile photos and commitment-phobes. The game features well-known, workhorse typefaces and portrays each as a character searching for love. You are the matchmaker.“

Kern Type — a letter spacing game

Finally, here is a little kerning game for you — you can see my 100/100 score on the screenshot above.😄