Perfect Typography Scale for UI Design (Exact Blueprint) | Figma Tutorial

Download Shipfaster UI - BASE:
thedesignership.com/shipfaste...
👉 TUTORIAL100 👈 Use the coupon to get the file for FREE!
Shipfaster UI - Advanced Figma Design System (3,000+ designers)
👉 thedesignership.com/products/...
Timestamps:
00:00 - We won't be using Typography scales
00:37 - Download the FREE Shipfaster UI - Base file
01:45 - Exact Typography Scale for UI Designs
07:14 - Real world project typography breakdown
---
Become a highly-demanded Product (UX/UI) designer with me:
Master Figma with my Ultimate Figma Design Masterclass (6,800+ students)
👉 thedesignership.com/courses/t... [Use the coupon to get 10% off - BENTO10]
Practical UX Research & Strategy Masterclass (690+ students)
👉 thedesignership.com/courses/p...
Outline - Figma Wireframe Kit (500+ designers)
👉 www.thedesignership.com/produ...
Follow me on IG (Daily updates):
👉 / themizko
---
Follow and learn with me:
Become a legendary designer: thedesignership.com
Personal portfolio: mizko.net
Instagram: / themizko
LinkedIn: / mizko

[@Mizko]

If you want to download Shipfaster UI - BASE: www.thedesignership.com/shipfaster-ui-base 👉 TUTORIAL100 👈 Use the coupon to get the file for FREE!

[@adarogu]

Thank you for this Mizko, appreciate what you are doing man.

[@Mizko]

🙏

[@samuelshowunmi1579]

So helpful and thanks for the great explanation

[@uifry]

SO helpful Tutorial :)

[@seriouslybruhhh]

It is so similar to Uber's Base Design system. Great explanation there !

[@HasnatAhmed-jn4di]

Love you for Shipfaster 😍 Thank you so much @mizko ❤

[@Mizko]

Anytime!

[@RGKRAJA]

This is so helpful ❤❤

[@SzabatDesign]

I have the Design system from Designership and I regularly work with it on projects for my clients ;) Sooo good!

[@Mizko]

🫶 2.7 will be launching soon!

[@SzabatDesign]

ufff can't wait :D@@Mizko

[@alpmobs]

Thank you!

[@wajeeharehman4268]

This is so so helpful 😊

[@Mizko]

Thank you!!!

[@yusufkhalidmuhammad4948]

HI Mizko, Thank you so much for this! Tried out the Base Shipfast UI kept showing "Unsupported file format"

[@MrLohkaa]

Thank you Mizko for the explanation and the free UI kit. What's best practice if I would like to use a different font for my type-scale? Detach all font styles > select new font > attach new font?

[@Mizko]

Hey Lohka, You can use the Figma plugin, Batch Styler. You can select all fonts > select new font > tada!!

[@bvs455]

Hey Mizko! Any idea when the Shipfaster UI 2.7 will be available? Excited for the next update!

[@Mizko]

No locked in date, but soon :)

[@megzi___9398]

The description for the line height does for labels does not match

[@snorose3458]

How would you suggest to work with this typescale best between the breakpoints? From what i can see the Large, Medium, Small etc is not connected to the size of device and will be mixed heavily through out layouts and further shuffled in different combinations for different breakpoints?

[@Mizko]

That would be dependent on what you would like to do for each breakpoint. There’s no one size fits all solution. I personally prefer 14px as a base and you can increment by 2. There are also Mobile versions of the headings.

[@vadim_sharapov]

Hi, in my experience, even though a lot of designers are using 'Large, Medium, Small', it is better to go from '3x, 2x, 1x', because that naming will abstract you from thinking that it is directly connected to the physical size of devices-Large (Desktop), Medium (Tablet), and Small (Mobile) size. This abstraction helps maintain scalability and flexibility across various screen sizes and resolutions. The second thing, based on my experience, is to document the specific use cases or contexts in which each size variant should be used. For instance, '3x' might be used for primary headings, '2x' for secondary headings, and '1x' for body text, irrespective of the device size. Further, it's crucial to integrate responsive design principles with these size variants. You can utilize CSS media queries to adjust the font size, spacing, and other related properties of each variant (3x, 2x, 1x) based on the viewport width. This approach ensures that your typography scales appropriately across different breakpoints. At this moment the problem is that Figma do not support variables for typography and that will create some confusion and extra documentation from the designer. Hope that is helpfull :) PS You can use (or communicate to developers or they will tell it to you) techniques such as fluid typography, like calc(), along with viewport units (vw, vh, vmin, vmax), to create type sizes that scale smoothly between specific breakpoints.

[@MrLohkaa]

Hi Mizko, I see that you are using a width of 1136 for the large layout grid, what is the reason behind this? I always use 1440px myself, thanks in advance!

[@vadim_sharapov]

