Examples

Large body text

.ds-text-body--lg

Medium body text

.ds-text-body--md

Small body text

.ds-text-body--sm

Code

Style customization

The following CSS variables can be overridden to change the type sizes:

• --font-size-lg
• --font-size-md, uses --font-size-base
• --font-size-sm

Guidance

Accessibility

• If you need to stray from the default body text color and default page background color, make sure your color combinations provide sufficient color contrast:
  • 4.5:1 minimum contrast ratio for text smaller than:
    • 18pt (24px), normal font weight
    • 14pt (18.6px), bold font weight
  • 3:1 minimum contrast ratio for text equal to or larger than:
    • 18pt (24px), normal font weight
    • 14pt (18.6px), bold font weight
  • For more information, check out the following resources:
    • WCAG Understanding Docs for success criterion 1.4.3 Contrast (Minimum) (Level AA)

      You are leaving design.cms.gov.

      You're about to connect to a third-party site. Select CONTINUE to proceed or CANCEL to stay on this site.

      Learn more about links to third-party sites.

      ContinueCancel
    • WebAIM Contrast and Color Accessibility

      You are leaving design.cms.gov.

      You're about to connect to a third-party site. Select CONTINUE to proceed or CANCEL to stay on this site.

      Learn more about links to third-party sites.

      ContinueCancel