Figma Tutorial: Create a RESPONSIVE Typography Scale for Mobile & Tablet - Part 2

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

[@Junnanma]

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

[@Mizko]

🙏🏼

[@Bowsers_Trousers]

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!

[@Mizko]

✌🏼

[@abarakat2241]

second that!

[@bappymithun8978]

Your videos are the most useful i have found in youtube. Im So much thankful to you. Love and respect from Bangladesh.

[@arunkumarrathod5514]

Thanks for the video Mizko! I just created my first typescale and you videos on type helped a lot.

[@Anointingudenze]

As a beginner to ux/ui designs, your videos have really really helped me a lot...... I really appreciate your work here❤❤❤

[@hikimjess]

super helpful! thank you for answering all my burning questions that I couldn't ask at work

[@davidrozsa8406]

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

[@vikeyvikey3149]

wow!! Man nice explain

[@pearlmade3035]

Great videos Mizko💯. The design system series is really everything! Thank you for taking your time to put these together

[@Mania26]

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.

[@aydemironur35]

I were not aware of relationship between labeling and SEO. Wow thank you so much!

[@luischacon8390]

THX. It's really helpful how you share solutions to further struggles when applying the scale in designs.

[@Mizko]

Thank you!

[@sankiago]

papi mizko derramando sabiduría como siempre

[@canklejohnes3260]

Awesome tutorial man, let's go let's go!!!!

[@arshishayesta8847]

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.

[@adsleeblythe]

Great tutorial Mizko! This answered so many questions for me!

[@aristosxanthus658]

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

[@damilolafunsoadu]

This is exactly what I need! 3:36

[@carloscifuentes3571]

GREAT VIDEO!!! looking for this for years!!! Thanks a lot!

[@papluha32]

Thank you. That tip about compromise was helpful :-) (around 8:50 )

[@r_Abdullah99]

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?!

[@Mizko]

Hey MD, this one will be coming soon :)

[@LegacyU_I1234]

I really love this. Mizko, kindly do a video on case study. Thanks

[@ashamoni7795]

Great. Super helpfull. Thank you sir.

[@Mizko]

Thank you Asha!

[@jackmak9941]

Super helpful! Thank you Mizko

[@alihezarpisheh8350]

Great explanations thank you

[@PixPunxel]

Great stuff

[@Mizko]

Thank you Pix!

[@MsAsom]

thanks a lot for this one, i'm always struggling with typography and this was helpful to organize my files

[@juls2334]

Great tutorial! Thanks for sharing!

[@Mizko]

:)

[@emmawo2850]

Thank you so much, I've learnt a lot from your video

[@imvegan2836]

incredibly useful. just what I was looking for thx

[@davetheglitch_]

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!

[@sonnietech]

Your videos are just brilliant

[@BillMikeKenya]

Why doesn't this gentleman have 1 million subscribers?

[@Ca_Z24]

Most Valuable things are underrated 😊

[@plantifulalexandra]

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.

[@uiuxner]

Thanks! a lot Mizko that was very helpful :)

[@Raghudesign]

Why not we use rem for this ??

[@realadenikebabalola]

This was really helpful, thank you

[@doublesil9449]

Thank you so much! This is a great video.

[@pedro_cfms]

Nice work, congrats

[@Mizko]

Thanks Pedro! Go make gold!

[@SchokoShii]

your videos are helping me so much ! thank you ❤

[@uxui_mayur815]

Much Helpful Topic !

[@Mizko]

✌🏼

[@sajidmoinuddin5424]

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! :)

[@quangho2129]

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

[@ismailtajudeen805]

Thank for this tuts Mizko. Do you think we can get the figma file?

[@Mizko]

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.

[@sarahblack9973]

@@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 :)

[@HUNT7RR]

Great content !! Super helpful 🎉 Will you be doing a tutorial about spacing and grid in the future ?

[@Mizko]

Hey Iyehoe :) Good idea! I will be dropping a design system video soon.

[@leslieengel5277]

The use of the type looks great. Curious if accessibility was taken into consideration when establishing non-header text?

[@Mizko]

Hey Leslie! Thank you. 100%. They have been inspired by Apple's Human Design Guidelines.

[@johnnydfred]

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!

