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

Поделиться
HTML-код
  • Опубликовано: 12 июн 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

Комментарии • 173

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

  • @biancawu9123
    @biancawu9123 3 года назад +43

    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 😉

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

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

  • @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 🔥

  • @jlitzphotography1805
    @jlitzphotography1805 2 года назад

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

  • @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 😊

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

  • @ashishchandna5327
    @ashishchandna5327 Год назад

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

  • @adrianjerez6090
    @adrianjerez6090 2 года назад

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

  • @khairulhaaziq2332
    @khairulhaaziq2332 Год назад

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

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

  • @RajatKumar-ku7lx
    @RajatKumar-ku7lx Год назад

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

  • @nameislee
    @nameislee 2 года назад +1

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

    • @Mizko
      @Mizko  2 года назад

      🔥

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

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

  • @stella-8064
    @stella-8064 Год назад +1

    Amazing video! Thanks for sharing!

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

  • @priyankajoshi3418
    @priyankajoshi3418 6 месяцев назад

    this was incredibly useful!! thank you so much

  • @theopistusyoga5405
    @theopistusyoga5405 2 года назад

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

  • @abdullahiarala1013
    @abdullahiarala1013 Год назад

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

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

  • @BhattShashwat
    @BhattShashwat 2 года назад

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

  • @pradeeshk3777
    @pradeeshk3777 2 года назад

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

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

  • @roboroboto9262
    @roboroboto9262 4 месяца назад

    Thank you so much bro, God bless you!

  • @user-ri8dd5fp3l
    @user-ri8dd5fp3l 8 месяцев назад +1

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

  • @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 ✨

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

  • @maxdronov
    @maxdronov Год назад

    Thank you so much!

  • @milindkhadse556
    @milindkhadse556 2 года назад

    Very helpful information thank you very much.

  • @keithrogerseventphotograph9193
    @keithrogerseventphotograph9193 11 месяцев назад

    Thank you!

  • @dUXDesign07
    @dUXDesign07 7 месяцев назад

    Super helpful content 👌👌👌👌

  • @vibesick
    @vibesick Год назад

    thank you i appreciate your work

  • @SahithNayudu
    @SahithNayudu 3 года назад

    Very helpful!

  • @kassandrapalma6216
    @kassandrapalma6216 Год назад

    Thank you!!

  • @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 5 месяцев назад

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

  • @tarunjawla9463
    @tarunjawla9463 Год назад

    amazing video

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

  • @Always_help_when_you_can
    @Always_help_when_you_can 3 года назад

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

  • @dieryarias
    @dieryarias 2 года назад

    Thank you so much

  • @hmabubakar86
    @hmabubakar86 Год назад

    Thank you so much bro ❤

  • @user-xd4bl1gd1v
    @user-xd4bl1gd1v 2 года назад

    i appreciate for you man! from russia with love!

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

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

  • @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! 🙌

  • @biancawu9123
    @biancawu9123 3 года назад +1

    SUPER HELPFUL

    • @Mizko
      @Mizko  3 года назад

      Thank you Bianca! Glad you enjoyed this ✨

  • @sepidekhaneghaei8904
    @sepidekhaneghaei8904 2 года назад

    so practical

  • @GraveRave
    @GraveRave 3 года назад +1

    Awesome!

    • @Mizko
      @Mizko  3 года назад +1

      Thank.. YOU!

  • @OthmanAlikhan
    @OthmanAlikhan 2 года назад

    Thanks for teh video =)

  • @raygan.design
    @raygan.design 3 года назад +1

    Great video man..Simple explanations

    • @Mizko
      @Mizko  3 года назад

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

    • @raygan.design
      @raygan.design 3 года назад +1

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

  • @SketchbookStudioo
    @SketchbookStudioo 2 года назад

    thanks!

  • @lmd4881
    @lmd4881 2 года назад

    complete lifesaver :)

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

  • @yunes1176
    @yunes1176 Год назад

    Mylosp just a legend really aren’t ya

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

  • @Queenbeez786
    @Queenbeez786 Год назад

    thank you soooooooooooooooooooooooooooooooooooooo much

  • @vigneshKrishnamoorthyRules
    @vigneshKrishnamoorthyRules Год назад

    perfect

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

  • @eniolade
    @eniolade 5 месяцев назад

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

  • @daisykmr2
    @daisykmr2 2 года назад

    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.

  • @nguyenchau7107
    @nguyenchau7107 Год назад

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

  • @bithagrop2539
    @bithagrop2539 Год назад

    🎉❤nice++!!

  • @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!👍

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

  • @GustavoPohlodMontanha
    @GustavoPohlodMontanha 3 месяца назад

    Boa man!

  • @3esila894
    @3esila894 Год назад

    thanks tNice tutorials really helped

  • @giancarlomanalo8624
    @giancarlomanalo8624 Год назад

    YESS

  • @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?

  • @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 8 месяцев назад

      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.

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

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

  • @echolu3349
    @echolu3349 Год назад +1

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

  • @evangill9123
    @evangill9123 Год назад

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

  • @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?

  • @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?

  • @raghothamharish2283
    @raghothamharish2283 2 года назад

    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

  • @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?

  • @InayaNanban
    @InayaNanban 2 года назад

    Why should i use scale for typography ? Please say !

  • @toyoubaldo1126
    @toyoubaldo1126 2 года назад

    The secret to good UX is having a play around!

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

  • @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 ?

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

  • @rubenjsloureiro
    @rubenjsloureiro 2 года назад +2

    Sorry to ask, where we can download the file?

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

  • @comrelaxandrepeat5061
    @comrelaxandrepeat5061 Год назад

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

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

  • @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... =(

  • @TheMrNomadus
    @TheMrNomadus Год назад

    There is a plugin in Figma called Typescales that does exactly the same thing for you but automatically.

  • @opsnax1468
    @opsnax1468 3 месяца назад

    Please reply
    I have a question, brother. Can we use font sizes in points like you used in the video? Can we use them in real projects? Also, could you please explain how we can use line height?"

  • @prajwalsharma2794
    @prajwalsharma2794 Год назад

    How many weights do you use for your typographic scale

  • @GameIsland63
    @GameIsland63 Год назад

    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.

  • @daiwatable
    @daiwatable 3 года назад

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

  • @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 👌🏼