Make font sizes responsive to browser settings

[clairesunstudio]

Ticket: https://massgov.atlassian.net/browse/DP-34926

Reasoning behind these changes:

https://docs.google.com/document/d/1gBvtaA2pV1w0BvxvFxsS-kP8UVKRtqVlaH48wRH8b3Y/edit

New font system and mapping logic:

https://docs.google.com/spreadsheets/d/1bIB_VUNGn1kgN5M-4peeuFd0ar7do2rkCSvW83_2RdQ/edit?gid=953321770#gid=953321770

What's happening here:

1. Rename the vars so that $fonts-medium represent the regular paragraph font size at 1rem, so that from the var names are more human readable
2. Map the var assignments based on the actually rendering font size in pixels (see the color coded mappings, e.g. $fonts-xsmall (13.33px) is mapped to fonts-smaller (13.5px))
3. Added a few smaller rems, to map to small font sizes that are in used by mayflower/mass.gov (highlighted in yellow) - slightly bump up the smaller font sizes and round the values in pixels
4. eliminate $fonts-11xlarge and $fonts-13xlarge, rendered values are not in use
5. Standardizing line-height and margins. Previously using inconsistent units and spacing are random, h3 and h4 have bigger margin bottom than h2. Make margins proportional to font size (shrink margins overall)

• Before: https://mayflower.digital.mass.gov/patternlab/?p=viewall-atoms-headings
• After: https://mayflower.digital.mass.gov/patternlab/b/responsive-root-em/?p=viewall-atoms-headings
• See changes: 7066bca

Before and After

https://mayflower.digital.mass.gov/patternlab/b/develop/?p=pages-Homepage
https://mayflower.digital.mass.gov/patternlab/b/responsive-root-em/?p=pages-Homepage

Backstop report: https://output.circle-artifacts.com/output/job/020cf001-e0f1-4c84-b3e0-ff2acb1998e8/artifacts/0/backstop/reports/html/index.html

To test:

• Bring this into openness and run backstop
• Confirm after the change the font size respect browser font settings
• Compare the before and after on desktop and mobile sizes
• Suggest fonts that need adjustments