It's always a great practice to check out the comments section-you can learn so much from it! I really appreciate how you take the time to respond to all the valid questions there. 💙
Absolutely loved this video, I like getting information when I need it the most. I could have started reading books on typography but here your just gave real world examples that explains it very well. Thanks.
this is-and I can't stress enough-the best video about typography decision in UI design I've ever watched. everything is now crystal clear. thank you man.
Loved this type of practical content for a beginner.. Reading article doesn't give that much clarity. To break the rule first we have to know the rule..
Hey Chetan can you please answer this question: I want to learn how to create a type system(or type scale) for my personal design projects according to the need of the project but how do i know which font size, weights, line heights, letter spacings to choose even before i create the designs? Should i approach it in this way: First i will create the paper wireframes and figure out the hierarchy of all the text elements and then create a type scale and use them in low fidelity wireframes which would be a one-to-one recreation of the paper wireframes and do some more iterations till i am satisfied with a type scale or is there any proper way of doing this? I have been trying to find good resources to delve deeper for a long time to learn about this and I would appreciate any resources you can point me towards. looking forward to your comment. Thanks!
Awesome video. One question I want to ask, when starting a project how to decide which font sizes I'm gonna need in my type scale?? Do I just take a screen of the app and try to do hit and trail method Or just randomly create a type scale?
Ideally you want to start with 16px as you body. And then based on the look and feel of the font, you can increase and decrease the font sizes accordingly. But you want to have at least 2px jump. So if you pick 16px as your body, the next has to be minimum 18px. If you don’t see a difference in hierarchy after picking 18px, you can try to increase it to 20. If that also doesn’t work maybe try 22px.
Okay thank you Chethan for replying and helping. I feel like your videos can seriously help me in becoming a good UI Designer. I'll be asking questions in the comments section for clearing my doubts.
Hey Chetan, thanks for sharing this. I'm having one question, how to identify the font size that other apps [iOS and Android] are using it? It's easy to identify on the web but not able to find on mobile apps.
I have this one confusion on the line height, so what I learned in bootcamp is that font size*1.5 is the ideal one, but in material design system some font size does not follow the same amount, for ex 12*1.5 is 18 but in material design they have 16, could you please tell why they've used it like that.
There is no rule of what is the right line height. It depends very much on the way the font looks and the default line height set by the creator of the font. So your job is to play around with a line height that looks optically legible. Doesn’t matter if it’s 1.5 or 1.6 or 1.2. Whatever makes the font legible and readable.
Chetan, pls do respond to this comment :D How do I figure out the font size from an app's screens' screenshot? Could you pls let us know. AMMAAAZING content brother. Love you.
@@DesignPilot but the size of the screenshot plays a role right? If i take an ss from my phone, it'll be of 1080 pixels width. What size should I reduce it to to get accurate font sizes?
It's always a great practice to check out the comments section-you can learn so much from it! I really appreciate how you take the time to respond to all the valid questions there. 💙
Absolutely loved this video, I like getting information when I need it the most. I could have started reading books on typography but here your just gave real world examples that explains it very well. Thanks.
this is-and I can't stress enough-the best video about typography decision in UI design I've ever watched. everything is now crystal clear. thank you man.
Loved this type of practical content for a beginner.. Reading article doesn't give that much clarity. To break the rule first we have to know the rule..
No one doesn’t teaching design better than you❤… I would definitely Grow watching you all the time💯
21:33 thank you for saying '' Guidelines are not rules to be followed" :)
So clearly explained. Thanks for giving this session, you cleared up all my doubts.
This video was exactly what i have been looking for! Thank you!
You always get to learn something new after watching his videos. Keep up the good work, Chetan!
This is the best content for typography I've seen. I learn a lot from your channel ❤ Big fan!
ur just awesome at teaching..kudos to your efforts in explaining things in a great way.💙
Perfect explained which i was looking for Thank you
Amazing work. Thank you so much!
Welcome back !
very useful video, thank you!
Thanks Chetan bro!!
Thanks Chetan!!
You're the best!
Hey Chetan can you please answer this question:
I want to learn how to create a type system(or type scale) for my personal design projects according to the need of the project but how do i know which font size, weights, line heights, letter spacings to choose even before i create the designs?
Should i approach it in this way: First i will create the paper wireframes and figure out the hierarchy of all the text elements and then create a type scale and use them in low fidelity wireframes which would be a one-to-one recreation of the paper wireframes and do some more iterations till i am satisfied with a type scale or is there any proper way of doing this?
I have been trying to find good resources to delve deeper for a long time to learn about this and I would appreciate any resources you can point me towards. looking forward to your comment.
Thanks!
The ULTIMATE GUIDE to TYPOGRAPHY in UI Design!
th-cam.com/video/xnqdvs4zp2o/w-d-xo.html
@@DesignPilot I had seen this video but i will rewatch it again and carefully make notes this time. thanks! 😃
Amazing video, thank you so much!
I have a question, the 4-point limits apply to mobile interfaces, but what is the standard for desktop design?
Same
How do you name your text styles ? Like Headling 1 ,2, 3 so something else .
There are plenty of ways to do it. You can check the typography video in the design systems course. It’s a good idea
Hi Chetan, I would like to know how you recreated all the screens from existing apps. How to get the assets and sizes for design?
You trace it like a you trace a drawing
Wonderful series @designpilot ..Enjoying and learning a lot. Can you make a video on px and pt scale..or share resources to understand them???
Check my Basics of UI design for Mobile Apps video. I’ve converted that concept there
Awesome video.
One question I want to ask, when starting a project how to decide which font sizes I'm gonna need in my type scale?? Do I just take a screen of the app and try to do hit and trail method Or just randomly create a type scale?
Ideally you want to start with 16px as you body. And then based on the look and feel of the font, you can increase and decrease the font sizes accordingly. But you want to have at least 2px jump. So if you pick 16px as your body, the next has to be minimum 18px. If you don’t see a difference in hierarchy after picking 18px, you can try to increase it to 20. If that also doesn’t work maybe try 22px.
Okay got it!
What's the maximum size I can go for designing mobile apps, 24px?
You can go even higher
For example on onboarding screens where you have less text, you can try 36px as well.
Okay thank you Chethan for replying and helping.
I feel like your videos can seriously help me in becoming a good UI Designer.
I'll be asking questions in the comments section for clearing my doubts.
Hey Chetan, thanks for sharing this.
I'm having one question, how to identify the font size that other apps [iOS and Android] are using it? It's easy to identify on the web but not able to find on mobile apps.
Take a screenshot and measure them
@@DesignPilot but the measured values of the font sizes will differ as you resize the screenshot isn't it?
I have this one confusion on the line height, so what I learned in bootcamp is that font size*1.5 is the ideal one, but in material design system some font size does not follow the same amount, for ex 12*1.5 is 18 but in material design they have 16, could you please tell why they've used it like that.
There is no rule of what is the right line height. It depends very much on the way the font looks and the default line height set by the creator of the font. So your job is to play around with a line height that looks optically legible. Doesn’t matter if it’s 1.5 or 1.6 or 1.2. Whatever makes the font legible and readable.
@@DesignPilot Thanks for the response, Love your videos. As a beginner I'm grateful that I found someone who explains everything in detail ❤️🙌
Chetan, pls do respond to this comment :D How do I figure out the font size from an app's screens' screenshot? Could you pls let us know. AMMAAAZING content brother. Love you.
Take a screenshot and paste it in Figma and try to overlay text
@@DesignPilot but the size of the screenshot plays a role right? If i take an ss from my phone, it'll be of 1080 pixels width. What size should I reduce it to to get accurate font sizes?
@jayasurya2781 That’s 3x, reduce it to 1x. Watch my ‘Basics of UI Design’ Video
@@DesignPilot yesss.. I had watched already.. but couldn't apply that knowledge here. Thanks for the response😁
❤❤❤