Typography in UX/UI Design

The Complete Designer Guide to Typography Online, from choosing a Typeface to responsive setup (+ Figma Typescale File)

4.63 (295 reviews)

Udemy

platform

English

language

User Experience

What you will learn

Typefaces & Fonts, and what's the difference?

Serif, Sans Serif & Superfamilies

Where to find typefaces?

How many fonts do you need in your UI Design?

Setting up a type scale. I will show you two different approaches to get the font size right.

Why we use rem and not px. Crucial for accessible UI Design!

Font weight, line height, and line length. The little details that will make your Webdesign shine.

Contrast, and why you are legally required to get this right.

Responsive typography, this is where the magic happens!

You can create your own typography scale alongside that you can re-use for all of your future projects and save yourself a lot of time!

Why take this course?

In this class, you'll learn everything about how typography works online. I will cover all the basics from what web typography is and where to find fonts as well as an in-depth understanding of design & technical decision-making when it comes to typography in UX/UI Design.

If you are switching over from graphic design or already designing online but never quite understood what sizes you should use why there is this box around your text and what on earth happens on different screen sizes, then this the course for you.

Online typography is one of the crucial elements of your Design and the place where things tend to get wrong if you don't have your basics right. So to make you a pro will dive into:

Typefaces & Fonts, and what's the difference?
Serif, Sans Serif & Superfamilies
Where to find typefaces?
How many fonts do you need in your UI Design?
Setting up a type scale. I will show you two different approaches to get the font size right.
Why we use rem and not px. Crucial for accessible UI Design!
Font weight, line height, and line length. The little details that will make your Webdesign shine.
Contrast, and why you are legally required to get this right.
Responsive typography, this is where the magic happens!

Set up your own typography scale:

In the course, I will tell you everything about typography in UI Design. You can either set up your own type scale independently or use my preset Figma files and customize them with the typeface and settings you choose. Please note that I only teach in Figma and thus only provide Figma files (no Sketch, no AdobeXD). By the way, you can set up a Figma account for free (limited to a certain amount of projects) and view the file for free.

The font I am using is a Poppins, a google font. If you have the Figma App installed it should show automatically. If you are working with Figma in the browser please make sure to download the free font beforehand via google fonts.

Screenshots

Typography in UX/UI Design - Screenshot_01

Typography in UX/UI Design - Screenshot_02

Typography in UX/UI Design - Screenshot_03

Typography in UX/UI Design - Screenshot_04

Reviews

Matt

October 13, 2023

Some useful content, but overall disappointed. Mainly provided a few design rules. No real depth or insights. Could have gotten from a free YouTube video.

Stack

September 7, 2023

Overall, this learning app is a must-try. It's made learning so much more enjoyable and convenient for me. Whether you're a tech whiz or a beginner, this app is a fantastic way to expand your knowledge and skills. I highly recommend it!

Kaushik

July 10, 2023

The course was fantastic! I found the lessons on Typography and learning the fundamentals enjoyable and valuable.

Noel

May 28, 2023

Everything else I mostly know, the only thing I wanted to learn here was PX | Rem | Em. I made a new system from this for the type. Thanks, and I hope I get more details on when Em may be good to use. I like to know how to organize the system itself best. Thank you, I learn a lot!

Soham

April 10, 2023

It was a good course covering all the basics of typography. All the necessary technical details were explained. It would be great if usage of font weight and colors would have been explained with the help of examples.

Lanqi

March 10, 2023

When I purchased this course I didn't realize how much it overlaps with the typography section of the course Responsive UX/UI Design in Figma that I just finished ... In terms of the content itself, it is absolutely great.

Diego

February 9, 2023

Super Super helpful!! really helped me. going deep into details and explained clearly. i was blocked before when making designs because i knew there were so many technical stuff about typography and spacing thati thought where specific to developers but in fact you as a designer really need them to make somethign coherent out of your designs. highly recommended.

Taylor

October 28, 2022

I love the course so far! Learning the basics of Typography. I really like how Christine has broken down the material and explained is so clearly! :)

Priyanshi

August 14, 2022

I enjoyed this course. But i don't know whether it has covered the complete typography topic or need to know anything more.

Michael

June 30, 2022

Useful for learning about typography and building better interfaces for users, or in my case, students.

Tremaine

May 13, 2022

I really enjoyed the course. It's condensed with information but very focused. It does however feel more reference rather than learning.

Laura

April 30, 2022

Great Course again, very clear, excellent visual examples that make the theory much easier to digest. This, for sure, will help me to improve the consistency of my designs.

Alfonso

March 23, 2022

It goes to the point and gives you just enough of theory and example so you can work on your own. Because it's so condensed it only introduces so much information, but the way it's presented makes it clear and it looks good. Would recommend if you're struggling with the definition of your own tipography for your design project.

Sebastian

March 18, 2022

Please .zip the resources. And not to an extern site. Alot of udemy courses don't outsource this. It's annoying.

Zdenko

January 1, 2022

Great course, at first I thought it will be too short, but it covers all important and all things learned are truly practical. Above my expectations.

Charts

Price

Rating

Enrollment distribution

Typography in UX/UI Design - Distribution chart