Week 4 - Typography & Icons

Objective:

Objectives

Create a comprehensive typography system for a hypothetical app or website using Figma. This system should include a range of text styles for different elements of the UI, ensuring readability, consistency, and visual hierarchy.

Instructions

1. Typeface Selection:: Choose at least two typefaces: one for headings and one for body text. Use a pairing tool to ensure your Typefaces work harmoniously.

2. Create a Typography System in Figma::

   • Create a new page in your Figma file titled "Typography"
   • Follow a tutorial to guide you through scales and create a typography system with 6 - 10 styles for heading, body, labels or other elements
   • Round your scale values to avoid having decimals, example for 23.4px size, round it to 24px so that all your font sizes are divisible by 4.
   • Keep in mind, the scale is defining primitive sizes, it is up to you what you use them semantically for. For example, you may assign a Display 48px, and an H1 40px value. Don't be limited by the scale, just use it for guidance.
   • Your Typography can either leverage styles or variables

3. Create an Icon library in Figma:

   • Create a new page in your Figma file titled "Icons"
   • Follow a tutorial to guide you through getting and using an icon library. You don't have to create your icons, but instead leverage an existing library through a community file or plugin.
   • Make sure your icons can be used as assets from your file

Submission

• Figma Link in Brightspace assignment page: A link to your Figma file containing typography and icon pages.