The ULTIMATE GUIDE to TYPOGRAPHY in UI Design!

[@ankushpanda9911]

This playlist has significantly reduced my fear of using Figma. I used to feel overwhelmed by the constant introduction of new features and struggled to fully grasp the existing tools. However, after going through this playlist, I now have a clear understanding of which feature serves what purpose, and it has streamlined my workflow tremendously. It's also helped me cut down on mundane tasks, making my design process much more efficient. Thank you for creating such amazing content!

[@ifydus]

Where have you been all my life. Kudos

[@clearlyvips]

i must say this method to organize your typography by grouping into display, heading, label, paragraph is the best I have found till date. Everything makes so much sense after learning about tokens.

[@SatyamBarnwal090]

Chethan!! you have no idea. but you're changing lives by providing this high quality in-depth content. You deserve way more appreciation than you're getting right now 🔥🔥🔥🔥

[@praveenpsg77]

People: who the hell would upload 45 min tutorial for typography? Me: My man Chetan probably 😎😎

[@harioandluigi4569]

Loving your energy while delivering this superb content! I'm hooked!

[@vipulsuthar3796]

Helped me clear my typography doubts in Design Systems.... Thanks!!

[@mydesignhq]

Thank you, It helped me a lot, Finally I understand how it is work.

[@altamashkhan5870]

Thank You so much Chethan you really are amazing like thank you so much

[@baazigar5]

Thank you chethan bhai 🙏🏼 Your teaching skills are amazing! ✨💯

[@sajibursagor]

Wow Awesome Brother. Thank you for this video.

[@sivaramakrishnan4368]

Can you please upload another video in the design system series?

[@DesignPilot]

Let me think about it

[@grvsha]

If there is an Olympics for UX Design then you should get all three medals!!

[@DesignPilot]

😂😂😂

[@grvsha]

@@DesignPilot 😁

[@ananths8968]

Hi chethan. Need a clarification. This is an existing app we can easily define the font size. When (before designing any screens) designing a new app how to choose all the font sizes perfectly.

[@DesignPilot]

The needs are the exact same for every app. If you’re too confused, just copy one of the design systems and see if it works. If not, make the necessary changes

[@ananths8968]

@@DesignPilot Thank you 🙏♥️

[@smilli6415]

can you do a video on whats expected from New UX designer in first job, whats are top 10 tasks given

[@DesignPilot]

This is a conversation you need to have with you boss or manager or design lead

[@smilli6415]

i mean to ask .. what are mains tasks given to new ux designer in general@@DesignPilot

[@DesignPilot]

@smilli6415 That’s a vague question my friend

[@praveenkulkarni1278]

Majority of my screen would be in between ((12 to 24px) rarest of rare that 10px) Because consistency in decrement of 4px is justifiable. If header is 16px i would use para as 12. Correct me if m wrong(appreciate your feedback🙏🙏)

[@DesignPilot]

16 and 12 is not a good combination imo

[@praveenkulkarni1278]

@@DesignPilot then? Helpful for me if you recommend any size combination. (Max to min in order)

[@DesignPilot]

@praveenkulkarni1278 If you’re making list items. 16px title and 14px subtext is good. Or 14 bold and 14 regular is also fine.

[@praveenkulkarni1278]

@@DesignPilot Worked just fine😍❤ Thank you "Pilot"✌

[@cherry-lp8yq]

If we have tab items for food menu categories , what would be the semantic naming for the tab bar items? label? , and also where the button fits into those categories?

[@DesignPilot]

Names are not defined based on which component they will be used in

[@cherry-lp8yq]

@@DesignPilot yeah i meant to say can label used for tabs? Or headings?

[@DesignPilot]

@cherry-lp8yq Keep things simple by ensuring that display and headings are only for headings and not other elements. If you think these tabs have the same hierarchy as a screen or a section headings, then use headings. Or else use label

[@atirekverma808]

Hi, I have confusion regarding how to make typography (and other elements such as spacing) react to various screen sizes and how to include them in design system?

[@DesignPilot]

Are you talking about breakpoints? Because within a breakpoint, it’s not possible to change values

[@atirekverma808]

@@DesignPilot No , I want to know how to scale text for different screen sizes(Web, Tab and Mobile) and include those in design systems

[@DesignPilot]

@atirekverma808 Just pick the font sizes for the other breakpoints and have a separate section where you document them for web, mobile and tablet.

[@atirekverma808]

@@DesignPilot oh , ok thanks. Is there any usually followed guideline ?

[@DesignPilot]

@atirekverma808 not really

[@nishantKumar-tr5ek]

Sir what if we have same font size with different font weights Like In paragraph Font size same 14px Font weight , medium and bold And what is the naming in text style

[@DesignPilot]

I think I’ve covered this in the video. Refer to the the HIG and MD.

[@YakneshwaranMani]

Hi, can we use leading trim setting for fonts in design system?

[@DesignPilot]

Yes

[@baazigar5]

When are the next videos coming? 🤔

[@rashikkenn8798]

What's the screenshot tool that you are using at @41:12?

[@DesignPilot]

Native MacBook feature

[@kriswayne7938]

Bro how do i do this: I want to change the typography of the material design community file so that not only I get the text styles with my preferred typeface and font-weight but it also automatically changes texts in the material design components.

[@DesignPilot]

Just change the font in the main text style in the right side panel

[@kriswayne7938]

@@DesignPilot but i would have to do that one by one, no?

[@DesignPilot]

@kriswayne7938 Yes

[@DesignPilot]

@kriswayne7938 Or use some plugin

[@kriswayne7938]

​@@DesignPilotthanks. Btw is it okay to have 2 or 4 px right padding instead of 16px in the top app bar considering the target area of icon buttons as per Material guidelines should be 48 × 48px? Coz if i add 16px padding the icons just come too close to the title

[@kriswayne7938]

Deleted my comment Lol i didn't see that they have not made a separate component of instances. Its just a frame and not a component set. My bad 😅

[@gobisiva5768]

rich content