[Audit] Small text on the website

[natalia-fitzgerald]

As I review the component library implementation some questions have come up related to small text on our website. I am specifically concerned with text that is smaller than 16px in size. From a design perspective we set paragraph text at 16px to maximize accessibility and readability. We don't have guidelines for what type of text can or should be smaller than 16px and early this year the "Microcopy" category was deprecated from the Design System website.

It's possible that over the years we have determined that some specific content or content types on the site are of a lower level of importance and can be scaled at a smaller size (to minimize their prominence). But, as we build the component library I'd like to take another look at this from a global perspective to determine whether these are outliers or whether there is a general rule we can define and document in the Design System.

Currently, small text appears on our site in a variety of ways (I am still compiling):

• Breadcrumb
• Helper text
• Block helper text

In the code I see:

• <small class> which sizes text to 0.875em (14px)
  • Use case: Helper text and block helper text
• <nav class="breadcrumbs">which sizes text to 0.875em (14px)
  • Use case: Breadcrumb

[natalia-fitzgerald]

We ran a search for <u-small-text> and <small> on consumerfinance.gov and the Design System.

• <u-small-text> is not used on the Design System or on consumerfinance.gov
• <small> is used in 8 files on consumerfinance.gov
• <small> is used in the header and the footer of the Design System website
• In a manual search I found that <small>is also used for helper text and block helper text

small-cfgov	small-ds

[natalia-fitzgerald]

14px copy on the site:

TDP worksheets 

https://www.consumerfinance.gov/consumer-tools/educator-tools/youth-financial-education/teach/activities/paying-bills

tiny links - could be 16px and would be easier to read


Planning for retirement

https://www.consumerfinance.gov/consumer-tools/retirement/before-you-claim/

Paying for college

https://www.consumerfinance.gov/paying-for-college/your-financial-path-to-graduation
explainer text

Also uses note text which is 12px - This is way too small

TDP	Planning for retirement

[natalia-fitzgerald]

@meissadia
Since this is more of a global issue I'm going to move this to the Design System repo for wider visibility. I'll add a link here once that's done.

[natalia-fitzgerald]

Moved here: cfpb/design-system#1703