Web Typography Basics in Figma

Kezz BraceyAug 20, 2019Lessons: 12Length: 2.3 hours

UX/UI Web Typography Figma

Next lesson playing in 5 seconds

Cancel

Overview
Transcript

1.1 Web Typography Basics in Figma

In this introductory video I’ll explain what lies ahead, and you’ll get a visual feel for the kinds of typographic exercises we’ll be doing. There’s plenty to learn, so let’s begin!

1.Introduction
1 lesson, 00:44

1.1
Web Typography Basics in Figma
00:44

2.Font Selection
3 lessons, 48:59

2.1
Font Classifications
16:30

3.Text Size and Size Flow
2 lessons, 28:13

3.1
Establish the Smallest and Largest Text
13:31

4.Line-Height and Margins
2 lessons, 35:34

4.1
Line-Height and Rough Spacing
08:04

4.2
Planning Element Margins
27:30

5.Additional Spacing
3 lessons, 22:01

5.1
Indentation, Letter Spacing, and Drop Caps
08:33

5.2
Style Modifications: White Space
08:02

5.3
Style Modifications: Site Layout
05:26

6.Conclusion
1 lesson, 01:56

1.1 Web Typography Basics in Figma

In this course, you're going to learn how to design web typography for a site using Figma, and implement an extensive repertoire of typographic principles that we've covered on Tuts+ tutorials across the years. This is the first of a two-part course. And in this first part we're gonna cover the most important fundamentals of web typography. By the end of this course you're gonna have a clear understanding of how to select and pair fonts, how to set up your text sizes in a flowing, but practical way, how to properly plan for spacing throughout your typography and when you need to create overrides for the text styles that you've already established. So let's go ahead and get started with web typography basics in Figma. I'll see you in the first lesson.

Back to the top

Kezz Bracey

Hi there. I'm a designer & coder who works in the areas of web design / development, game development and digital art. In the web space I'm a front end all rounder but I have a particular specialization in theme creation, no matter the platform. I also love finding the latest most efficient, user focused design and dev techniques of the day. In game development I'm addicted to playing with every different engine, toolset and framework I can find. In digital art I love everything from painting to vector work to pixel art to 3D modelling. In short, if it's creative and you can make it digitally, I love it.

Next lesson playing in 5 seconds

1.1 Web Typography Basics in Figma

1.Introduction
1 lesson, 00:44

1.1
Web Typography Basics in Figma
00:44

2.Font Selection
3 lessons, 48:59

2.1
Font Classifications
16:30

2.2
Font Combining
16:47

2.3
Font Stacks
15:42

3.Text Size and Size Flow
2 lessons, 28:13

3.1
Establish the Smallest and Largest Text
13:31

3.2
Create a Size Flow
14:42

4.Line-Height and Margins
2 lessons, 35:34

4.1
Line-Height and Rough Spacing
08:04

4.2
Planning Element Margins
27:30

5.Additional Spacing
3 lessons, 22:01

5.1
Indentation, Letter Spacing, and Drop Caps
08:33

5.2
Style Modifications: White Space
08:02

5.3
Style Modifications: Site Layout
05:26

6.Conclusion
1 lesson, 01:56

6.1
Wrapping Up
01:56

1.1 Web Typography Basics in Figma

Web Typography Basics in Figma

Next lesson playing in 5 seconds

1.1 Web Typography Basics in Figma

1.Introduction1 lesson, 00:44

2.Font Selection3 lessons, 48:59

3.Text Size and Size Flow2 lessons, 28:13

4.Line-Height and Margins2 lessons, 35:34

5.Additional Spacing3 lessons, 22:01

6.Conclusion1 lesson, 01:56

1.1 Web Typography Basics in Figma

1.Introduction
1 lesson, 00:44

2.Font Selection
3 lessons, 48:59

3.Text Size and Size Flow
2 lessons, 28:13

4.Line-Height and Margins
2 lessons, 35:34

5.Additional Spacing
3 lessons, 22:01

6.Conclusion
1 lesson, 01:56