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
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
Пікірлер: 129
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
@srdjan.despic
5 ай бұрын
Thanks for including this resource 🙌
This is by far the BEST content regarding typography I've ever found ( and I watched more than 10)
HOW can this video have only 480 views? This is such a nice video! Thank you so much! Definitely going to sub!!❤🎉
@hooniexp
Жыл бұрын
I appreciate your support. Thank you!
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 👾
Lovely explanation and presentation, thank you - very useful !
Behind this video, there is a lot of work. High levels. Greetings from Italy
This video is everything. Watching it second time now (first time was months ago when i never realized what the hell is is 😁)
@CoolIntellect
7 ай бұрын
Same 😊 and after learning the basics, this is the gem for us 💎. Right? Huge thanks to this man who made our work easier. 🙏
The exact breakdown that I needed! Thank you
This may be the best video I have ever seen on youtube. Great work.
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 KZread! You should definitely make more videos, bro! Please xD
@hooniexp
8 ай бұрын
Haha thanks Nadjib! I just posted a new one for spacing :)
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.
@hooniexp
Жыл бұрын
Sure thing Reinold!
Amazing stuff, we need more of these!
Thank you for taking the time to break it down, so much value!
Great video man! Keep'em coming!
So much value in a single video.
This is the video I needed. You've made my day man, thanks😊
That was an amazing and really insightful research you've made! Thanks for sharing :)
Thank you for all of the work you put into analyzing and sharing this information with us!
You can tell this was a lot of work. You just saved me a lot. Thank you.
Great content! So much information! Also your voice is so soothing. Looking forward to more :P
Hey man! Don't stop please... Keep updating videos! You're amazing... One of kind!
Wow, It's superb! Thanks for this huge value! Really appreciate it!
Your a different animal my guy, this is some deep research. Respect 🫡
Really fantastic breakdown! Great work.
Bro the quality and value of this video was unmeasurable, hats off to you and keep it up!
This is amazing video! Thank you so much! Excellent research, beautifully conducted and presented
A great hardwork is visible here. Thank you very much for creating a brilliant video on Typography.
Hey there! I just wanted to let you know that your video on typography was incredibly helpful and informative. I really enjoyed it!
The best and most informative video about typography! Thank you for your efforts to make it!
Great vid! Thanks so much for putting this together.
This was a pure knowldge based video. Loved every single of it :)
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 :)
Good job ! Give this guy gold button !
It was definitely helpful; much appreciated!
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. ❤️❤️❤️❤️❤️❤️
Awesome vid and research, thanks for all the effort you put into this, super helpful.
Thanks so much for the stats! Supper helpful even a year later...
From nerd designer to nerd designer, thank you so much for this research and data!
Really useful data bro! Thanks for sharing 🙌
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...
a video that covers alot in typography..... Great Video
Insanely high quality content✨✨
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. 💙
Awesome explanation! Thank you!
This is what I call top tier content.
So thorough! Thanks bro!
The video is super well made! Underrated video!
@hooniexp
Жыл бұрын
Thank you Hussam!
I can't believe this is so hidden I almost missed it. Love the explanation, it's so detailed and simple to understand
this was amazing and so easy to understand, thank you! hopefully this gets more views xx
@hooniexp
Жыл бұрын
Thank you!
Thanks heaps! Amazing content! 🔥
Great job in the analysis.👍
Great work!!
Thank you for the big amount of time and effort you put into this comparison
@hooniexp
8 ай бұрын
Glad to hear that it helped you save time! Thanks
Thank you! This video is really really helpful!
Amazing content. Super helpful thanks so much for sharing.
Very helpful! Appreciate it!
Bro! This is great work.
Objective and Valuable Overview! Thank you, Hoonie! p.s. Roboto For Life! :)
wow amazing video with such detailed content, and easy explation.
This is super helpful, great content. Thanks
warmly appreciate your efforts great values+ easy to digest, lots of love from me keep sharing this type of values...
The video I've ever wanted to watch about Typography
@hooniexp
Жыл бұрын
I appreciate it Daniel!
@Michael.design
Жыл бұрын
Exactly this!
I’m so glad I discovered you :3
@hooniexp
Жыл бұрын
Thanks for stopping by Kevin! Feel free to lemme know if there's anything else you'd like to see.
Great video!
Dude you made one of the best videos on typography ever on KZread! Such clean minimal and clear approach. Please make more videos if you have the time and motivation for it:) Cheers!
@hooniexp
8 ай бұрын
Thanks Michael! Just dropped another one for spacing :)
@Michael.design
8 ай бұрын
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
Wow this video is super helpful thanks!
whooa what a video! thanks
thanks a lot for spending time to research and doing this video, love to see more in the future😄😄😄
@hooniexp
Жыл бұрын
No problem! Ty for watching 🙏🏻
I'm really impressed by your work and presentation! Very complete and thorough. Great helicopter view on a complex subject. 👍
@hooniexp
Жыл бұрын
Thank you for your feedback!
This video is amazing ❤
This is amazing! Brilliant analysis. It'd awesome if there's a cheat sheet of this
Thanks a lot for valuable information👍🏻
Great stuff.. looking for more such insight full content.. next could be related to Colors
amazing!! ty!!
Amazing work!
@hooniexp
Жыл бұрын
Thank you!
AMAZIIIING
This is golden.
thanks tims it help us alot.
God damn. This was so much useful. Appreciate the effort. Why not publish more videos
Well done
Dude!! Really appreciated!
@hooniexp
Жыл бұрын
No problem Anas!
Wooooow!!! 👏 Nice research and presentation!. Now what I would love to see in more detail is that Airtable doc, specially for the naming conventions 🤯
@hooniexp
2 жыл бұрын
Thanks Frank! I’m working on releasing the AirTable on Gumroad soon. Stay tuned!
i love you man thx alot
this video is really useful
Thank you!
I found the video i was looking for
i love your two videos - would you please make one around color?
good job!!!
Thanks man
Dope!
Legend!
Thank you for all the work, can you do one for grids and columns?
Greaaaat job
@hooniexp
Жыл бұрын
Thank you Jassem
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
@hooniexp
8 ай бұрын
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 we have access to spreadsheet as well please. #legend
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.
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.
can you give the airtable ? for analysis