In my experience, it's better not to start with the desktop design but with the mobile version and then scale it up. So, maybe he uses a narrower size so that it's easier to adjust for tablets and mobile devices, or it could just be a typo :))))

[@MrLohkaa]

@Mizko Can you please explain?

[@bl7937]

Perhaps I'm missing something, but how do you manage updating ALL typography if the font changes? Do you have a typeface component that you can update that updates ALL typography styles?

[@Mizko]

Figma plugin, Batch Styler

[@arunkumarrathod5514]

Hey Mizko can you please make a video on how to build a typescale from scratch. like what sizes to choose for different platforms etc. I believe many people dont know how to make a typescale according to project requirements. It is a sincere request. Please do consider this... Thanks!

[@Mizko]

Hey Arun, watch this video from start to finish… that’s what this video is about 👌

[@arunkumarrathod5514]

@@Mizko Hey Mizko thanks for the reply but let me elaborate a little more. I was asking to make a detailed video on the thought process behind picking the size, line height, and other parameters according to the project and understanding why are we using these specifics for these specific purpose's. I want you to teach me that given any situation i should be able to pick the right specifics and give reasoning behind the decision. I hope that clears my question a little more. looking forward to your reply. Thanks!

[@Fabian-fk8qs]

@@arunkumarrathod5514 also interested in that

[@Fabian-fk8qs]

​@@MizkoI was also missing a lot about the reasoning. Felt more like an advertisement for your UI kit. Why don't you use scales like minor fourth etc. anymore you suggested in your curse and videos? And what about different fonts? This one is for Inter - how to match letter-spacing to a font e.g. (totally different with other fonts than Inter) or what about fonts that seem like Inter but 1px smaller or larger at the same font size (or in between). Etc.

[@MuratKarakus-to4tr]

sir, god bless you! will there be a figma 2024 ux ui design course as well?

[@Geriya]

Dude don’t expect from him 😂 learn it by yourself. It’s a free world 🎉

[@Mizko]

Yep! This will be launching once I’m back from my holiday

[@MuratKarakus-to4tr]

@@Geriya and youtube is not a part of free world? looking for a video in youtube, finding a passionate person and learning from him or her, is this not mean learning by myself? Think before writing your comment my friend...

[@MuratKarakus-to4tr]

@@Mizko oh happy holidays sir, than you so much!

[@abdulrahmaniliyas5691]

Invalid coupon, thats what i got as feedback. or am i doing it wrong somehow?

[@SzabatDesign]

One fast question, what about button? Soo in that case main CTA is as well Label typography?

[@Mizko]

Exactly! Button labels are labels not paragraphs :)

[@morshlab]

One Question where did you find the ideal typography scale? you used here, or any source or rules from design professional? or you just used your own will and thought that your scale is the best?

[@Mizko]

From 14 years of design :)

[@morshlab]

@@Mizko Thanks for your reply. However, just citing years of experience doesn't provide much insight into the reasoning behind your typography scale choices. There are well-established principles and guidelines around readable typography that designers follow.

[@RLNDcaST]

I have Shipfaster 2.3v and would like to know how can I update that to newest version? 🙂

[@Mizko]

Drop us a message on support [at] thedesignership.com with your receipt and we can sort you out.

[@edigunawan3194]

Thank you so much mr. mizko design system download free

[@Mizko]

:)

[@mzaidhayat]

I'm looking for a Master Design System course based on new figma updates, can someone please suggest

[@Mizko]

I’m working on one as well speak :)

[@mzaidhayat]

@@Mizko Awesome! Would love to master Design System from you, how you explained the Typography.

[@gamehubby]

I'm new here, do you offer discount to get everything? Wanna check it out

[@Mizko]

If you want to buy everything… I can organize a deal for you :) email [e-mail]

[@Mizko]

If you want to buy everything… I can organize a deal for you :) email [e-mail]

[@bartpas12]

File download is not working after the checkout, could You please fix it?

[@Mizko]

I just checked and it's working fine? What do you see?

[@simonlarragy9376]

Same problem. I'm getting this@@Mizko . A dialogue box with "Shipfaster UI 2.6 - Base.fig" importing but all I'm getting is a twirly wheel that doesn't stop

[@Katiedoan88]

@@simonlarragy9376 I'm also unable to open the file on my MacBook :/ I tried to open in Figma, but it doesn't recognize it

[@Underhills]

Where's the link to the type sizes? All I see is links to the purchase of the whole system itself.

[@Mizko]

First link in the video description and first link in the comments.

[@Mizko]

First link in the video description and first link in the comments.

[@Underhills]

That link doesn't lead to any downloading interaction, instead it goes to a transaction form.@@Mizko

[@iriza133]

actually it is not working (I mean after applying the cupon code, I can't pass the download option)

[@Mizko]

Did you input an email?