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

Подписаться 3,1 тыс.

Просмотров 28 тыс.

50% 1

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

Наука

Опубликовано:

30 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 122

@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! bit.ly/3OdnTRf

@srdjan.despic 4 месяца назад

Thanks for including this resource 🙌

@gabrielcrisostimo 7 дней назад

From nerd designer to nerd designer, thank you so much for this research and data!

@mayararodrigues1066 2 месяца назад

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

@safsafaf2838 Год назад

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!

@ravirajputdesigner 7 дней назад

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. 💙

@mattiaGl90 Год назад

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

@NadjibIxe 10 месяцев назад

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

@hooniexp 7 месяцев назад

Haha thanks Nadjib! I just posted a new one for spacing :)

@bigpunchline 7 месяцев назад

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. 🙏

@tayyabsohail8823 2 месяца назад

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.

@Michael.design Год назад

Dude you made one of the best videos on typography ever on RU-vid! Such clean minimal and clear approach. Please make more videos if you have the time and motivation for it:) Cheers!

@hooniexp 7 месяцев назад

Thanks Michael! Just dropped another one for spacing :)

@Michael.design 7 месяцев назад

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

@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 👾

@daguttt Год назад

The video I've ever wanted to watch about Typography

@hooniexp Год назад

I appreciate it Daniel!

@Michael.design Год назад

Exactly this!

@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.

@hooniexp Год назад

Sure thing Reinold!

@johnpixle 7 месяцев назад

Amazing stuff, we need more of these!

@jirowang110 7 месяцев назад

The exact breakdown that I needed! Thank you

@oliobiodira5423 6 месяцев назад

Thank you for taking the time to break it down, so much value!

@sylviakwon Год назад

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

@DevonFrohne Месяц назад

Really fantastic breakdown! Great work.

@hiddenfox-pq7hj 8 месяцев назад

So much value in a single video.

@julieturgeon5721 2 месяца назад

Thank you for all of the work you put into analyzing and sharing this information with us!

@g0andkill 10 месяцев назад

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

@KaioFialho 9 месяцев назад

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

@iamrajatsinghpatel Год назад

Great video man! Keep'em coming!

@davedesigns4you 4 месяца назад

Hey man! Don't stop please... Keep updating videos! You're amazing... One of kind!

@joshuacrownwell-omueti5602 Год назад

This is the video I needed. You've made my day man, thanks😊

@marktmcewan 16 дней назад

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

@loveeco1450 Год назад

Insanely high quality content✨✨

@dkachino 5 месяцев назад

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

@anastasiia_vlasenko 7 месяцев назад

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

@CoolIntellect 7 месяцев назад

Wow, It's superb! Thanks for this huge value! Really appreciate it!

@user-wl9my2td8f 3 месяца назад

Hey there! I just wanted to let you know that your video on typography was incredibly helpful and informative. I really enjoyed it!

@Jishnucreations2021 2 месяца назад

A great hardwork is visible here. Thank you very much for creating a brilliant video on Typography.

@beta_byte 9 месяцев назад

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

@yxyxs Месяц назад

So thorough! Thanks bro!

@CarlyCorcoran 2 месяца назад

Awesome vid and research, thanks for all the effort you put into this, super helpful.

@jackwalsh6487 Год назад

Great vid! Thanks so much for putting this together.

@alenkh2430 7 месяцев назад

Great job in the analysis.👍

@angelherrera4984 8 месяцев назад

Really useful data bro! Thanks for sharing 🙌

@olivierleirman411 21 день назад

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...

@jamsonmsuzi9645 11 месяцев назад

a video that covers alot in typography..... Great Video

@antonsavitskiy2738 8 месяцев назад

Good job ! Give this guy gold button !

@josecarlosvillalba4261 4 месяца назад

Awesome explanation! Thank you!

@mubindidit230 Год назад

This was a pure knowldge based video. Loved every single of it :)

@igorkhomenko2508 7 месяцев назад

Thanks so much for the stats! Supper helpful even a year later...

@kishorekumar8216 10 месяцев назад

thanks for providing such an informative video, straight to the point, god bless you :)

