Typography for UI Designers | Build a Scalable Type System in Figma
Typography is not about choosing fonts. It is about how text behaves in your product.
In this video, I teach you the fundamentals of UI typography and show how to turn them into a scalable typography system inside a design system.
This is Episode 1 of Design OS: Building a Design System, where we start with the most misunderstood part of UI design.
We break down the theory first, clear common confusion, and then move into Figma to build a real type scale using actual product screens.
Timestamps
Intro 00:00
Basic Terminology 00:43
Font Classifications 02:44
How to select a font 03:44
Levels of Type 04:59
Naming & Structure 07:02
Relative Sizing (rem) 08:18
Selecting Font Sizes 09:37
Selecting Line Heights 10:20
Selecting Letter Spacing 10:55
FIGMA Follow Along: Create a system with me 11:32
In this video, I teach you the fundamentals of UI typography and show how to turn them into a scalable typography system inside a design system.
This is Episode 1 of Design OS: Building a Design System, where we start with the most misunderstood part of UI design.
We break down the theory first, clear common confusion, and then move into Figma to build a real type scale using actual product screens.
Timestamps
Intro 00:00
Basic Terminology 00:43
Font Classifications 02:44
How to select a font 03:44
Levels of Type 04:59
Naming & Structure 07:02
Relative Sizing (rem) 08:18
Selecting Font Sizes 09:37
Selecting Line Heights 10:20
Selecting Letter Spacing 10:55
FIGMA Follow Along: Create a system with me 11:32