Figma Tutorial: Create a RESPONSIVE Typography Scale for Mobile & Tablet - Part 2
Вставка
- Опубліковано 6 лют 2025
- My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.)
👉 thedesignershi...
Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)
👉 thedesignershi...
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesigne...
Sign up to my newsletter for exclusive content:
👉 mizko.net/news...
Follow me on IG (Daily updates):
👉 / themizko
===
Level up with me:
Become a legendary designer: thedesignershi...
Personal portfolio: mizko.net
Instagram: / themizko
LinkedIn: / mizko
Twitter: / mizko
Become a FIGMA EXPERT With me today!
My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.)
👉 thedesignership.com/courses/the-ultimate-figma-masterclass
Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)
👉 thedesignership.com/products/figma-design-system/
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesignership.com/products/outline-wireframe-kit
Yours truly,
Mizko
Man, this is the exact answer I've been searching for!!! I have been struggling with how to set up my typography system which both speeds up my design process and smoothen the dev handover. I am so glad that it came from you, Michael! Thanks so much for sharing a great piece again!!!
🙏🏼
Your videos are the most useful i have found in youtube. Im So much thankful to you. Love and respect from Bangladesh.
Thanks for the video Mizko! I just created my first typescale and you videos on type helped a lot.
As a beginner to ux/ui designs, your videos have really really helped me a lot...... I really appreciate your work here❤❤❤
Awesome work. Technical details like keeping H1 labels consistent for SEO are really helpful to know and build trust from developers you’re working with.
I know that’s not something I’ve been paying attention to until seeing this!
✌🏼
second that!
Im graphic designer soo..Wow, your video is free and I don't have to spend lot's of money to learn UI! Amazing teacher.
Cool. Thanks Mizko. I really love your important headlines’ small versions. As I realized this is the key for the responsive typography. Without the smaller versions we just create confusion in user’s and Google’s head. 😅
super helpful! thank you for answering all my burning questions that I couldn't ask at work
I were not aware of relationship between labeling and SEO. Wow thank you so much!
wow!! Man nice explain
Great videos Mizko💯. The design system series is really everything! Thank you for taking your time to put these together
Nice tip on moving from Desktop to Mobile sizing. I've also heard that you can just use a totally different scaling system like major third to major second instead of just making h1 size an h2
Why doesn't this gentleman have 1 million subscribers?
Most Valuable things are underrated 😊
THX. It's really helpful how you share solutions to further struggles when applying the scale in designs.
Thank you!
This is so smart, I overcomplicated everything, lol. I mean I know about SEO and H1-H6 obviously as I develop the website myself but when it came to the fonts in design I had a system that was way too complicated.
Hi Mizko, I specifically signed in to youtube to gently smash the like button. Thank you for the very very useful content which is to-the-point. Also, after completing the crash course - looking forward to masterclass at designership.
Hi
Mizko,
Really you are awesome! Your teaching style is very unique and easy for us all. ✨🎈🎉.
Can you make video tutorial playlist of creating a whole design system in Figma, pls?!
Hey MD, this one will be coming soon :)
papi mizko derramando sabiduría como siempre
Thank you for this video! I was having anxiety about creating my typography system for a responsive project lmao
Awesome tutorial man, let's go let's go!!!!
This would really go a long way for me because I've been thinking about having a type system that would help me speed up my works and also increase my productivity and smart work as a beginner!
Great tutorial Mizko! This answered so many questions for me!
This is exactly what I need!
3:36
Thanks for the tip, that's not only helping me for web design it also affect the way I set up typography before start a new other design work. I'm still watching your figma video to learn, I just move to this app from adobe xd. Will leave some more comment in another video. Love all your video :D
I really love this. Mizko, kindly do a video on case study. Thanks
How do you make a typescale when you two fonts like a serif font for headlines and san serif for body copy and CTAs etc. A video on that would be extremely helpful. BTW I love your videos. You are the best at explaining and I have actually started building a design system from scratch for a project! thank you so much Mizko! :)
Thank you so much, I've learnt a lot from your video
Thank you for the video! I was wondering do ppl generally made a type group for tablets as well?
Thank you. That tip about compromise was helpful :-) (around 8:50 )
thanks a lot for this one, i'm always struggling with typography and this was helpful to organize my files
Please let me know if i am designing for vertical tablet design, does it change font size while it change the orientation vertical to horizontal ipad design
GREAT VIDEO!!! looking for this for years!!! Thanks a lot!
Thank you so much! Exactly what I was looking for!
P.S. The missing "px" after 20 for heading 4 made the perfectionist in me anxious 😂
Mizko excellent video worth every smash on the like button.
I have a question based on Part 1. When using modular type-scale website it provides a leading but your shared file all leadings are at 100% (Figma default)?
Great. Super helpfull. Thank you sir.
Thank you Asha!
Hi what about the spacing (padding and margin) for this design system
The use of the type looks great. Curious if accessibility was taken into consideration when establishing non-header text?
Hey Leslie! Thank you. 100%. They have been inspired by Apple's Human Design Guidelines.
I’m curious exactly how that works: will text readers read the display text before H1? And how does this affect SEO as well? Thank, these vids are so current!
Super helpful! Thank you Mizko
i cant get the point on having for eg a heading 6 with size 14px when the body is also 14 px.
would be the same to have just a weight variant instead of spliting them into two different categories?
would you explain me that ?😅
Great stuff
Thank you Pix!
Can you please make a detailed video on Tablet UI design please?
Great explanations thank you
Thanks! a lot Mizko that was very helpful :)
Your videos are just brilliant
Hi this was very insightfull....am usually having problems in determining font size to be used on mobile app design .....what font scale do you use
This was really helpful, thank you
Thanks mate! Your tutorial is really inspiring! I'm also curious about the responsive visual elements scale. Just like how do you determine the scaling of the button and the cards in your video?
Thank you Terence! Ah I should do a full responsive component design sometime.
do you follow a specific typescale? (ex: major third, minor third, major second..etc) im wondering what n when would be a good situation to use these scales?
incredibly useful. just what I was looking for
thx
I’m watching all your videos! Awesome content! I don’t find these in Spanish. 🤔
We will try to get subtitles in Spanish :)
Or maybe I learn Spanish 😂
Is there a way to automatically set like a variable for typescales? Like If I move my component from mobile to tablet it automatically would change the type size.
Great video Mizko! I was wondering if there are specific considerations when working on type scales for native mobile apps (iOS and Android) instead of mobile versions of a website.
Thanks for the content!
Great tutorial! Thanks for sharing!
:)
Great content !! Super helpful 🎉
Will you be doing a tutorial about spacing and grid in the future ?
Hey Iyehoe :) Good idea! I will be dropping a design system video soon.
Nice work, congrats
Thanks Pedro! Go make gold!
Thank you so much! This is a great video.
Great video again Mizko! I just have one question though. How do you decide on what type of fonts to use? Do you look for fonts that are ready to be used on a Large and Small scale? Because some fonts don't have them right. Also, can you give us a tip on where to find decent royalty-free fonts? Thank you so much!
your videos are helping me so much ! thank you ❤
I have a question, why can't we replace the display scale by an h1 scale ? because there are only tags in html nothing else
Can you make video about layout grid for enterprise software with side nav?
Thank you so much for this video.
Great Things you gave to me.. Keep Doing!
I am a bit late but really nice video mate!
Great video Misko,
I was wondering if you have a specific spacing system 8px or 10px ratio etc. in your library (I don't remember if you talked about it in a previous video). Thanks
Why not we use rem for this ??
I had to watch this again
Really enjoy your tutorials. Do you have any on Prototyping?
Thank for this tuts Mizko. Do you think we can get the figma file?
Hey Ismaila, thank you! Sorry our full-fledged design system will be on sale in the upcoming weeks. A lot of hard work has gone into it.
@@Mizko That's fair! Excited for you to roll this out, I will likely purchase it. Your content and delivery are excellent, keep it coming :)
Thanks for another great video! Question - how do you handle subtitles in your design system, CSS and SEO? It's not an H2, H3, or H4 but indicates a hierarchy in the visual design. Do you just add a class to a p tag like for Display?
Can I use any fonts from typekit embed into mobile apps?
Thanks Mizko
Hey Mizko! Thanks for your video. I have a beginner question which I tried Googling with different answers but wanted to hear your take. Why do you and many designers 1440x1024 as a starting frame for a webpage? Aren't most computers now a day 1920x1080?
Thank you! It was really useful!
just subscribed! thanks for sharing the knowledge mizko
also i'm considering signing for your masterclass eventually. 👊
btw what type of font were you using on that typography scale sheet you hade in there? thanks again mizko
Thank you Felix! Great to hear. I don’t remember but most likely Inter or Circular :)
Thank you very much, these are very nice tips! I wish you had explained "Text Styles" before using them tho.
Much Helpful Topic !
✌🏼
Mizko whats up, i'm finding it difficult to start with figma really need your help.
Hi, Can you give me of "TD Design System" File Link?
I love this typography system
Super! Would you share the Figma file as well 🤞🏻
I'll be allowing everyone to purchase our full-fledged design system with more components soon :)
Great tutorial. Is it possible to receive the template you used for the Typography ?
Thank you
Why didnt you use the same px like in the previous video? text sizes like " 37.32px " instead of whole numbers.
Is it the same tactics?
If H2 Small = 25.54px , then the h3 needs to be 25.54px too?
Same question i had, did you ever get an answer?
@@cliffh.2432 nope
Hi Mizko, I have this question ... Why in this movie the font is the size (48, 34, 24, ....)? In the movie Figma Tutorial: Create the Perfect Typography Scale for UI & Web Projects, you talk about perfect typography and you have the sizes 23.04, 27.65 ...
It is not understandable to me. Why, if we have a Type Scale calculator, we don't always use it. Is Type Scale only for WEB?
Was this question ever answered because I was saying the same thing after watching this. I'm so confused as to type scaling at this point, this is older so maybe the rules have changed, but I also don't understand how he came up with this scaling vs other videos where he's used the type scale website. Would love an explanation.
@@cliffh.2432 My call would be that you can make your scale anything (if you browse various design systems you can see the variety), but using a typescale calculator will often give you a good balance between sizes. Also when using a typescale calculator it's often in decimals due to how it's scaled - which is based on REM rather than px - although often designers round these to make more pixel perfect. It wouldn't surprise me if in the future Figma introduces the ability to use REM as well as it's getting closer and closer to mimicking a Front-end workflow.
I feel like the big fonts for desktop are not necessary in most projects. Just keep te same size as mobile.
Marketing websites always require larger sizes. That's been my issue.
Ok but how did he get the font sizes for h1, h2, and h3
My understanding is that you should use 16px font for optimum web readability. Why do you use 14px for body copy?
Also, shouldn't you use a point grid when deciding font sizes? I usually stick to 8pt grid (body copy 16px, h5/h4 16px, h3 24px, and increase accordingly).
14 is fine for labels. Generic text is either 16 for normal UI or 20 for marketing.
u r amazinggg
Why does heading 5 _16 px under desktop and heading 6_14px look the same under tablet😢
Man you are Amazing
thank you!
Thaanks!
can you please share figma link plzz ?
Helpful video! Where can I get the figma file?
this is a different typography scale than what you showed in part 1.. when should we use that and when should we use this? i am a bit confused here
I think he's used typescale minor thirds with base size 16, bit skipped some of the sizes, and always rounded up each font, so he gets 14 & 16px on the same scale.
Hi Mizko, a bit urgent I need to submit this tomorrow... how do I automate or any plugin to achieve this when the screen size is mobile the system should automatically change the fonts H1 web to H1 mob... please help
Does anyone know where part 1 is?
I wonder how this system performs for localization purposes. I have always found it problematic when a word limit is set for tittles or shorter texts. There are languages that cannot easily accommodate the word count requirements based on the English version of the text.
Nice! Leard new things. H1 and H2
where u were chnaging the header is that a plugin cos i tried to look for it on my figma i didnt see it
He has saved the text as styles on Figma. That way he just needs to change styles to affect the properties...i hope this makes sense to you. You can look into creating text styles
can i get this figma file?