15 rules to adjust typography like a pro (Web Design tutorial)
Vložit
- čas přidán 25. 07. 2024
- If you are a Freelance Web Designer, spending time learning how to adjust your type is one of the most overlooked and also fundamental aspects in your growth if you want to take your design skills to the next level. Stay with me as I explain the 15 rules I use in every project so you can refine your eye and learn how to improve your type setting skills, down the small details. We will cover things like letter spacing, line-height, rags, orphans, widows, special characters and more. Happy learning!
ERRATA: in rule 1, I meant "the longer the paragraph, the more loose the line height".
______
TIME STAMPS
0:00 Intro
0:55 Rule 1: line height & paragraph width
2:22 Rule 2: line length in paragraphs
3:46 Rule 3: letter spacing & size
4:33 Rule 4: letter spacing & font weight
6:03 Rule 5: letter spacing & different typefaces
6:45 Rule 6: letter spacing overlap
7:45 Rule 7: line height with ascendants & descendants
9:28 Rule 8: type adjustment & Gestalt laws of perception
10:51 Rule 9: rags in paragraphs
11:23 Rule 10: rags in titles
11:58 Rule 11: rags in text lockups
13:22 Rule 12: type setting & Art Direction / Visual Identity Design
14:27 Rule 13, Type crimes: widows & orphans
15:09 Rule 14, Type crimes: Stretching or shrinking type
15:16 Rule 15, Type crimes: incorrect character usage
• Web Design Tutorials
READY TO JOIN THE BONT CLUB?
If you are ready to peak your Web Design skills & learn how to monetize them so you can have more freedom to do the things that you love, then click the link below to apply to my signature mentorship program, the BONT Club. If you’re a fit, I will schedule a call with you so we can chat and decide if my program is the right fit for you:
Apply here: bit.ly/4bbhRN8
FREE GOLDEN CANON GRID COURSE
Download the Golden Canon grid and join thousands of students in learning 5 secrets to design beautiful websites with the Golden Canon Grid with this free course:
bit.ly/3OhrFLM
SUBSCRIBE TO MY NEWSLETTER
Join my newsletter to stay up to get tips and tricks on your email, stay up to date with my latest videos, and be the first to know about new free resources I put out.
bit.ly/bont-newsletter
TWEET THIS VIDEO: ctt.ac/lnVBL
DM me on social media:
• Instagram: / hellobont
• LinkedIn: / adriansomoza
Check out my works:
• Behance: www.behance.net/adriansomoza/
• Dribbble: dribbble.com/adriansomoza/
CZcams Video URL: • 15 rules to adjust typ...
#BONT #WebDesign #TypographyRules
I'm going to review all my drafts and apply these typo rules to see the difference. Thanks again Adrian
I always think about accessibility when using all these fancy typefaces, I do love the design of them but careful cutting out customers or people being able to access your website.
Valiosa información como siempre! Gracias Adrían.
Short and on point ❤
Great tips. you made it so simple to understand
Muchas gracias, son muy buenos consejos!
Thank you Adrian, your videos are always very helpful and inspiring. Brilliant!
Glad to hear, my pleasure!
You being behind the plant is driving me crazy lol
Thank you, Adrian, I do find this video extremely helpful as a beginner in web design field. Again, many thanks from Vietnam
Glad it was helpful!
These tips are so underrated, well done Adrian!
Thanks a ton bro! Hope you're doing well :)
Thanks a lot Adrian..
Your contents are truly a gem.. Thanks a lot.. I learnt a whole lot from this single video.. I always learn from your videos.
Happy to hear that man!
This is very helpful, thank you
So glad!
Excellent video!
Regarding rags, it's been a while since their release and they work fine as progressive enchancement, there is a CSS property called text-wrap and now has two new options, balance and pretty.
Both of them are dealing with orphans and widows but use them with caution.
They are pretty expensive in performance. Use them with caution and only when it's really needed.
That's great to know, thanks for sharing!
Thank you ☀️
You’re welcome 😊
Haha, perfect, thank you
Thanks!❤
Welcome!
Greatest infatuation and admiration 😃
haha thanks man, glad you liked the video!
Underpinning Golden rule! The user/reader should be able to scan over the copy with relative ease. Reduced cognitive load
Any more books that you would (or any of you guys) would recommend when it comes to design?
I have a post on my Instagram account with my top 5, but maybe I can do a video about that :) I'll note it down.
you meant the shorter the paragraph, the tighter the line height. :)
You said the longer paragraph the tighter the line height? Didn’t you mean the opposite?
Great catch! Wow haha you're right. The longer the paragraph, the more loose the line height.
shouldn't the first point be:
"the wider the paragraph, the bigger the line height" ?
Yes I was confused because he contradicted his point with that statement
Yeah, it's clarified in the description!