Typography - Ultimate Design System Breakdown (Font Sizes, Text Style Naming, Responsive Scaling)

Learn how the best design systems build their typography and apply the common patterns and insights for yourself.

Chapters
Intro 00:00
Overview 00:21
Top Fonts 01:09
Organization 01:57
Naming 03:32
Type Scales 06:03
Font Sizes 07:23
Line Height 08:08
Letter Spacing 09:26
Responsive Design 10:39

Resource Links

Design Systems

Design Systems For Figma

Shopify Polaris

Elastic Design System

MobileLIVE - Friday Design System

Radius Design System

Chakra UI

Pajamas

Paradigm

[hooniexp]

Here's a free Figma template that includes the data insights from this video and a pre-built type scale that you can use to get started quickly!

[mayararodrigues]

This is by far the BEST content regarding typography I've ever found ( and I watched more than 10)

[safsafaf]

HOW can this video have only 480 views? This is such a nice video! Thank you so much! Definitely going to sub!!❤🎉

[joelozkesen]

this was so easy to understand! compared to some explanations that get you to lose info rather than make

[aloysiofranca]

The best video about text on the internet!

[NadjibIxe]

Bro! This is one of the best typography videos here on YouTube! You should definitely make more videos, bro! Please xD

[mattiaGl]

Behind this video, there is a lot of work. High levels.

Greetings from Italy

[astromessy]

I was probably blessed by the design heavens to have your videos recommended to me so early in my UX/UI career. The information you organized in this video are super insightful and the hard work you went through extracting this data for us is amazing. Subscribed, liked, and will now follow more of your stuff closely 👾

[jirowang]

The exact breakdown that I needed! Thank you

[reinoldg]

I've been looking for a video like this one for ages. Thanks for taking the time and looking forward to more content like this one.

[marktmcewan]

This may be the best video I have ever seen on youtube. Great work.

[sylviakwon]

Great content! So much information! Also your voice is so soothing. Looking forward to more :P

[dkachino]

You can tell this was a lot of work. You just saved me a lot. Thank you.

[bigpunchline]

This video is everything. Watching it second time now (first time was months ago when i never realized what the hell is is 😁)

[johnpixle]

Amazing stuff, we need more of these!

[beta_byte]

Bro the quality and value of this video was unmeasurable, hats off to you and keep it up!

[gandkill]

This is amazing video! Thank you so much! Excellent research, beautifully conducted and presented

[anastasiia_vlasenko]

The best and most informative video about typography! Thank you for your efforts to make it!

[DyecksRF]

Excellent video! Congratulations on the work!

[KaioFialho]

That was an amazing and really insightful research you've made! Thanks for sharing :)