Figma Typography System & Styles: A Beginner's Tutorial to Fonts and Design Systems

💛 Thanks for watching, Tair 💛

🍿 _WHAT TO WATCH NEXT_ :

👋🏼 _IF YOU ARE NEW HERE_ :
Hey, it's Tair! 😃
Thanks for tuning in and watching my video! If you enjoyed it and learned something new, don't forget to hit that subscribe button and the like button as well 👍🏼.
I'd love to hear your ideas and suggestions for my next video, so feel free to drop a comment below. Your support means a lot and it helps me keep the channel going and growing!

👾 _MY GEAR_ :

🌼Chapters
00:00 Intro
00:23 Font Categories
01:32 Typography Hierarchy
02:44 Figma Text Styles
05:42 Base Scale
07:02 Typography Scale
10:24 Font Weight
11:40 Line Height
12:53 Customisation
14:20 Typography System Into Styles
16:07 Summary

🤗 Disclosure: This video and description may contain affiliate links, which means that if you click on one of the product links, I'll receive a small commission. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. This is at no additional cost to you.

#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figmastyles #fonts

[SolveigBeen-lbdf]

Your videos on style and font design systems are amazing. So generous of you to share this way of working. Very useful. In addition, you are so lovely to listen to and spread such enthusiasm and joy!

[dolonb]

It was a much needed video.. I was looking for the same since long..

[snowy]

Hi, I've been listening to your Figma playlist for days and am thoroughly loving it. I've learned a lot in the last several days. Your ability to explain everything about a specific issue is completely remarkable. And now, I came across this video and became perplexed about where you provide each row a line height, such as in the line-height part, where you offer the custom number and then multiply that value by 1.2.

[WanKy]

Thank you for video, as for me it's better to set line height as a percentage value instead of using calculation or fixed value in pixels. Because if we change font size we should also change line height. Great work, first series was also educative, going to watch your entire figma tutorials playlist.

[sodiqagbalaya]

Thank you for sharing; I find it difficult to develop a typography system, but after watching this tutorial, I feel as though I can now do better than I could before. This tutorial was interesting for me to watch🎉❤

[sarahschultz]

I've been enjoying your vidoes here, but this follow along design file doesn't have a lot of what your working on. Just wanted to share :). Thank you for such amazing content though!

[canatakol]

A friendly reminder for fella designers 🫥
Best UIs are invisible to the eye. So you don't need to assign to a different font style for captions and footnotes, since the footnote are already at the bottom of the page, away from every other design element. Also don't use CAPITAL WORDS FOR LONG SENTENCES, it becomes harder to read the longer the sentences with uppercased words.