@hussamaladdin8469 Год назад

The video is super well made! Underrated video!

@hooniexp Год назад

Thank you Hussam!

@Channel-bg2st Год назад

Really helpful video. Thank you. Hope to see another one from you :)

@opsnax1468 2 месяца назад

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. ❤️❤️❤️❤️❤️❤️

@SketchbookStudioo 2 месяца назад

This is super helpful, great content. Thanks

@oight Год назад

this was amazing and so easy to understand, thank you! hopefully this gets more views xx

@hooniexp Год назад

Thank you!

@modelhive Год назад

Bro! This is great work.

@yaoweiyr 4 месяца назад

Thank you! This video is really really helpful!

@fayemidavid186 5 месяцев назад

I can't believe this is so hidden I almost missed it. Love the explanation, it's so detailed and simple to understand

@sunilgarbuja 3 месяца назад

Thanks heaps! Amazing content! 🔥

@instant_mint 2 месяца назад

Very helpful! Appreciate it!

@malakusama5735 Год назад

Great work!!

@adams.george 7 месяцев назад

This is amazing! Brilliant analysis. It'd awesome if there's a cheat sheet of this

@samuelerbo 6 месяцев назад

Amazing content. Super helpful thanks so much for sharing.

@Rnkwrk Год назад

Thank you for the big amount of time and effort you put into this comparison

@hooniexp 7 месяцев назад

Glad to hear that it helped you save time! Thanks

@himanshusawarkar26 6 месяцев назад

wow amazing video with such detailed content, and easy explation.

@nobody-bt7mu 5 месяцев назад

This is what I call top tier content.

@humairanaeempasha2362 3 месяца назад

Wow this video is super helpful thanks!

@AbdulWahab-pk4jx 3 месяца назад

This video is amazing ❤

@kamalsomani285 Месяц назад

Great stuff.. looking for more such insight full content.. next could be related to Colors

@jopperdepopper Год назад

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!

@vasiovasio Год назад

Objective and Valuable Overview! Thank you, Hoonie! p.s. Roboto For Life! :)

@ehrro 3 месяца назад

Great video!

@soheltamboli2453 3 месяца назад

Thanks a lot for valuable information👍🏻

@jinynggg Год назад

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.

@ngcmng7039 Год назад

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 🙏🏻

@ytrpaz 4 месяца назад

thanks tims it help us alot.

@MikeTrif Год назад

Amazing work!

@hooniexp Год назад

Thank you!

@Local-Seo-Nerd 5 месяцев назад

AMAZIIIING

@Fabi-Moreno 10 месяцев назад

amazing!! ty!!

@SigmaLance3375 3 месяца назад

This is golden.

@frankvasquez4827 Год назад

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 Год назад

Thanks Frank! I’m working on releasing the AirTable on Gumroad soon. Stay tuned!

@Anupss100 8 месяцев назад

God damn. This was so much useful. Appreciate the effort. Why not publish more videos

@matrixtomato Год назад

whooa what a video! thanks

@user-sw3gm2en2c Месяц назад

Well done

@jarmel3745 Месяц назад

Thank you!

@mohammedshamil3976 10 месяцев назад

this video is really useful

@anasbinzia8066 Год назад

Dude!! Really appreciated!

@hooniexp Год назад

No problem Anas!

@user-ih6to6lo2q 8 месяцев назад

i love you man thx alot

@valeelghaouth6904 2 месяца назад

Thank you for all the work, can you do one for grids and columns?

@muhammedsahad1612 8 месяцев назад

I found the video i was looking for

@tanyyanac7398 6 месяцев назад

good job!!!

@shokhrukhrakhmatov4221 2 месяца назад

Thanks man

@rodmm3010 Месяц назад

Legend!

@pedrooliveira2089 Год назад

Dope!

@justingiovanetti Месяц назад

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.

@jassemksiksi1332 Год назад

Greaaaat job

@hooniexp Год назад

Thank you Jassem

@sergiod1618 Месяц назад

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.

@brycebyte 9 месяцев назад

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 7 месяцев назад

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.