Typography in UX/UI Design – The Complete Designer Guide (+ Figma Typescale File)

In this class, you'll learn everything about how typography works online. I will cover all the basics from what web typopgraphy is and where to fonts as well as an in-depth understanding of design & technical decision-making when it comes to typography in UX/UI Design.

If you are switching over from graphic design or already designing online but never quite understood what sizes you should use why there is this box around your text and what on earth happens on different screen sizes, then this the course for you. 

Online typography is one of the crucial elements of your Design and the place where things tend to get wrong if you don't have your basics right. So to make you a pro will dive into: 

• Typefaces & Fonts, and what's the difference?
• Serif, Sans Serif & Superfamilies
• Where to find typefaces? 
• How many fonts do you need in your UI Design?
• Setting up a type scale. I will show you two different approaches to get the font size right. 
• Why we use rem and not px. Crucial for accessible UI Design! 
• Font weight, line height, and line length. The little details that will make your Webdesign shine.
• Contrast, and why you are legally required to get this right.
• Responsive typography, this is where the magic happens! 

You can create your own typography scale alongside that you can re-use for all of your future projects and save yourself a lot of time! 

© moonlearning.io with moon learning

• Intro
• Welcome
• Course Material
• Typefaces & Fonts
• Serif, Sans Serif & Superfamilies
• Where to Find Fonts
• How Many Typefaces
• Setting Up a Typescale
• Why REM and Not PX
• Different Scaling Systems for Your Typescale
• Font Weight
• Demystifying Line Height
• White Space Super Power
• Optimal Line Length
• Contrast in Typography
• Responsive Typography Intro
• Responsive Typography: Single Scale Approach
• Responsive Typography: Scaling the Root Size
• Responsive Typography: Truly Fluid Approach
• Responsive Typography: Summary
• Thank You