Implement Design system heading typography in the code base

[Sihemgourou]

Overview

We need to implement the headings part of the design system as classes in the code base so that our heading sizes are no longer attached to h1/h2/h3 tags etc and can no longer negatively affect the accessibility/hierarchy of the web pages for people using screen readers

Action Items

• Go to the Figma Design System page Typography section on the top row
• Read the Start Here if you do not know about design systems (*Danielle note: sorry, the developer summary isn't there yet! But the designer one still explains the basics)
• Find the headings (from Title1 to Title6 ) in the figma link (See 1.Style & Rules => Typography)
• Add new classes Title1 through Title6 with only the size properties (not the other properties like typeface, line height etc. at this time because that may be automatically applied to all typography on the site elsewhere) into the code base in the appropriate scss file (the classes will be implemented in headings throughout the site in a future issue in collaboration with design, after this step is finished)

Resources/Instructions

Figma

[github-actions]

@Zak234 Please add update

1. Progress
2. Blockers
3. Availability
4. ETA

[Sihemgourou]

@Zak234 Please add uptades on this issue before taking another one (I unassigned you from this one but Please feel free to take it back once you finish working on this issue.

[edeneault]

Question/clarification: Are these new typography classes meant to only affect the sizes of the "toolkit" page? or should they be set-up to be applied "site wide"?