Figma Tutorial: Create a RESPONSIVE Typography Scale for Mobile & Tablet - Part 2
HTML-код
- Опубликовано: 24 мар 2021
- My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.)
👉 thedesignership.com/courses/t...
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/...
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesignership.com/produ...
Sign up to my newsletter for exclusive content:
👉 mizko.net/newsletter
Follow me on IG (Daily updates):
👉 / themizko
===
Level up with me:
Become a legendary designer: thedesignership.com
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
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. 😅
Great videos Mizko💯. The design system series is really everything! Thank you for taking your time to put these together
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!!!
🙏🏼
Great tutorial Mizko! This answered so many questions for me!
super helpful! thank you for answering all my burning questions that I couldn't ask at work
As a beginner to ux/ui designs, your videos have really really helped me a lot...... I really appreciate your work here❤❤❤
GREAT VIDEO!!! looking for this for years!!! Thanks a lot!
Your videos are the most useful i have found in youtube. Im So much thankful to you. Love and respect from Bangladesh.
Awesome tutorial man, let's go let's go!!!!
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.
Super helpful! Thank you Mizko
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.
I were not aware of relationship between labeling and SEO. Wow thank you so much!
incredibly useful. just what I was looking for
thx
thanks a lot for this one, i'm always struggling with typography and this was helpful to organize my files
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!
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
Great tutorial! Thanks for sharing!
:)
your videos are helping me so much ! thank you ❤
This was really helpful, thank you
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 explanations thank you
Thanks! a lot Mizko that was very helpful :)
Thank you! It was really useful!
THX. It's really helpful how you share solutions to further struggles when applying the scale in designs.
Thank you!
papi mizko derramando sabiduría como siempre
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!
Your videos are just brilliant
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
Thank you so much! This is a great video.
Great Things you gave to me.. Keep Doing!
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!
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
Thank you so much for this video.
Thank you so much, I've learnt a lot from your video
Much Helpful Topic !
✌🏼
I really love this. Mizko, kindly do a video on case study. Thanks
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 😂
Thanks Mizko
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 stuff
Thank you Pix!
Nice work, congrats
Thanks Pedro! Go make gold!
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?
Great. Super helpfull. Thank you sir.
Thank you Asha!
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.
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! :)
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 :)
This is exactly what I need!
3:36
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
u r amazinggg
thank you!
Thank you. That tip about compromise was helpful :-) (around 8:50 )
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.
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.
Thank you very much, these are very nice tips! I wish you had explained "Text Styles" before using them tho.
wow!! Man nice explain
Great tutorial. Is it possible to receive the template you used for the Typography ?
Thank you
Thank you for the video! I was wondering do ppl generally made a type group for tablets as well?
Really enjoy your tutorials. Do you have any on Prototyping?
Thaanks!
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?
I am a bit late but really nice video mate!
Helpful video! Where can I get the figma file?
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 :)
Why doesn't this gentleman have 1 million subscribers?
Most Valuable things are underrated 😊
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!
I had to watch this again
Nice! Leard new things. H1 and H2
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?
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.
Thank you for this video! I was having anxiety about creating my typography system for a responsive project lmao
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
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 ?😅
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.
Can you make video about layout grid for enterprise software with side nav?
Hi what about the spacing (padding and margin) for this design system
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
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 :)
Man you are Amazing
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 :)
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
Hey Mizko,
Thanks for the tutorial.
Can you do a video on Material Design type system - how to apply the font size unit when designing for web, iOS and Android in your UX UI practice? This concept is very confusing.
Font size units
The following units are used to express font size on Android, iOS, and the web.
Platform Android iOS Web
Font size unit sp pt rem
Conversion ratio 1.0 1.0 0.0625
Web browsers calculate the REM (the root em size) based on the root element size. The default for modern web browsers is 16px, so the conversion is SP_SIZE/16 = rem.
Let's say, if I design an app in Android with body text 16px, what would be the font size in web and iOS based on the conversion ratio above?
Thanks
Can I use any fonts from typekit embed into mobile apps?
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.
Can you please make a detailed video on Tablet UI design please?
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.
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
Hi, Can you give me of "TD Design System" File Link?
I love this typography system
Mizko whats up, i'm finding it difficult to start with figma really need your help.
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
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 😂
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.
can you please share figma link plzz ?
❤❤❤
Ok but how did he get the font sizes for h1, h2, and h3
Why not we use rem for this ??
Does anyone know where part 1 is?
Why does heading 5 _16 px under desktop and heading 6_14px look the same under tablet😢
Which HTML tag should "title" use?
Site Title Here
@@Mizko Thank you!