Typography in UX/UI Design

The Complete Designer Guide to Typography Online (+ Figma Typescale File)

What you'll 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!

Requirements
Basic knowledge of Figma (or Sketch)

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 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. There is a PDF and detailed explanation in the videos as well if you want to build the same scale in another program.

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.

Who this course is for
UX/UI Designer or Graphic Designer wanting to learn more about UI Design