15 rules to adjust typography like a pro (Web Design tutorial)

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

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:

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:

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.

DM me on social media:

Check out my works:

#BONT #WebDesign #TypographyRules

[ohmygoditstyrel]

I'm going to review all my drafts and apply these typo rules to see the difference. Thanks again Adrian

[DucHoang-cj]

Thank you, Adrian, I do find this video extremely helpful as a beginner in web design field. Again, many thanks from Vietnam

[TamerlanAziev]

These tips are so underrated, well done Adrian!

[neodidi]

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.

[v_malyovana]

Thank you Adrian, your videos are always very helpful and inspiring. Brilliant!

[xphstos_]

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.

[irshad]

Great tips. you made it so simple to understand

[bakeraus]

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.

[mmp]

Valiosa información como siempre! Gracias Adrían.

[LifeIExperienced]

ultra knowlegdable content. Thanks BONT

[Nevyrus]

Muchas gracias, son muy buenos consejos!

[TheWebCoder]

You being behind the plant is driving me crazy lol

[UTJK.]

I'm not completely convinced of the rule at 5:50... Maelstrom's text was unreadable at that point.

[sebastianmihaiprisacariu]

you meant the shorter the paragraph, the tighter the line height. :)

[simonstomalik]

Any more books that you would (or any of you guys) would recommend when it comes to design?

[AlexanderGeorge]

You said the longer paragraph the tighter the line height? Didn’t you mean the opposite?

[LordBoltagon]

Underpinning Golden rule! The user/reader should be able to scan over the copy with relative ease. Reduced cognitive load

[herrDOS]

3 is actually odd since you need to increase kerning for all caps.

[agustinasosa]

I came looking for copper and found gold

[sebastianhahn]

shouldn't the first point be:
"the wider the paragraph, the bigger the line height" ?