Figma Tutorial: Create the Perfect Typography Scale for UI & Web Projects (IN 10 MINUTES) - Part 1

Поділитися
Вставка
  • Опубліковано 4 сер 2024
  • 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

КОМЕНТАРІ • 174

  • @Mizko
    @Mizko  3 роки тому +6

    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

  • @CoreyStewart91
    @CoreyStewart91 3 роки тому +17

    I cannot express effectively how valuable your videos are. To the point, quick moving, and SPECIFIC, actionable topics. Thank you!!

  • @Nick-ec6gb
    @Nick-ec6gb 3 роки тому

    You are a GEM buddy! You just earned a FAN. I love your style of explaining and have a request of creating more videos on responsive web design since it is a struggle for new beginners. Keep up the great work!

  • @biancawu9123
    @biancawu9123 3 роки тому +44

    I hope the algorithm picks up your videos - they’re so high quality

    • @Mizko
      @Mizko  3 роки тому +4

      Haha! Really appreciate it. Gently smashing the like button will definitely help the algo pick it up 😉

  • @claramoramunoz8524
    @claramoramunoz8524 Рік тому +1

    Thank you SO MUCH for addressing styles like the ones found on awwward, they're a big inspiration for me and I had never thought about using golden ration for scaling my typefaces 😊

  • @jlitzphotography1805
    @jlitzphotography1805 3 роки тому

    This video is REALLY informative. Thank you for getting straight to the point with everything. Awesome!

  • @hansulibakshi9303
    @hansulibakshi9303 3 роки тому +6

    Have been binge-watching your videos now! Such resourceful literally. Thanks for all the effort you have put forward.

    • @Mizko
      @Mizko  3 роки тому +1

      Thank you Hansuli! Really appreciate the kind comments. Hearing from my audience make my day and keeps me producing more content for you all.

  • @fluffypanda5380
    @fluffypanda5380 3 роки тому +9

    I literally subscribed after watching your 2 figma tutorials. Very helpful for aspiring ui designers like me. Thank you for making these videos! More tips and tutorials please 🙌

    • @Mizko
      @Mizko  3 роки тому

      More coming soon! Will be lining up some more advanced tutorials soon.

  • @adrianjerez6090
    @adrianjerez6090 2 роки тому

    Hi Mizko. Your videos make me a better designer every day. Thanks a lot!

  • @ashishchandna5327
    @ashishchandna5327 Рік тому

    Your tutorial are sorting out a lot of confusions. Thanks a lot.

  • @khairulhaaziq2332
    @khairulhaaziq2332 Рік тому

    this is priceless, so much knowledge. thank you for sharing these man!

  • @RajatKumar-ku7lx
    @RajatKumar-ku7lx Рік тому

    Your videos are really valuable. I like the practicality and easy to follow approach. Looking forward to your future content.

  • @misalsudhir
    @misalsudhir 3 роки тому +13

    I am so confident that one day you will have millions subs. Your videos are really simple with high value. God bless you!

    • @Mizko
      @Mizko  3 роки тому +1

      Thank you Sudhir! Really appreciate it 🔥

  • @stevedowning4824
    @stevedowning4824 3 роки тому +2

    Nice work mate! Really love the way you show things. Learnt a lot with this channel!

    • @Mizko
      @Mizko  3 роки тому

      Thank you Steve! More to come. Once I release all the fundamentals, it's time to ramp things up!

  • @arkoprabhobhattacharjee7547
    @arkoprabhobhattacharjee7547 3 роки тому

    Thank you so very much! You have no idea how helpful your tutorials are :')

  • @lerodcailao3494
    @lerodcailao3494 2 роки тому

    Your videos has been really helpful man! Thank you so much.

  • @soukainasro3541
    @soukainasro3541 Рік тому +1

    Dude this is on clutch!!! Thanks so much

  • @stella-8064
    @stella-8064 2 роки тому +1

    Amazing video! Thanks for sharing!

  • @nameislee
    @nameislee 3 роки тому +1

    Best tutorials on the topics. Thanks, mate. Very helpful and very on point, straight forward.

  • @theopistusyoga5405
    @theopistusyoga5405 2 роки тому

    I'm grateful to find this video. this is high quality tutorial. Thanks for sharing this

  • @TheMelwynx
    @TheMelwynx 3 роки тому +1

    Awesome video. Very helpful. You are really helping lots of designers out there...Keep it up Mizko.

    • @Mizko
      @Mizko  3 роки тому

      Thank you Melvin! Really appreciate it :)

  • @priyankajoshi3418
    @priyankajoshi3418 8 місяців тому

    this was incredibly useful!! thank you so much

  • @abdullahiarala1013
    @abdullahiarala1013 Рік тому

    man, I cant count how many things I have learned from your channel, 💖

  • @pradeeshk3777
    @pradeeshk3777 3 роки тому

    You are making awesome video to who coming to learn UX/UI design thanks for the video man, keep doing more.

  • @swapnilshinde6121
    @swapnilshinde6121 3 роки тому +1

    Soo good Mizko thank you, especially including the practice file is GOLD 🥇

    • @Mizko
      @Mizko  3 роки тому

      I’m here to help you! Glad you found this very useful. Thank you for letting me know Swapnil, really appreciate the support

  • @BhattShashwat
    @BhattShashwat 3 роки тому

    Thank you for this awesome video, you made it super simple for folks like me who have no experience in design

  • @prateek1369
    @prateek1369 Місяць тому

    Thanks man really helped me design as a dev

  • @valeria5301
    @valeria5301 2 роки тому +4

    Hi Mizko, I love your videos & all. Pls just beware that line height must meet web accessibility standards. I calculate this way: line spacing = minimum 1.5 times the font size

  • @gispinzon2800
    @gispinzon2800 3 роки тому +3

    I love this channel!! It's extremely useful for beginners like me :D

    • @Mizko
      @Mizko  3 роки тому +1

      Woo! Glad to hear Giselle. Hopefully you subbed!

  • @malinirao
    @malinirao 3 роки тому +1

    Thanks for sharing Mizko, really helpful tips.

    • @Mizko
      @Mizko  3 роки тому +1

      Woo! Malini thank you :) Really appreciate you letting me know. Means a lot. New video is dropping tonight :)

  • @AsMeReIr300
    @AsMeReIr300 3 роки тому +1

    Heyy bro! your content is superb! please keep uploading this videos, you are helping a looot of people! keep rocking man!!

    • @Mizko
      @Mizko  3 роки тому +1

      Thank you Anibal! ✨ Will be doing more advanced Figma and Webflow tutorials soon.

  • @dUXDesign07
    @dUXDesign07 9 місяців тому

    Super helpful content 👌👌👌👌

  • @frankbarnhardt4857
    @frankbarnhardt4857 2 роки тому +1

    Mizko -- just got a tip about your tutorials from a colleague. You are now my new favorite person. Learning tons from your videos and love your teaching style. Will spread the word as much as possible -- and will also be smashing that "Like" button every chance I can. Keep on keepin' on.

    • @frankbarnhardt4857
      @frankbarnhardt4857 2 роки тому +1

      Also -- do you have any tutorials using FRAMER?? Started looking into that --and very pleased with it's prototyping capabilities. Thanks.

    • @Mizko
      @Mizko  2 роки тому

      This is awesome! Thank you Frank!! Really appreciate it

    • @Mizko
      @Mizko  2 роки тому

      I can definitely produce some framer tutorials as well ✨

  • @milindkhadse556
    @milindkhadse556 3 роки тому

    Very helpful information thank you very much.

  • @SahithNayudu
    @SahithNayudu 3 роки тому

    Very helpful!

  • @federitossa
    @federitossa Рік тому +8

    This is fantastic mate, thanks a lot.
    Quick question, is it ok to use those odd sizes like 39.06px? Shouldn't it just be 39 or 40 and follow the 8s rule? Cheers

  • @vibesick
    @vibesick Рік тому

    thank you i appreciate your work

  • @roboroboto9262
    @roboroboto9262 6 місяців тому

    Thank you so much bro, God bless you!

  • @Always_help_when_you_can
    @Always_help_when_you_can 3 роки тому

    Thanks for the video, I subscribed since I Identifies you as an expert

  • @vaibhavnamburi2756
    @vaibhavnamburi2756 3 роки тому +1

    Loving these mate, i'm trying to upskill right now in Figma and this is really good

    • @Mizko
      @Mizko  3 роки тому

      Thank you V! Really appreciate the support.

  • @SehrishMoujahid
    @SehrishMoujahid 7 місяців тому

    wow I always stuck on how to decide the line height of font now i got that because of u thanks

  • @user-ri8dd5fp3l
    @user-ri8dd5fp3l 10 місяців тому +1

    Hey Mizko. One tip for you: You can calculate directly on mac, if you press cmd + space. Only put your calculation there ;-)

  • @maxdronov
    @maxdronov Рік тому

    Thank you so much!

  • @tarunjawla9463
    @tarunjawla9463 Рік тому

    amazing video

  • @jeremiahwelch2739
    @jeremiahwelch2739 3 роки тому +1

    Just getting into Figma and really enjoying your tutorials so you gained a follower. I'm planning on chipping away at all of them in the next few weeks. Also sent you a request on Linkedin and will find follow you on IG as well. Cheers 🥂

    • @Mizko
      @Mizko  3 роки тому

      Jeremiah, appreciate it! Glad you are finding a ton of value from the videos. I'm going to try ramp my frequency to 3 videos a week. Let's see how it goes.

  • @hmabubakar86
    @hmabubakar86 Рік тому

    Thank you so much bro ❤

  • @keithrogerseventphotograph9193

    Thank you!

  • @kassandrapalma6216
    @kassandrapalma6216 Рік тому

    Thank you!!

  • @user-xd4bl1gd1v
    @user-xd4bl1gd1v 2 роки тому

    i appreciate for you man! from russia with love!

  • @Ioannnify
    @Ioannnify 3 роки тому +11

    Love this tutorial, Thanks! Just wondering if we are supposed to be rounding out the font-size 13.33 to 13 or 14px?

    • @Mizko
      @Mizko  3 роки тому +9

      For sure! I round them to whole numbers

  • @daisykmr2
    @daisykmr2 3 роки тому

    Your videos are amanzing... thanks for sharing useful stuff... Do you have any videos on how do you translate your clients requirements and vision of his/her product into visual design/branding/visual. I use this stylescapes and am looking for more tips like what sort of questions to ask the client, picking up and deciding which colors, etc.

  • @OthmanAlikhan
    @OthmanAlikhan 2 роки тому

    Thanks for teh video =)

  • @GustavoPohlodMontanha
    @GustavoPohlodMontanha 5 місяців тому

    Boa man!

  • @GraveRave
    @GraveRave 3 роки тому +1

    Awesome!

    • @Mizko
      @Mizko  3 роки тому +1

      Thank.. YOU!

  • @eniolade
    @eniolade 7 місяців тому

    Thanks for this video. Should I stick to this or use the 8 Grid System?

  • @lmd4881
    @lmd4881 2 роки тому

    complete lifesaver :)

  • @diego_dandrea
    @diego_dandrea 3 роки тому +1

    Straight to the point and full of content! Just awesome! Keep it up!
    When you hit 1M subs, I'll gladly say "I've been here since the 2k" XD

    • @Mizko
      @Mizko  3 роки тому +1

      Haha! What a heart warming comment. Thanks so much Diego! I will remember this day 👌🏼

    • @Mizko
      @Mizko  3 роки тому +1

      I will also personally invite you to the studio when the day happens 🙏🏼

    • @diego_dandrea
      @diego_dandrea 3 роки тому

      @@Mizko Hahah! I'll remember that! 🙌

  • @sepidekhaneghaei8904
    @sepidekhaneghaei8904 2 роки тому

    so practical

  • @dieryarias
    @dieryarias 2 роки тому

    Thank you so much

  • @Junnanma
    @Junnanma 3 роки тому +1

    Finally got some time during the holiday to catch up all your videos at 5am with 2.5x playback speed. Thanks for all the great insights and tips! One thing I've been struggling with is client communication on Figma. I've been using both Sketch+InVision and Figma for a while, and I found Figma is better in so many ways. However, the only thing that stops me migrating entirely to Figma is the client feedback/comment feature. I am so used to the InVision platform where I can view/manage the client's comments/feedback easily, and I love how InVision sends an email with screenshot whenever someone comments on my design. I don't find Figma's commenting system is as easy to use as InVision. Really want to know how you manage/track/document client feedback. Thanks!

    • @Mizko
      @Mizko  3 роки тому

      Ha! Thank you so much for the support Junnan! Ha I would have to admit, Figma's commenting system isn't always the best because of how the panel disappears when you click on a comment. It gets fiddly BUT the overall experience is stellar. I don't think I'd ever return to Sketch from Figma.
      What's the core problem with the tracking of comments? Is it because there's generally a lot and it's fiddly to click through or simply the interaction is tedious?

    • @Junnanma
      @Junnanma 3 роки тому +2

      @@Mizko My main pain point is the fact that the comments are directly on the design. I worry that if I make any change to the design as I go through the client comment one by one, things might get shifted and moved away from the comment pins which I have not gone through, then I won't know where the client is commenting on. This is most likely to happen when I get hundreds of comments from the client.
      By comparison, with Sketch+InVision, I can leave the commented version on InVision intact and address each comment on Sketch one by one without worrying my change will affect the version on InVision unless I sync it.
      Has this ever been an issue for you at all? Should I simply change my way of dealing with comments (e.g. maybe go through and document all the feedback first before doing any changes instead of tackling them one by one, or should I duplicate the entire project and make changes on the new copy). Please enlighten me. Thanks very much, Michael!

    • @Mizko
      @Mizko  3 роки тому +1

      Hey Junnan, great insight. I've never had a problem as a freelancer or even when we worked on major design projects for government etc.
      I think potentially it's about management of the feedback cycles. The fact that you receive hundreds of comments sounds overwhelming already.
      Try to avoid presenting lots of different flows etc in one go. Always break up your presentation into batches and present them in a staggered manner.
      Eg.
      1. Present Homepage + the funnel - get feedback, refine and finalise.
      2. Then proceed to working on section B and C.
      3. Get feedback, refine and finalise.
      4. Then proceed to working on section D and E.
      etc etc.
      Hopefully that helps!

    • @Junnanma
      @Junnanma 3 роки тому +3

      @@Mizko Thanks so much for spending your valuable time giving me such a detailed answer. You are absolutely right! I usually present a whole chunk of design at once to the client. This is so helpful. I am definitely going to try this and keep my feedback cycles smaller and more frequent. I am pumped for this year!👍

  • @SketchbookStudioo
    @SketchbookStudioo 2 роки тому

    thanks!

  • @fernwehtwl
    @fernwehtwl Рік тому

    Thanks for this video Michal! I am curious to know the logic behind these scales like why 1.2 and not 1.3 or 1.5 to create the scaling of the text and how it fits nicely in design. :D

  • @clairewei7963
    @clairewei7963 Рік тому +1

    Hi Mizko. Thank you for producing such high-quality tutorials. I really enjoy watching them. Quick question. In order to snap the texts to the baselines, you adjust the line space to be multiple of 8px. However, the leading of the paragraphs is not in scale. For example, for both paragraphs with larger or smaller fonts, the leading is both 16. If I wish to have a bit of consistency, how to achieve that? Thank you!!

    • @evanbrogan2938
      @evanbrogan2938 10 місяців тому

      I think you and others have the same question I do. Why are we OK to give exact scales to character size but round the leading/line spacing? Honestly that's the same question as in print when creating a grid. To me, the size of the font creates hierarchy (and therefore meaning), while the grid/baseline grid creates the overall harmony and rhythm. You really do have to work at it to create enough paragraph styles to accommodate both size and aligned leading while having enough leading.
      Related to the grid but not to leading: For the same reasons of harmony, rhythm, and creating a professional look, whether in web or in print, you should try to space each block using a the grid and not exact/decimals. Try as you may to space blocks in print along a grid, usually you have to squeeze something in. And if you're really still struggling at this point in print, you adjust your leading. It's probably easier to stick with the rounded numbers in web, where one can scroll, and you really don't have to squeeze things. It seems to me that developers look at everything according to the CSS block model as well. And if everything is a block, then wouldn't it be nice to simply know the space between them using rounded numbers? You get a clean professional look and it's easier on the dev team.
      I thought this quote was a typical perspective about designing with grids: "Personally I hate (baseline grids). I know what they are for but they always seem to cause more trouble for me. Yes, the body text is nice and aligned. You can plan your headings to work right. But then the client wants to change the size/leading of the subheadings, and also doesn’t want widows and orphans, but also wants columns to balance on every page. Something always has to give. Just hang the text from the top and be done with it, otherwise I’m spending hours of manual work topping and tailing 100 pages." While this author says he knows why, he only alludes to when: "100 pages." For me, when to use the baseline grid is on print projects with many pages--it creates that professional, thoughtful, consistent approach page after page after page. You have to experience that. A single page ad doesn't really need this. In the world of web, carousel ads could benefit from consistency of placement, but sites with many pages (same as in print) definitely would benefit.
      Other things you could try if leading is too tight:
      1) Changing the base font size to go a little smaller. This would readjust all your sizes in the scale, potentially impacting each scale as well, but all your scales will have more breathing room in leading if the point size comes down compared to a stationary, rounded leading number.
      2) Try a different scale ratio.

  • @raygandesign
    @raygandesign 3 роки тому +1

    Great video man..Simple explanations

    • @Mizko
      @Mizko  3 роки тому

      Thank you Ray! Oh nice channel you've got there too. Keep it up!

    • @raygandesign
      @raygandesign 3 роки тому +1

      @@Mizko Thank you man! This means a lot to me

  • @vigneshKrishnamoorthyRules
    @vigneshKrishnamoorthyRules Рік тому

    perfect

  • @KamarajMani
    @KamarajMani 3 роки тому +1

    Informative... 👍👍👍

    • @Mizko
      @Mizko  3 роки тому +1

      Thank you Kamaraj! ✨Thanks for the support and feedback. Really appreciate it.

  • @minaghasemi2544
    @minaghasemi2544 3 роки тому

    Thank you

  • @biancawu9123
    @biancawu9123 3 роки тому +1

    SUPER HELPFUL

    • @Mizko
      @Mizko  3 роки тому

      Thank you Bianca! Glad you enjoyed this ✨

  • @clarenancy77
    @clarenancy77 Рік тому

    Thanks for these tutorials, Mizko! I'm going to continue onward! But...questions.
    I'm curious about all the fonts!
    I've been doing print design for years. OR design in which the font can be made into an object and therefore static.
    How do all these programs and websites manage the fonts? How to you choose a font that Google or Firefox won't foul up? Or will they reconcile with a similar font?

  • @bithagrop2539
    @bithagrop2539 Рік тому

    🎉❤nice++!!

  • @arielwertlen6709
    @arielwertlen6709 Рік тому

    Very helpful channel, thank you! I wonder though, whether anyone else is perplexed by the fact that the scale setting in Type-Cast lists triads instead of scales!

  • @Queenbeez786
    @Queenbeez786 Рік тому

    thank you soooooooooooooooooooooooooooooooooooooo much

  • @Chaumaerik
    @Chaumaerik 3 роки тому +6

    Hey, first of all thanks for sharing. I'm working on improving my handoffs to developers and just recently moved to Figma from using Sketch the past years. I like structure with the vertical grid, never really used it before but it does make for more precision. I just wonder if you could quickly clarify how using this 4pt/8pt/16pt translates for easier and better efficiency for developers too, is it mainly due to that it is based on rem increments? Also what are your thoughts on having type sizes that have decimals, for example not 14px but say 14,32px or whatever. Historically I've always had the mindset that it would make it easier/cleaner to have precise numbers without decimals and that developers wouldn't like having decimals either but maybe that's ok to have after all as they go by rem rather than px when coding? Thanks

    • @Mizko
      @Mizko  3 роки тому +7

      Hey Martin! Appreciate the kind comments.
      1. 4/8/16pt is conventional. The reason why we use 4 is because it's even and 2pt is just too small. 4pt is meaningful enough and more appropriate for dense UI designs.
      2. Rounding up numbers is a very common practice and you can definitely round them up / down for the developers.
      In the end working with developers is more important than defining what you do.

  • @AA-wb9ow
    @AA-wb9ow 2 роки тому

    Thank you your help! I have question, I know figma uses pt unit and the type scale uses px is that okay to use the same value for both like of px=pt?

  • @lewisbeirne9324
    @lewisbeirne9324 2 роки тому

    Hey Mizko, some fonts have a baseline that do not align to the 8pt or even 4pt grid? What are you supposed to do in this scenario? The line height and font size are multiples of 8 but it still doesn't work. I tried to experiment with the font size and line height but I can't seem to create a scale with it where the line height and baseline align to a grid. The font is a google font too by the way (Nunito sans) so the construction of the font must be okay too. What would you do in this scenario?

  • @sirbirre
    @sirbirre 2 роки тому

    Thanks for the video again!
    Can i have a question? I added Line height pixels divisible by 8 or 4 in my case and actually I used your grid vertical system 4px too. However my typography Montserrat denied me matching the grid and my text as well. 😔😔

  • @nguyenchau7107
    @nguyenchau7107 Рік тому

    Fking love this man bro. One fking respect from me broooo

  • @giancarlomanalo8624
    @giancarlomanalo8624 Рік тому

    YESS

  • @raghothamharish2283
    @raghothamharish2283 3 роки тому

    Hi Mizko, Hope you are doing well! is there a way I can automate to fetch different font styles when the frame goes to 300 px at that time font size should reduce? EX H1 tag which is of 48 px on the web with 960px when the frame size changes to 320 px on mobile at that time the font should change to H1 tag with 36px I have defined all the styles sheet ready...
    Thanks for comments

  • @3esila894
    @3esila894 Рік тому

    thanks tNice tutorials really helped

  • @kronkorken_
    @kronkorken_ Рік тому

    Nice Video. What is about mobile design? I think the headings could be too big for small smartphone screens. How do you handle this?

  • @echolu3349
    @echolu3349 Рік тому +1

    Hi Mizko thanks for this great video. Where is the file to download? Thanks!

  • @yunes1176
    @yunes1176 Рік тому

    Mylosp just a legend really aren’t ya

  • @stevenquadros9004
    @stevenquadros9004 2 роки тому +3

    Really enjoyed this video. Could you please make one explaining a method to help map out the respective font sizes from desktop to mobile? For eg: if a font on desktop is 50px then it's relative font size and line height on desktop should be...?

    • @luischicote7259
      @luischicote7259 Рік тому

      did you find any answer for this problem?

    • @stevenquadros9004
      @stevenquadros9004 Рік тому +1

      @@luischicote7259 not exactly. The best answer that I've come to find out is to eye ball it or to use the -1 method. Eg if H1 desktop is 40 and H2 desktop is 30 then H1 mobile will be 30 and so on... Hope this helps :)

    • @luischicote7259
      @luischicote7259 Рік тому

      ​@@stevenquadros9004 yeeah, I understand. Perfect. I gonna try to do this method

  • @comrelaxandrepeat5061
    @comrelaxandrepeat5061 Рік тому

    Are you sure we can use font size as fractional values like 19.2 px? bit confused in that area

  • @djerabendigngar8569
    @djerabendigngar8569 Рік тому

    hello thank you so much for your videos. its very helpfull. am doing now my on stream music app and want you to correct that for me. can you ?

  • @InayaNanban
    @InayaNanban 2 роки тому

    Why should i use scale for typography ? Please say !

  • @GameIsland63
    @GameIsland63 2 роки тому

    Hi Mizko, Great Video as always!
    May i know your masterclass, you say for line height, just multiply the same as type scale, for example minor third, but in the tutorial, you say multiply by 8.
    May i know what is your current method? Thank you.

    • @pierregelas
      @pierregelas Рік тому

      No you multiply the text size by the scale, but for the line height, you base that on your grid, a multiple of 4 if you have 4px vertical grid, or 8px if you have a 8px vertical grid.

  • @elfacuparede
    @elfacuparede 3 роки тому

    Hi Mizko! Thanks for sharing knowledge with us! I designed many websites but I still don’t know how to scale typography when I jump from desktop to mobile. Could you give me some tips or advices for that? I always have the doubts if I have to keep the sizes or make them smaller than pc, or sometimes bigger... I don't know.. and I can't find videos talking about that... =(

  • @daiwatable
    @daiwatable 3 роки тому

    How many headings do we need when we are designing for mobile apps?

  • @ffewf62
    @ffewf62 Рік тому

    What do you mean by snap to the grid? Each font type is a different size and spans more than one 8px line.

  • @rubenjsloureiro
    @rubenjsloureiro 2 роки тому +2

    Sorry to ask, where we can download the file?

  • @prajwalsharma2794
    @prajwalsharma2794 Рік тому

    How many weights do you use for your typographic scale

  • @evangill9123
    @evangill9123 Рік тому

    Super helpful video. This is helping me be consistent across different paper sizes and digital formats.

  • @jeesus97
    @jeesus97 2 роки тому

    what do you think about typescale? is a figma plugin

  • @alexnikon7898
    @alexnikon7898 3 роки тому +1

    Thanks for the video! I was constantly told that using decimals in the font-sizes is questionable decision. What do you think?

    • @Mizko
      @Mizko  3 роки тому

      No problem at all. Rounding up and down is also a very common practice :) I do it too.

  • @tommakadobe1339
    @tommakadobe1339 3 роки тому +1

    Hi! Can I use 10pt grid? I find 8pt grid doesn't fit the layout for iphone 12 max.
    Thanks!

    • @Mizko
      @Mizko  3 роки тому +1

      4 or 8pt

  • @mohammedomran5491
    @mohammedomran5491 3 роки тому +21

    I have a question, I'm used to use type sizes without decimals , I know that is a good practice for UI Design , and we advised to use whole number , I mean like 48 , 40 , 32 . . . etc, what you think about that which is best for UIUX Designer workflow?

    • @onarayavoravarchai6103
      @onarayavoravarchai6103 2 роки тому +5

      I've watched another video by Figma using similar multiply method.
      They round up/down the decimal after multiply with golden ratio.
      I think it's fine as long as the bottom line - the user experience- is good.

    • @stevedoetsch
      @stevedoetsch 2 роки тому +11

      Your line heights should be whole numbers, usually a multiple of some number like 8, so they align with your grid, but your font size scaling should use decimals according to the scale you have chosen. It's your line height that determines the vertical rhythm not the font size.

  • @zindex5
    @zindex5 3 роки тому

    Sorry, I cannot get 16 points with line-height:24 snap to the vertical grid... anything I got it wrong? thanks

  • @lazarelondaridze
    @lazarelondaridze 3 роки тому +2

    Goo stuff. One thing I would do differently is that I'd round those numbers

    • @Mizko
      @Mizko  3 роки тому +1

      Yep! This is really just to help everyone get started. As suggested take the learnings from this video and make it your own. I normally round it up and down as well 👌🏼

    • @lazarelondaridze
      @lazarelondaridze 3 роки тому +1

      @@Mizko Cool

    • @Mizko
      @Mizko  3 роки тому

      @@lazarelondaridze thanks for popping in with the support and comment. Really appreciate it 👌🏼

    • @lazarelondaridze
      @lazarelondaridze 3 роки тому +1

      @@Mizko You'll be big soon, with the quality of the content you're putting out. Best of luck and keep up the good work

    • @Mizko
      @Mizko  3 роки тому +1

      @@lazarelondaridze means a lot. Ha Don’t worry, I will remember this moment when we get there 👌🏼