[@maya9942]

Thank you so much for this video.

[@ЕкатеринаСтепаненко-н7к]

Thank you! It was really useful!

[@ivanbadia3232]

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)?

[@lvan_studio]

Thank you for the video! I was wondering do ppl generally made a type group for tablets as well?

[@shafrazibnusamadh4469]

Great Things you gave to me.. Keep Doing!

[@terrances3261]

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?

[@Mizko]

Thank you Terence! Ah I should do a full responsive component design sometime.

[@maurogarcia2012]

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!

[@steliospapadopoulos4099]

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

[@roderblue]

Really enjoy your tutorials. Do you have any on Prototyping?

[@KrystianMieszkowski]

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?

[@cliffh.2432]

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.

[@thehearingaid]

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

[@piyushmarde9877]

Thanks Mizko

[@Vinoy2231]

Can you please make a detailed video on Tablet UI design please?

[@paddywakasiaka4176]

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

[@santoshladde83]

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

[@Produkthelt]

Super! Would you share the Figma file as well 🤞🏻

[@Mizko]

I'll be allowing everyone to purchase our full-fledged design system with more components soon :)

[@bmngatia474]

Hi what about the spacing (padding and margin) for this design system

[@leonardofabbri3040]

thank you!

[@limitless1990]

Can you make video about layout grid for enterprise software with side nav?

[@ghilasbelkaci6588]

Great tutorial. Is it possible to receive the template you used for the Typography ? Thank you

[@fluffypanda5380]

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!

[@LemonDust13]

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 😂

[@ItsMeHakan]

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?

[@cliffh.2432]

Same question i had, did you ever get an answer?

[@ItsMeHakan]

@@cliffh.2432 nope

[@katedames]

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?

[@omaryaa_]

Helpful video! Where can I get the figma file?

[@mpinkycrazy]

Thaanks!

[@MrFelixgascon]

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

[@Mizko]

Thank you Felix! Great to hear. I don’t remember but most likely Inter or Circular :)

[@anamikachhonkar2200]

Man you are Amazing

[@matiascanepa1433]

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 ?😅

[@maelar1605]

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

[@vanestn]

Thank you for this video! I was having anxiety about creating my typography system for a responsive project lmao

[@GuitarreroDaniel]

Thank you very much, these are very nice tips! I wish you had explained "Text Styles" before using them tho.

[@cappythana]

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?

[@fernwehtwl]

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?

[@daniaprouty]

I’m watching all your videos! Awesome content! I don’t find these in Spanish. 🤔

[@Mizko]

We will try to get subtitles in Spanish :)

[@Mizko]

Or maybe I learn Spanish 😂

[@njengathegeek]

I had to watch this again

[@TheCds777]

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.

[@timothydamilola614]

where u were chnaging the header is that a plugin cos i tried to look for it on my figma i didnt see it

[@elvisyno071]

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

[@fodaymaliksaccoh1028]

Mizko whats up, i'm finding it difficult to start with figma really need your help.

[@thematteovalentino]

I am a bit late but really nice video mate!

[@Bk-sd7dv]

u r amazinggg

[@onetwozero2266]

Hi, Can you give me of "TD Design System" File Link? I love this typography system

[@iam_nick]

Can I use any fonts from typekit embed into mobile apps?

[@raghothamharish2283]

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

[@levofspades]

5:27 Gently smash the like butt 🤣

[@pratikshajondhalekar86]

Why does heading 5 _16 px under desktop and heading 6_14px look the same under tablet😢

[@bertminderbertminder6741]

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.

[@rohmanhameed]

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

[@Cassp0nk]

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.

[@curtispene3260]

Ok but how did he get the font sizes for h1, h2, and h3

[@neerajmalviya4872]

can you please share figma link plzz ?

[@bling0rb007]

Nice! Leard new things. H1 and H2

[@alexandersmith4125]

Does anyone know where part 1 is?

[@davidluft]

Which HTML tag should "title" use?

[@Mizko]

Site Title Here

[@davidluft]

@@Mizko Thank you!

[@fqras]

I feel like the big fonts for desktop are not necessary in most projects. Just keep te same size as mobile.

[@Mizko]

Marketing websites always require larger sizes. That's been my issue.