Typographic Scales in Web Design & UI Design

Поделиться
HTML-код
  • Опубликовано: 18 окт 2024

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

  • @soml_nie
    @soml_nie 3 года назад +11

    I love how short and concise your videos are

  • @kailikameoka4915
    @kailikameoka4915 4 года назад +23

    I’ve always wondered how to decide don’t sizes. This really clears things up. Thnx

    • @JesseShowalter
      @JesseShowalter  4 года назад +4

      So stoked I could help you out, Kaili! 🤘

  • @Natali-gl4tr
    @Natali-gl4tr 10 месяцев назад +3

    Omg!Thank you for this! Very useful. The way you explain it is never boring to listen! You are a great teacher!

  • @justentertainment5846
    @justentertainment5846 3 года назад +3

    Man!! U made my day. I was just searching for exactly this one. And I found u at the very beginning. And u made it, Man!! I am so glad. Thank u so much!!! :)

  • @imthemachelper
    @imthemachelper 4 года назад +2

    This is such a good idea for a video. I’m slowly trying to understand web design, and turn my designs into actual websites with HTML and CSS

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

    Man!
    You are massively underrated

  • @MoritzFischer
    @MoritzFischer 4 года назад +6

    Love this kind of videos! Very useful and practical for a growing designer like me. You should do a UX/UI course!

  • @ErlichMaramot
    @ErlichMaramot 3 года назад +4

    I love this kind of tutorial! always on point! thank you for this!

  • @AdamLeis
    @AdamLeis 4 года назад +1

    Excellent video! Gotta love the simple tips. Also, forgive the pedantic side note, but you "multiply" numbers, you don't "times" them. You're awesome. Great video😊

  • @carlosbenitez6438
    @carlosbenitez6438 4 года назад +8

    Awesome video but do agree with the rest of the group here. Not sure how you would apply the golden ratio that in essence does not give you a clean number to work perfectly on your 8pt grid vs x2 16,32,64 etc. Would you mind at some point helping us clear up this one detail? It would be super helpful for us all. Thank you for sharing all your tips and insights!

    • @stedbenj
      @stedbenj 4 года назад +6

      There are quite a few of us replying to another comment just like yours. The two videos seem incompatible.

  • @rofinugrahaputra6757
    @rofinugrahaputra6757 4 года назад +2

    Dude... This is very very usefull for beginner like i'am... Thank you so much Jesse.

    • @JesseShowalter
      @JesseShowalter  4 года назад

      I’m so so glad I was able to help out!!

  • @caca53444
    @caca53444 4 года назад +1

    thanks very much, much needed basic design principles

    • @JesseShowalter
      @JesseShowalter  4 года назад

      So stoked for you, Camille! Happy to help!

  • @SirDiogyProductions
    @SirDiogyProductions 4 года назад +2

    And because of this, my text styles are now: (1) normal text, (2) sub-headline, (3) bigger headline, and you've guessed it, (5) massive-headline

  • @onyedikachiibejih9599
    @onyedikachiibejih9599 3 года назад +5

    What's the best type scale to use? Golden Ratio type scale, Augmented Fourth, Major Second type scale etc. How do you decide which one is best?

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

    This was super helpful! Very clear and to the point.

  • @Favoxhille
    @Favoxhille 4 года назад +24

    how can you use a baseline grid and typographic scales together? if your grid is 8px squares then the text that you multiply with the golden ratio is not gonna stack up on the grid, isn't that right?

    • @JesseShowalter
      @JesseShowalter  4 года назад

      Watch the baseline grid video, it will explain

    • @danielsolbergdesigns
      @danielsolbergdesigns 4 года назад +19

      Jesse Showalter Hey Jesse, I’m wondering the same thing as Favoxhille. I just rewatched the Baseline Grid video and you only stuck with font sizes and line heights that are divisible by 8 for that entire video, so each of your examples there worked perfectly with the 8px grid. Favoxhille and myself are wondering - If you’re using an 8px grid, but you multiply font sizes by 1.618 like you do in this video, the font sizes are no longer perfectly divisible by 8 and therefore, no longer fall perfectly on the baseline grid. So.... in that case, do you stick with aligning things perfectly to the grid and forfeit using the golden ratio as a multiplier, or do you ignore the grid in favor of multiplying font sizes by the golden ratio? Thanks in advance, I’m a new subscriber and love your videos!

    • @chienandaluz
      @chienandaluz 4 года назад

      @@danielsolbergdesigns Same question here. Maybe what he means is that we should align the last line of every text box to the 8pt grid and keep the flow with the other elements. But yes, is not going to be perfect.

    • @Cyrigar
      @Cyrigar 4 года назад +2

      @@chienandaluz What I usually do is double my font sizes - so if the body size is 16px, a subhead would be 32 and a main heading would be 64 - that way you stay contained within the baseline grid size you're using, and give your type a lot of contrast between different headings

    • @vochomovil2
      @vochomovil2 4 года назад

      same question here!

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

    Just what i needed, thanks for the great video!

  • @johnnygarces2216
    @johnnygarces2216 4 года назад +6

    thanks for the video! just a question- if you're going to pair the typescale to a baseline grid, shouldn't the line-height be a factor of the baseline grid and not the typescale ratio? keep em coming!

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

    clean and sophisticated.

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

    I wanna thank all those last views for bringing this on the top of search result.

  • @corinneoconner711
    @corinneoconner711 4 года назад +2

    Thanks, dude. So simple, yes so very helpful.

  • @davidnagy1046
    @davidnagy1046 4 года назад +1

    great video! i was using type-scale dot com and the font scale figma plugin before this haha

  • @tomasvylicil1055
    @tomasvylicil1055 4 года назад +2

    another great one, Jesse. Thank you :-)

  • @saugattt
    @saugattt 4 года назад +1

    Hey Jesse. Great content.
    I had a question. Do you suggest going with baseline grid or going with the golden ratio?
    Because I realised when I'm using golden ratio, most of the times the line spacing do not go with the grid. What do you recommend for creating consistency across my designs?
    Thank you for taking your time to create these videos. These are helping me a lot.

    • @itsghous
      @itsghous 4 года назад +5

      use both
      eg make font size 18px and use baseline grid of 4px
      now u can give a line height of 24 px to a 18px font size
      and when u scale that using golden ratio
      just make sure line height for that scaled font is a mulitple of 4

  • @shubham5792
    @shubham5792 4 года назад +2

    Like always loved your video and learned a lot.

  • @frsm_
    @frsm_ 4 года назад +1

    Simple and Super effective!

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

    Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you !!

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

    Amazing video!! Just a little question, why figma desktop size is 1440x1024 not 1980x1080??

  • @dannysvibe6404
    @dannysvibe6404 4 года назад

    Hi Jesse, I’m about to buy a new monitor for UI designing. I had a problem with my previous monitor (colors..). What monitor do you use? Which one would you recommend?

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

    woaww this is awesome!!!

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

    Great video. one question tho… so if I’m using a type scale of 1.33 that means I should apply that same scale to the line height? for instance body 1rem and line height 1.33?

  • @thinhtran-hq3or
    @thinhtran-hq3or 4 года назад +1

    Hi Jesse, did you take the number 1.618 from the Golden Ratio? i just wanna tell you Golden ratio is a myth. But your scales guide is pretty helpful.

    • @JesseShowalter
      @JesseShowalter  4 года назад

      Hey, it is from the golden ratio- a theory used in art and math for centuries. Happy to help.

  • @bl_int
    @bl_int 4 года назад +1

    awesome, thanks

  • @Agung-yk7hr
    @Agung-yk7hr 8 месяцев назад

    thank you very much

  • @carlitosvodka
    @carlitosvodka 4 года назад +2

    Amazing!

  • @maneeshrockx667
    @maneeshrockx667 4 года назад

    Thankyou ,I'm a big fan of your teaching it helps me alot,a request can you please name the song you have used in your design and code series 2yrs ago please...

  • @saharshy
    @saharshy 4 года назад

    Was this recorded with Loom? The facecam looks very similar.

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

    LEGEND !!

  • @imransherwany
    @imransherwany День назад

    Why did you get results in point e.g 29.12 font size?

  • @MOHAMEDHASSAN-fk9jv
    @MOHAMEDHASSAN-fk9jv 3 года назад

    Fantastic ...👍

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

    awesome !!

  • @JorgeSorianoA
    @JorgeSorianoA 4 года назад +2

    Wow great!!!!

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

    nice video buddy

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

    gold

  • @usamaali9330
    @usamaali9330 4 года назад +1

    Awesome 😀

  • @alefsdev
    @alefsdev 4 года назад +1

    Good job!! I’ve a question.. I’m an iOS/ fullstack developer, how can i improve my graphic design skill?

    • @JesseShowalter
      @JesseShowalter  4 года назад +4

      Take a course, watch RUclips videos, read a book, most important get busy and make some stuff 👍🏼

    • @alefsdev
      @alefsdev 4 года назад

      Jesse Showalter thanksss!!

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

    bro permission to ask, is the system design for web and apps different

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

    Hi Jesse can you please mention the font-weight that you used?

  • @peterwyattmiddleton
    @peterwyattmiddleton 4 года назад

    From what I have read and youtubed the LH ratio changes depending on the darkness and lightness of the body type as well (total contrast). Can you confirm if its lighter that has more line height than the equivalent type face in a darker version? I have heard a range of 1.3-1.7

  • @groovebird812
    @groovebird812 4 года назад +2

    I have never heard to set a pixel size as a float value such as 47.12px. I think this is not working

    • @maria-lm8ze
      @maria-lm8ze 4 года назад

      Maybe works if it's rem or %?
      I also wonder if just using the Fibonacci numbers would work, so you keep to a set of choices

  • @walkaway.
    @walkaway. 3 года назад

    Can you please do a video using the golden ratio making a instagram post? thank you!

  • @whimsical.me1
    @whimsical.me1 Год назад

    but how to find the base scale

  • @yomalgunarathna
    @yomalgunarathna 4 года назад +2

    More figma videos please 😍

  • @אינהרויזמןלוין
    @אינהרויזמןלוין 3 года назад

    🏆

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

    What is consistency

  • @chrissre7935
    @chrissre7935 4 года назад

    Not a big fan of the Golden ratio as it is more about proportion not a particular number as many studies show.

  • @raven1552
    @raven1552 4 года назад

    Where the gird link ??

  • @kavr
    @kavr 4 года назад +1

    What's your Favorite Font and why :)

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

    Today A partner tell us about this subjet..and i dont get it...

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

    "...times it by..." or as normal people call ot multiply...

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

    Golden ratio here again?