ADAPT-3196: New modular typography system and add type 7 to 9

[yvonnetangsu]

READY FOR REVIEW

Summary

• Change to current modular typography system, so we no longer need a arbitrary scale factor of 0.85 for the larger font steps.
• More proportional font sizes across all breakpoints.
• Using new system as I proposed here: https://docs.google.com/spreadsheets/d/1oq2QcUbHEM_H01GoXlJpza90VsMs09MGLsmeZK3BH1k/edit?usp=sharing

For XS to SM breakpoints, use modular scale 1.15 For MD breakpoint, use modular scale 1.2 For LG breakpoint and up, use modular scale 1.25 (same as before)

Letter spacing is tweaked using the new formula where: For type-1, letter spacing is -0.01em For each step up, it's an extra -0.002em added on top of -0.01em

Needed By (Date)

• When does this need to be merged by?

Urgency

• How critical is this PR?

Steps to Test

1. Look at the for loop code that generates the modular typography steps called out below
2. Look at the generated dist css
3. Look at how it's being used on the SAA homesite dev site here and see the results https://github.com/SU-SWS/saa_alumni/pull/213

Affected Projects or Products

• Does this PR impact any particular projects, products, or modules?

Associated Issues and/or People

• JIRA ticket
• Other PRs
• Any other contextual information that might be helpful (e.g., description of a bug that this PR fixes, new functionality that it adds, etc.)
• Anyone who should be notified? (@mention them here)

See Also

• PR Checklist

[yvonnetangsu]

@sherakama tagging you for an initial sanity check. I pulled this branch in for SAA Homesite/TS, and seems to work well https://github.com/SU-SWS/saa_alumni/pull/213

[yvonnetangsu]

@mattanglin @rebeccahongsf I have asked @sherakama to take an initial look at this and it looks like it's a go. This will have some impact on existing sites if they use this updated system, so tagging you both to keep you in the loop 😃 Please take a look at the comment on the code block above for the original proposal.

I have a test branch on the SAA Homesite repo to use this branch. https://github.com/SU-SWS/saa_alumni/pull/213

The main purpose of this is to make font size transition smoother and more proportional across breakpoints, and not to introduce any arbitrary scale factors to manually scale down large font steps on mobile. Eg, under the old system, we need this to finetune a large heading since simply using su-type-5 doesn't scale it down enough for mobile and tablet: su-text-m3 md:su-text-m4 xl:su-text-m5 New system, this works fine: su-type-5