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 - วิทยาศาสตร์และเทคโนโลยี
Would love to hear if you guys have any more tips or tricks on achieving good typography! Let me know down below 👇
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?
@@Rapha_Carpio I'm actually not too sure about this but you can check out fontjoy.com
Another banger! Congrats on the sponsorship!
Really appreciate it, thanks!
huy videos are my favorite videos
always dropping valuable knowledge for, appreciate it alot bro
Any time!
absolutly insane video quality, keep it up... I am confident that it will pay off my bro
Really appreciate it man!
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.
Thank you! 😃
Thank you! I'm just starting out my front-end dev journey and your videos are very helpful!
Glad it helped out!!
video style is very good!
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 !
No worries man! I'm glad to hear that!
This is helpful thank you man
Love your aesthetic. Keep it up!
Appreciate it : )
Love the video style! Subbed to watch more in the future :)
Really glad to hear it, thanks man!
Thanks bro! 🎉❤
Any video on even spacing and padding
great video as always brother! , can you make a video adressing the 21day UI/UX challenge?
Supercool and clear guide bro. Kudos!
Glad you liked it!
NEW VIDEO LETS GOOOO 🎉🎉🎉
what the insane high quality editing
Going insano style
the real ones know that he used uncut sans for his text on the slides
you have great taste friend :)
Haha damn you got a keen eye 👀. Thanks man 🙌
Hey man, do a video on design feedbacks. Would love to know what do you think of my designs
another banger that made me release it everywhere!
Hahah appreciate it!
lets gooo new video
Lets goooo
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 👌
Really glad to hear it, thanks a lot!
Subscribed. I like your editing style, what do you use?
I use Adobe premiere and after effects for this one : ) but I mainly use premiere
Great video, can you do a video about SEO 🙏
Noted : )
Sick vid. What about justified alignment? Perhaps Im using that too much?
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
@@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?
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 🙏🏾🙏🏾
Hi. Can you tell me what you use for web animations?
I use framer motion : )
@@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?
If I do a copy of some part of your portfolio designs 😁 will you case on me ??
Wouldn't case on you but I'm sure copying wouldn't do you any good 👀
Bro looks like Ishan Kishan
🎯 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
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 🙏🏾🙏🏾