Typography - Ultimate Design System Breakdown (Font Sizes, Text Style Naming, Responsive Scaling)
ฝัง
- เผยแพร่เมื่อ 27 พ.ค. 2024
- 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
www.designsystems.com/
Design Systems For Figma
designsystemsforfigma.com/
Shopify Polaris
figma.com/@shopify
Elastic Design System
www.figma.com/@Elastic
MobileLIVE - Friday Design System
www.figma.com/community/file/...
Radius Design System
www.figma.com/@Rangle
Chakra UI
www.figma.com/community/file/...
Pajamas
www.figma.com/@GitLab
Paradigm
figma.com/@paradigm - วิทยาศาสตร์และเทคโนโลยี
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!
bit.ly/3OdnTRf
Thanks for including this resource 🙌
This is by far the BEST content regarding typography I've ever found ( and I watched more than 10)
From nerd designer to nerd designer, thank you so much for this research and data!
HOW can this video have only 480 views? This is such a nice video! Thank you so much! Definitely going to sub!!❤🎉
I appreciate your support. Thank you!
This video is everything. Watching it second time now (first time was months ago when i never realized what the hell is is 😁)
Same 😊 and after learning the basics, this is the gem for us 💎. Right? Huge thanks to this man who made our work easier. 🙏
Behind this video, there is a lot of work. High levels.
Greetings from Italy
Fantastic what a deep thought... Thanks @Tim, You saved my years. I have never found these details on the internet. You cleared all the confusion about the importance of typography in the Design System. 💙
I really was waiting for such a video. I was so confused about font sizes I study multiple font sizes of material ui, ant design, HMS but couldn't understand which should I go through.
Bro! This is one of the best typography videos here on TH-cam! You should definitely make more videos, bro! Please xD
Haha thanks Nadjib! I just posted a new one for spacing :)
The exact breakdown that I needed! Thank you
Amazing stuff, we need more of these!
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.
Sure thing Reinold!
Dude you made one of the best videos on typography ever on TH-cam! Such clean minimal and clear approach. Please make more videos if you have the time and motivation for it:) Cheers!
Thanks Michael! Just dropped another one for spacing :)
Amazing! Gonna study it soon! Thanks a lot again! Is there a place to see more of your work? From what I can see you also have a preference for minimal and clean design am I right?@@hooniexp
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 👾
That was an amazing and really insightful research you've made! Thanks for sharing :)
Hey man! Don't stop please... Keep updating videos! You're amazing... One of kind!
Really fantastic breakdown! Great work.
Thank you for taking the time to break it down, so much value!
The video I've ever wanted to watch about Typography
I appreciate it Daniel!
Exactly this!
Bro the quality and value of this video was unmeasurable, hats off to you and keep it up!
Great content! So much information! Also your voice is so soothing. Looking forward to more :P
Hey there! I just wanted to let you know that your video on typography was incredibly helpful and informative. I really enjoyed it!
You can tell this was a lot of work. You just saved me a lot. Thank you.
Thank you for all of the work you put into analyzing and sharing this information with us!
This may be the best video I have ever seen on youtube. Great work.
The best and most informative video about typography! Thank you for your efforts to make it!
This is amazing video! Thank you so much! Excellent research, beautifully conducted and presented
This is the video I needed. You've made my day man, thanks😊
A great hardwork is visible here. Thank you very much for creating a brilliant video on Typography.
The video is super well made! Underrated video!
Thank you Hussam!
Wow, It's superb! Thanks for this huge value! Really appreciate it!
So much value in a single video.
Great video man! Keep'em coming!
Great vid! Thanks so much for putting this together.
this was amazing and so easy to understand, thank you! hopefully this gets more views xx
Thank you!
Awesome vid and research, thanks for all the effort you put into this, super helpful.
Really useful data bro!
Thanks for sharing 🙌
Awesome explanation! Thank you!
thanks for providing such an informative video, straight to the point, god bless you :)
Really helpful video. Thank you. Hope to see another one from you :)
This was a pure knowldge based video. Loved every single of it :)
Very nice approach! I would love to see more videos like this for a lot of design topics like padding (desktop vs mobile etc), colors, naming conventions... But also general ways of approaching design challenges, like how companies design their tables, forms, calendars, profile setting, content cards...
Amazing content. Super helpful thanks so much for sharing.
a video that covers alot in typography..... Great Video
This is super helpful, great content. Thanks
Thanks so much for the stats! Supper helpful even a year later...
Thank you so much I recently watched alot of videos about typography but I was stucked in such methods behind typography.
But your video helps and alot and cleared my all confusions about display fonts sizes or major rules etc. ❤️❤️❤️❤️❤️❤️
So thorough! Thanks bro!
Great job in the analysis.👍
Good job ! Give this guy gold button !
Thank you! This video is really really helpful!
Insanely high quality content✨✨
Thank you for the big amount of time and effort you put into this comparison
Glad to hear that it helped you save time! Thanks
wow amazing video with such detailed content, and easy explation.
Thanks heaps! Amazing content! 🔥
I'm really impressed by your work and presentation! Very complete and thorough. Great helicopter view on a complex subject. 👍
Thank you for your feedback!
I can't believe this is so hidden I almost missed it. Love the explanation, it's so detailed and simple to understand
Very helpful! Appreciate it!
Wow this video is super helpful thanks!
This is amazing! Brilliant analysis. It'd awesome if there's a cheat sheet of this
Bro! This is great work.
Objective and Valuable Overview! Thank you, Hoonie!
p.s. Roboto For Life! :)
Thanks a lot for valuable information👍🏻
Great stuff.. looking for more such insight full content.. next could be related to Colors
thanks a lot for spending time to research and doing this video, love to see more in the future😄😄😄
No problem! Ty for watching 🙏🏻
This is what I call top tier content.
Great work!!
I’m so glad I discovered you :3
Thanks for stopping by Kevin! Feel free to lemme know if there's anything else you'd like to see.
God damn. This was so much useful. Appreciate the effort. Why not publish more videos
This video is amazing ❤
Amazing work!
Thank you!
Wooooow!!! 👏 Nice research and presentation!. Now what I would love to see in more detail is that Airtable doc, specially for the naming conventions 🤯
Thanks Frank!
I’m working on releasing the AirTable on Gumroad soon. Stay tuned!
thanks tims it help us alot.
Great video!
whooa what a video! thanks
Thank you for all the work, can you do one for grids and columns?
This is golden.
amazing!! ty!!
Dude!! Really appreciated!
No problem Anas!
this video is really useful
Thank you!
Well done
I found the video i was looking for
i love you man thx alot
good job!!!
Thanks man
AMAZIIIING
Yo great video, first off. I was hoping you’d say something about how much of a dramatic range there was (nearly double) in the base size of display and body fonts. While there seems to be rough cohesion in other areas, this was a break from that trend
Thanks Bryce! Yeah that's a good call out on that range. I'm assuming that the display range is all over the place since it's more for expressive needs versus the body fonts which seemed to fall more under the functional bucket. I also think that if I increase the sample size, it might help clear up which values are the true outliers in the ranges.
Can you pls share the knowledge how to organize and name color tokens? Thanks
Legend!
I question if level of heading should have anything to do with scale.
Think about drum notation. We’re able to easily distinguish between half, quarter, eighth, etc not by the size of the note, but by the symbol, moreover by the extension of previous symbol.
No need for a reference point.
Dope!
Greaaaat job
Thank you Jassem
And when labels are needed, should the line-height be the same as the font size for better vertical alignment? I don't think it's a good practice to give a label, which is always a single line, such an excessive line-height, as the text will appear vertically misaligned.
can you give the airtable ? for analysis
Can we have access to spreadsheet as well please. #legend
would be great to have some proofs, links or studies . Otherwise why exactly these font sizes are "the most common"
Please share excel sheet file link and very helpful video
Thanks Asad! I attached a link to a waitlist in the description for my new spacing video
Chinese elon musk😬 ?
Hahah. I’ve gotten that a couple times before! But, I’m Korean though 😉
Hey Tim, I hope you will do something useful again.