9 UI/UX Typography Laws EVERY UI/UX Designer MUST KNOW
8.4K views · 2026-06-20
UI Design
Typography is one of the most important skills in UI/UX design. The difference between a design that feels professional and one that feels amateur usually comes down to hierarchy, spacing, readability, and how information is structured.
In this video, I’ll break down 9 essential typography rules backed by design psychology and real-world product design principles. You'll learn how hierarchy influences attention, why spacing affects comprehension, how line height and line length improve readability, why contrast matters for accessibility, and how to create typography systems that feel intentional and trustworthy.
If you want your interfaces, websites, landing pages, and products to feel clearer, more professional, and easier to use, watch this video till the end.
CHAPTERS:
00:00 Intro
00:39 Hierarchy
02:57 Spacing
04:03 Line Height
05:48 Chunking
07:09 Serial Positioning Effect
08:00 Font Choice
09:47 Line Length
10:53 Alignment
12:19 Contrast
13:32 Conclusion
Join my community: https://nas.io/sapta
Join my Instagram broadcast channel to never miss an update: https://ig.me/j/AbadG67M--mvwepf/
Get on a call with me: https://topmate.io/sapta
Buy me a coffee: https://www.buymeacoffee.com/saptarshipr
-----------------------------------------------
😃 ABOUT ME
This is Saptarshi (a.k.a. Sapta), an engineer turned self-taught Product Designer based out of Bangalore, India. I have worked with some of the very well known startups of India and learned anything and everything that is needed to create amazing experiences for the users. I'm also an active speaker, teacher and community builder, and have delivered over 60 talks, workshops and webinars on design. In this channel, I post videos with tips, strategies, tutorials and general gyaan to scale your career in Design. If you are into it, you may want to subscribe and hit the bell icon to that you don't miss out :)
-----------------------------------------------
📲 SOCIALS
Instagram: https://www.instagram.com/saptarshiux/
Twitter: https://twitter.com/saptarshipr
Dribbble: https://dribbble.com/saptarshipr
LinkedIn: https://www.linkedin.com/in/saptarshipr/
Medium: https://medium.com/@saptarshipr
-----------------------------------------------
💻 📷 🎤 MY GEAR
My Desk: https://bengaluru.featherlitestore.com/product/motorized-height-adjustable-table/
Sony A7iv: https://amzn.to/3KQZ0LM (Primary camera)
Samyang 24-70mm F2.8 lens: https://amzn.to/3qDYHx0
Sony a6300: https://amzn.to/3gIx0v1 (Secondary Camera)
Sigma 16mm F1.4 lens: https://amzn.to/38DFPRR
Sony 50mm F1.8 lens: https://amzn.to/3rufcaB
Samson G-Track Pro condenser mic: https://amzn.to/37Rixsw
Rode Wireless Go 2 : https://amzn.to/3KQXBU0
Boya Lavalier Mic: https://amzn.to/2M0MZI7
Godox SL60w light : https://amzn.to/3HgSU3O
Godox SB-UE 80cm softbox : https://amzn.to/3GdNq8h
DIGITEK DTR 500 BH (60 Inch) Tripod: https://amzn.to/39d1m48
-----------------------------------------------
🎶 MUSIC
The jingles and the background score is composed by Sargam Prakash, an awesome designer and musician. Do check out his channel.
Sargam Prakash: https://www.youtube.com/user/sargampr
-----------------------------------------------
🌟 TAGS
design principles,graphic design principles,ui ux laws,ui ux typography,visual hierarchy,typography,typography rules,typography tutorial,how to choose fonts,ui typography,ui design,ux design,ui ux design,visual hierarchy in ui design,design psychology,product design,figma,figma tutorial for beginners,web design,website design,font pairing,ui design tips,ui ux design tips,design system,learn ui ux design,saptarshi prakash,become a ui ux designer
-----------------------------------------------
🌟 HASHTAGS
#uiux #graphicdesign #font
In this video, I’ll break down 9 essential typography rules backed by design psychology and real-world product design principles. You'll learn how hierarchy influences attention, why spacing affects comprehension, how line height and line length improve readability, why contrast matters for accessibility, and how to create typography systems that feel intentional and trustworthy.
If you want your interfaces, websites, landing pages, and products to feel clearer, more professional, and easier to use, watch this video till the end.
CHAPTERS:
00:00 Intro
00:39 Hierarchy
02:57 Spacing
04:03 Line Height
05:48 Chunking
07:09 Serial Positioning Effect
08:00 Font Choice
09:47 Line Length
10:53 Alignment
12:19 Contrast
13:32 Conclusion
Join my community: https://nas.io/sapta
Join my Instagram broadcast channel to never miss an update: https://ig.me/j/AbadG67M--mvwepf/
Get on a call with me: https://topmate.io/sapta
Buy me a coffee: https://www.buymeacoffee.com/saptarshipr
-----------------------------------------------
😃 ABOUT ME
This is Saptarshi (a.k.a. Sapta), an engineer turned self-taught Product Designer based out of Bangalore, India. I have worked with some of the very well known startups of India and learned anything and everything that is needed to create amazing experiences for the users. I'm also an active speaker, teacher and community builder, and have delivered over 60 talks, workshops and webinars on design. In this channel, I post videos with tips, strategies, tutorials and general gyaan to scale your career in Design. If you are into it, you may want to subscribe and hit the bell icon to that you don't miss out :)
-----------------------------------------------
📲 SOCIALS
Instagram: https://www.instagram.com/saptarshiux/
Twitter: https://twitter.com/saptarshipr
Dribbble: https://dribbble.com/saptarshipr
LinkedIn: https://www.linkedin.com/in/saptarshipr/
Medium: https://medium.com/@saptarshipr
-----------------------------------------------
💻 📷 🎤 MY GEAR
My Desk: https://bengaluru.featherlitestore.com/product/motorized-height-adjustable-table/
Sony A7iv: https://amzn.to/3KQZ0LM (Primary camera)
Samyang 24-70mm F2.8 lens: https://amzn.to/3qDYHx0
Sony a6300: https://amzn.to/3gIx0v1 (Secondary Camera)
Sigma 16mm F1.4 lens: https://amzn.to/38DFPRR
Sony 50mm F1.8 lens: https://amzn.to/3rufcaB
Samson G-Track Pro condenser mic: https://amzn.to/37Rixsw
Rode Wireless Go 2 : https://amzn.to/3KQXBU0
Boya Lavalier Mic: https://amzn.to/2M0MZI7
Godox SL60w light : https://amzn.to/3HgSU3O
Godox SB-UE 80cm softbox : https://amzn.to/3GdNq8h
DIGITEK DTR 500 BH (60 Inch) Tripod: https://amzn.to/39d1m48
-----------------------------------------------
🎶 MUSIC
The jingles and the background score is composed by Sargam Prakash, an awesome designer and musician. Do check out his channel.
Sargam Prakash: https://www.youtube.com/user/sargampr
-----------------------------------------------
🌟 TAGS
design principles,graphic design principles,ui ux laws,ui ux typography,visual hierarchy,typography,typography rules,typography tutorial,how to choose fonts,ui typography,ui design,ux design,ui ux design,visual hierarchy in ui design,design psychology,product design,figma,figma tutorial for beginners,web design,website design,font pairing,ui design tips,ui ux design tips,design system,learn ui ux design,saptarshi prakash,become a ui ux designer
-----------------------------------------------
🌟 HASHTAGS
#uiux #graphicdesign #font