[Discussion] Small body text on the website

[natalia-fitzgerald]

What is this about? Small text on the website. Specifically body text that is smaller than 16px (typically 0.875em or 14px).

What kind of issue is this? Add one or more of the issue labels below to the right-hand sidebar AND issue title. (We strongly encourage you to make content changes yourself where possible!)

• [ ] Info incorrect
• [ ] Content enhancement (e.g. confusing or redundant content, small content items need to be added, etc.)
• [ ] Needs content written (page is missing key information, e.g. use cases)
• [ ] Needs code snippet
• [ ] Overhaul page (page needs large-scale content rewriting and restructuring)
• [x] Audit/discussion to determine the need for defined use cases and content/usage guidelines

Describe your issue As I review the component library implementation some questions have come up related to small text on our website. I am specifically referring to text that is smaller than 16px in size. From a design perspective we set paragraph text at 16px to maximize accessibility and legibility. 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 type of content on the website are of secondary 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
• Explainer text
• Tooltip text

In the code I see:

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

Size this request (1=tiny, 5=enormous) 3

Add any additional background info as needed Make sure NOT to include internal links.

Thanks. Don't forget to add labels indicating issue type and size before submitting! Once you've submitted your issue, please add it to the content backlog project board: https://github.com/cfpb/design-system/projects/1

[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

small-cfgov	small-ds

14px text on the website

TDP worksheets

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

Sidebar links

Planning for retirement

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

• Explainer text
• Tooltips

Tooltips	Explainer

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


• Explainer text
 (similar to inline helper text but smaller)
• Also uses 12px "note text" which seems to align with the sizing we use for this type of text on other charts on the website

Explainer	Note

The Design System (itself)

Footer

[anselmbradford]

Small text in rate explorer appears in the numbers in the range slider and in the down payment warning text (for example), which you get to by entering a down payment amount that is larger than the house price.