Typography in UX/UI Design

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

Ratings 4.57 / 5.00

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!

Description

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.