My no BS guide to mastering beautiful typography in web design

แชร์
ฝัง
  • เผยแพร่เมื่อ 16 มิ.ย. 2024
  • Thanks Mobbin for sponsoring this video! Try Mobbin for free using this link:
    www.mobbin.com/?via=huy
    Hopefully you've enjoyed the video and learned a bit more about typography!
    _______________________
    ⏰ Timestamps:
    0:00 Test your knowledge on typography
    0:43 Font Family Basics
    1:43 Font Settings
    2:01 Font Weight
    2:16 Font Sizes
    2:32 Leading/Line Height
    2:52 Tracking/Letter Spacing
    3:10 Putting the concepts together
    3:52 Color Contrast
    4:46 Form Contrast
    5:31 Where to find typography inspiration
    7:01 Alignment
    8:08 Where to find quality fonts
    🔗 Resources mentioned in this video:
    typescale.com/
    www.awwwards.com/
    www.pinterest.com/
    www.fontshare.com/ (FREE)
    fonts.google.com/ (FREE)
    uncut.wtf/ (FREE)
    pangrampangram.com/ (PAID)
    swisstypefaces.com/ (PAID)
    www.atipofoundry.com/ (PAID - not mentioned but they have awesome typefaces)
    / kalypsodesigns
    _______________________
    ⭐️ Try out Figma for free - my go-to tool for web design:
    bit.ly/tryfigmanow
    🀄️ Try Tilebit for free - speed up your design with quality components:
    bit.ly/trytilebit
    🎵 I get my insane music and sound effects from Epidemic Sound - get a free 30 day trial here:
    bit.ly/epidmcsound
    _______________________
    🗨️ Join the discord community:
    / discord
    🌊 Support the Channel:
    ko-fi.com/supporthuyng
    💬 Connect with me:
    bento.me/huyng
    _______________________
    📧 Email:
    hello@huyng.xyz(for business inquiries)
    .
    .
    .
    .
    .
    .
    .
    .
    #webdesign #webdesigner #awwwards #webdevelopment #uxdesign #resources #designresources #frontend #frontenddeveloper #frontenddevelopment
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น • 56

  • @huyngxyz
    @huyngxyz  หลายเดือนก่อน +1

    Would love to hear if you guys have any more tips or tricks on achieving good typography! Let me know down below 👇

    • @Rapha_Carpio
      @Rapha_Carpio หลายเดือนก่อน

      aint have tips - you are the master here hahaha, but i got a question what about if a client has a "branding font" but i want to enhance his design adding another typography, is there a website to verify if the fonts pair together?

    • @huyngxyz
      @huyngxyz  หลายเดือนก่อน +1

      @@Rapha_Carpio I'm actually not too sure about this but you can check out fontjoy.com

  • @chanchanchanchan4638
    @chanchanchanchan4638 หลายเดือนก่อน +1

    Another banger! Congrats on the sponsorship!

    • @huyngxyz
      @huyngxyz  หลายเดือนก่อน +1

      Really appreciate it, thanks!

  • @jays
    @jays หลายเดือนก่อน +2

    huy videos are my favorite videos

  • @atyibali6630
    @atyibali6630 หลายเดือนก่อน +1

    always dropping valuable knowledge for, appreciate it alot bro

    • @huyngxyz
      @huyngxyz  หลายเดือนก่อน

      Any time!

  • @hashimjasem
    @hashimjasem หลายเดือนก่อน +1

    absolutly insane video quality, keep it up... I am confident that it will pay off my bro

    • @huyngxyz
      @huyngxyz  หลายเดือนก่อน +1

      Really appreciate it man!

  • @jananis4536
    @jananis4536 หลายเดือนก่อน +1

    your videos are always simple and elegant short videos. its so fun to learn new things. thanks for sharing with us. congrats for getting sponsor. i wish you and your channel grow more and more!!!! love from INDIA.

    • @huyngxyz
      @huyngxyz  หลายเดือนก่อน

      Thank you! 😃

  • @nafisax00
    @nafisax00 หลายเดือนก่อน +2

    Thank you! I'm just starting out my front-end dev journey and your videos are very helpful!

    • @huyngxyz
      @huyngxyz  หลายเดือนก่อน

      Glad it helped out!!

  • @yesrehovoice
    @yesrehovoice 13 วันที่ผ่านมา

    video style is very good!

  • @kietletri7413
    @kietletri7413 หลายเดือนก่อน

    Hi Huy, i watched all your videos and it helps me so much to increase my skills in Front-end, thank you so much bro !

    • @huyngxyz
      @huyngxyz  หลายเดือนก่อน

      No worries man! I'm glad to hear that!

  • @ismailechchaouny5154
    @ismailechchaouny5154 หลายเดือนก่อน

    This is helpful thank you man

  • @noodlespwn42
    @noodlespwn42 หลายเดือนก่อน

    Love your aesthetic. Keep it up!

    • @huyngxyz
      @huyngxyz  หลายเดือนก่อน

      Appreciate it : )

  • @brianruizy
    @brianruizy หลายเดือนก่อน

    Love the video style! Subbed to watch more in the future :)

    • @huyngxyz
      @huyngxyz  หลายเดือนก่อน

      Really glad to hear it, thanks man!

  • @Xooou_
    @Xooou_ หลายเดือนก่อน

    Thanks bro! 🎉❤

  • @godofwar8262
    @godofwar8262 หลายเดือนก่อน +1

    Any video on even spacing and padding

  • @dillaw7070
    @dillaw7070 หลายเดือนก่อน +1

    great video as always brother! , can you make a video adressing the 21day UI/UX challenge?

  • @asar1065
    @asar1065 หลายเดือนก่อน

    Supercool and clear guide bro. Kudos!

    • @huyngxyz
      @huyngxyz  หลายเดือนก่อน

      Glad you liked it!

  • @miyookie
    @miyookie หลายเดือนก่อน

    NEW VIDEO LETS GOOOO 🎉🎉🎉

  • @eddielee2857
    @eddielee2857 หลายเดือนก่อน +1

    what the insane high quality editing

    • @huyngxyz
      @huyngxyz  หลายเดือนก่อน

      Going insano style

  • @winternites
    @winternites หลายเดือนก่อน +1

    the real ones know that he used uncut sans for his text on the slides
    you have great taste friend :)

    • @huyngxyz
      @huyngxyz  หลายเดือนก่อน

      Haha damn you got a keen eye 👀. Thanks man 🙌

  • @arpitshrmah
    @arpitshrmah หลายเดือนก่อน

    Hey man, do a video on design feedbacks. Would love to know what do you think of my designs

  • @xences
    @xences หลายเดือนก่อน +1

    another banger that made me release it everywhere!

    • @huyngxyz
      @huyngxyz  หลายเดือนก่อน

      Hahah appreciate it!

  • @cabrita8118
    @cabrita8118 หลายเดือนก่อน +1

    lets gooo new video

    • @huyngxyz
      @huyngxyz  หลายเดือนก่อน

      Lets goooo

  • @abdurrehmanrana786
    @abdurrehmanrana786 หลายเดือนก่อน

    I would really love if you keep posting similar theory/principles videos like this. BTW your visual explanation is very good especially for beginners to understand, just like @SatoriGraphics. Keep it up 👌

    • @huyngxyz
      @huyngxyz  หลายเดือนก่อน

      Really glad to hear it, thanks a lot!

  • @DuroDP
    @DuroDP หลายเดือนก่อน

    Subscribed. I like your editing style, what do you use?

    • @huyngxyz
      @huyngxyz  หลายเดือนก่อน

      I use Adobe premiere and after effects for this one : ) but I mainly use premiere

  • @brhoom.h
    @brhoom.h หลายเดือนก่อน +1

    Great video, can you do a video about SEO 🙏

    • @huyngxyz
      @huyngxyz  หลายเดือนก่อน +1

      Noted : )

  • @JohnCanCode
    @JohnCanCode หลายเดือนก่อน

    Sick vid. What about justified alignment? Perhaps Im using that too much?

    • @huyngxyz
      @huyngxyz  หลายเดือนก่อน +1

      I would say avoid justified alignment at all costs, it might look visually balanced but it's terrible for readability since the spacing between each word is very inconsistent

    • @JohnCanCode
      @JohnCanCode หลายเดือนก่อน

      @@huyngxyz Thanks will keep that in mind. Would you still use left alignment on an article or blog post? I feel like that’s got to be the one time to use it right?

  • @ogunleyeoluwafemi7243
    @ogunleyeoluwafemi7243 หลายเดือนก่อน

    Hey man, i hope i get a response from you, really love your videos and noticed your portfolio today, it is really great work, i was wondering if you could provide source code to really understand how you did some animations done there, they are really clean, would like that currently designing my portfolio and coming across some of your animations are really nice, I look forward to your response 🙏🏾🙏🏾

  • @Noob69640
    @Noob69640 หลายเดือนก่อน

    Hi. Can you tell me what you use for web animations?

    • @huyngxyz
      @huyngxyz  หลายเดือนก่อน +1

      I use framer motion : )

    • @Noob69640
      @Noob69640 หลายเดือนก่อน

      @@huyngxyz I use react but i learnt GSAP for animation will it be good for me to switch to framer motion? i sometimes struggle using GSAP with react. i heard framer motion is best with react. Should I switch?

  • @ChampRizvi
    @ChampRizvi หลายเดือนก่อน +1

    If I do a copy of some part of your portfolio designs 😁 will you case on me ??

    • @huyngxyz
      @huyngxyz  29 วันที่ผ่านมา

      Wouldn't case on you but I'm sure copying wouldn't do you any good 👀

  • @bagwellgaming3979
    @bagwellgaming3979 22 วันที่ผ่านมา

    Bro looks like Ishan Kishan

  • @hxxzxtf
    @hxxzxtf หลายเดือนก่อน +2

    🎯 Key Takeaways for quick navigation:
    00:00 *💡 The importance of good typography in web design, evoking emotions and creating first impressions.*
    00:41 *🔤 Three essential font families: Serif (traditional, elegant), Sans-serif (clean, readable), and Monospace (for code editors).*
    01:50 *⚙️ Four basic font settings: weights, sizes, leading (line height), and letter spacing.*
    03:56 *🌈 Two types of contrast: color contrast (for readability) and size contrast (for visual hierarchy).*
    05:33 *👀 Importance of deliberate practice and seeking inspiration from award-winning designs and industry leaders.*
    06:03 *💎 Mobbin: a collection of over 300,000 real-world designs for inspiration and research.*
    07:10 *⚖️ Three types of text alignment: left (most readable), center (for short headings), and right (rarely used).*
    08:19 *🔍 Resources for finding free and premium fonts: Font Share, Google Fonts, Uncutt WTF, Typ Foundries, and Instagram.*
    Made with HARPA AI

  • @ogunleyeoluwafemi7243
    @ogunleyeoluwafemi7243 หลายเดือนก่อน

    Hey man, i hope i get a response from you, really love your videos and noticed your portfolio today, it is really great work, i was wondering if you could provide source code to really understand how you did some animations done there, they are really clean, would like that currently designing my portfolio and coming across some of your animations are really nice, I look forward to your response 🙏🏾🙏🏾