Font size

• Secondary Font size is 2px less than the primary font size
• https://bootcamp.uxdesign.cc/how-to-choose-the-right-font-sizes-85eea2023e9b
• https://uxplanet.org/16-ui-design-tips-ba2e7524d203

Desktop

• Title:
  • 96px (H1) to 20px (H6)
• Body
  • 16px
  • 14px — Secondary
• Body (Text heavy scenario)
  • 18px
  • 16px — Secondary

Mobile

• Title:
  • 20px to 16px
• Body:
  • 14px
  • 12px — Secondary

Screen Size

• Desktop: 1440 x 1024 px
• Tablet: 1024 x 768 px
• Mobile: 360 x 640 px (Android)

Typeface

• Set of related fonts with a similar style or aesthetic
• It’s safest to use a single sans serif typeface for interface design
• example: Helvetica
• Helvetica fonts:
  • Helvetica bold
  • Helvetica regular

sans-serif vs serif

• serif gives an older and dated look, avoid using them
• sans-serif are modern and easier to read
• Serif:
  • TImes New Roman

• Times New Roman
• Calibri
• Garamond
• Futura
• Courier
• Arial
• Helvetica
• Monospace:
  • Courier New

Font weight

• Examples:
  • Thin
  • Light
  • Regular
  • Semi-bold
  • Bold
• Use Regular and Bold font weight only

Line Height

• For long body text (lot of text in paragraph)
  • Use 1.5 (150%) to 2.0 (200%) line height