Choosing the Right Font

1. You need variety of weights - Superfamily Fonts
2. Google Fonts - Open Source and easy to load

General Facts

• Space Between Letters is known as Kerning (Labels has more kernings)

  

• Same level text when used in card is known as Eyebrow/ Kicker/ Overlines

  

• The en dash ( – ) - hold down Alt and type 0150 on the numeric keyboard ( – )

  

• The em dash ( — ) - Can be accessed by typing double hyphen key (-+-=—)

  

Catagorisation of Texts in Design System

1. UI Text
2. Labels
3. Paragraphs

These will be a part of your product Design System. Your Marketing System can be separate. The Significant difference between UI text and Paragraph is the line- height.

Components of Typography

1. Line Height - The Heading has a line height of 120%. The subtext line height is 150%. Your Developer might prefer line-height in pixels. So the right strategy is to declare your line height in pixels and have a system for calculating your line height for different font sizes. As font decreases increase the line height

   • Resource for line height- The Good line height - This is also a figma plugin

   • UI Text - You need line - height to be as tall as your text i.e. 100% because then all internal padding is explicit.

     

   • Paragraph Text - Here, you cannot have line-height at 100%, it will look very tight for long text/paragraphs. Therefore, it is better to add some basic line-height for your paragraph text style. Better to use 150% line height.

2. Letter Spacing - Space Between letter.
   • What are ems/rems? - Pixels are absolute, rems are relative. Introducing Relative Units - Relative units are not absolute like pixels. They are influenced by other factors. These can be the dimensions of your screen or even the parent element. Popular Relative Units - Percent(%), vw (viewport width), vh (viewport height), em, rem By Default in browser window 16px= 1M(em) size, we can change it and it all becomes relative.