Formation Global Updates: Base font-size change from 10px to 16px

[jamigibbs]

Summary

This is a collaborative PR by the @department-of-veterans-affairs/platform-design-system-fe team

The global base font-size is being changed from 10px to 16px. This is to align VA.gov with USWDS standards. There should be no visual changes observed from this update.

Changes incorporated into this PR:

• Base font-size change in @department-of-veterans-affairs/formation as well as font adjustments to base css classes and typography.
• Font-size, spacing, and sizing adjustments and DST components (@department-of-veterans-affairs/component-library)
• Font-size, spacing, and typography adjustment in css-library (@department-of-veterans-affairs/css-library)
• Cursory adjustments found through local testing to vets-website, content-build, and vagov-content

**Because of the global nature of these changes we anticipate that teams will need to check their applications. These changes will affect any rem values used in font-size, spacing, and sizing. Jami Gibbs has developed a tool to determine equivalent rem values here: https://jamigibbs.github.io/rem-to-rem/

Additional Related PR

Content Build

We are aware that there are a few global elements that are displaying larger than intended in this PR. The reason is that there is a separate Content Build PR that will address those changes.

For example, we are aware of the Feedback button displaying larger than it should. There is no need to comment on that in this PR.

Related issue(s)

• Formation Deprecation - Step 2 - Discovery: Migrate DST playground applications base font-size vets-design-system-documentation#2223
• Formation Deprecation - Typography base size migration QA Formation vets-design-system-documentation#2494
• Formation Deprecation - Typography base size migration QA vets-website, content-build and vagov-content vets-design-system-documentation#2525
• Formation Deprecation - Typography base size migration QA component-library vets-design-system-documentation#2566
• Typography Step 1 Completion: Merge component-library and vets-website PRs vets-design-system-documentation#2681

Related app specific issues

• Typography - Update Application REM Values - Appeals 10182 and Appeals/shared vets-design-system-documentation#2699
• Typography - Update Application REM Values - Appeals 995, 996 vets-design-system-documentation#2698
• Typography - Update Application REM Values - veteran-id-card and ivc-champva inline styles vets-design-system-documentation#2725
• Typography - Update Application REM Values - vaos and verify-your-enrollment vets-design-system-documentation#2724
• Typography - Update Application REM Values - simple-forms/mock-simple-forms-patterns-v3 and simple-forms/shared vets-design-system-documentation#2723
• Typography - Update Application REM Values - simple-forms/26-4555 and 40-247 vets-design-system-documentation#2722
• Typography - Update Application REM Values - simple-forms/21-0845 and 21-10210 vets-design-system-documentation#2721
• Typography - Update Application REM Values - simple-forms/20-10206 and 20-10207 vets-design-system-documentation#2720
• Typography - Update Application REM Values - representative-search and search vets-design-system-documentation#2719
• Typography - Update Application REM Values - proxy-rewrite and public-outreach-materials vets-design-system-documentation#2718
• Typography - Update Application REM Values - personalization/view-dependents and pre-need-integration vets-design-system-documentation#2717
• Typography - Update Application REM Values - personalization/dashboard and personalization/profile vets-design-system-documentation#2716
• Typography - Update Application REM Values - my-education-benefits and pre-need vets-design-system-documentation#2715
• Typography - Update Application REM Values - my-education-benefits and pre-need vets-design-system-documentation#2714
• Typography - Update Application REM Values - mhv, mhv-medical-records, and mhv-secure-messaging vets-design-system-documentation#2713
• Typography - Update Application REM Values - health-care-supply-reordering and letters vets-design-system-documentation#2712
• Typography - Update Application REM Values - fry-dea and gi vets-design-system-documentation#2711
• Typography - Update Application REM Values - financial-status-report and find-va-forms vets-design-system-documentation#2710
• Typography - Update Application REM Values - enrollment-verification and ezr vets-design-system-documentation#2709
• Typography - Update Application REM Values - edu-benefits/5490, edu-benefits/10203, and edu-benefits/sass/edu-benefits.scss vets-design-system-documentation#2708
• Typography - Update Application REM Values - discharge-wizard and education-letters vets-design-system-documentation#2707
• Typography - Update Application REM Values - disability-benefits/686c-674 and disability-benefits/2346 vets-design-system-documentation#2705
• Typography - Update Application REM Values - disability-benefits/all-claims vets-design-system-documentation#2706
• Typography - Update Application REM Values - dhp-connected-devices and discharge-wizard vets-design-system-documentation#2704
• Typography - Update Application REM Values - check-in and claims-status vets-design-system-documentation#2703
• Typography - Update Application REM Values - burials-v2 and caregivers vets-design-system-documentation#2702
• Typography - Update Application REM Values -auth and avs vets-design-system-documentation#2701
• Typography - Update Application REM Values - ask-a-question and ask-va vets-design-system-documentation#2700
• Typography - Update Application REM Values - Appeals 10182 and Appeals/shared vets-design-system-documentation#2699
• Typography - Update Application REM Values - Appeals 995, 996 vets-design-system-documentation#2698

Testing done

Local testing has been done on un-authenticated pages. Further testing will be done through the review instance. Individual teams are expected to QA their application.

What areas of the site does it impact?

This will impact all areas of the site where rem values are used.

Acceptance criteria

Quality Assurance & Testing

• I fixed|updated|added unit tests and integration tests for each feature (if applicable).
• No sensitive information (i.e. PII/credentials/internal URLs/etc.) is captured in logging, hardcoded, or specs
• Linting warnings have been addressed
• Documentation has been updated (link to documentation *if necessary)
• Screenshot of the developed feature is added
• Accessibility testing has been performed

Error Handling

• Browser console contains no warnings or errors.
• Events are being sent to the appropriate logging solution
• Feature/bug has a monitor built into Datadog or Grafana (if applicable)

Authentication

• Did you login to a local build and verify all authenticated routes work as expected with a test user

⚠️ Team Sites (only applies to modifications made to the VA.gov header) ⚠️

• The vets-website header does not contain any web-components
• I used the proxy-rewrite steps to test the injected header scenario
• I reached out in the #sitewide-public-websites Slack channel for questions

Requested Feedback

(OPTIONAL) What should the reviewers know in addition to the above. Is there anything specific you wish the reviewer to assist with. Do you have any concerns with this PR, why?

[dcloud]

Reviewing /my-health/ on behalf of @department-of-veterans-affairs/vfs-mhv-integration:

Changes to MHV Secondary Nav needed, per this PR: /pull/29750

Changes to src/applications/mhv-landing-page/sass/mhv-landing-page.scss look correct according to the visual diff I performed. Also the math looks correct: 10*1 == 10 --> 16*0.625 == 10, etc.

Changes merged

[dcloud]

Reviewing /my-health/ on behalf of @department-of-veterans-affairs/vfs-mhv-integration:

Changes for /my-health/ and secondary nav look good