Capitalization is used in conjunction with other typographical features including size, alignment, and weight to help establish the visual hierarchy on a page.
Courtesy of Appleton "Understanding Visual Hierarchy Helps Your Customers Understand You"
It can be tricky to decide what capitalization treatment to use based on the underlying tagging of page elements like H1 or H2. The guidelines here will aid in selecting the proper capitalization. However, the entire design should be considered.
Standard capitalization has been applied to the Figma components and the documentation within this system. When components are combined into a full page, though, adjustments may be appropriate to support the intended visual hierarchy.
All caps should be used very sparingly. When letters are all one size and width, they tend to run together, negatively impacting the readability of the text.
The only times all caps should be used is for modal headings and eyebrow text. These elements add context, but aren't core to the task or message.
Use eyebrow text to provide additional context or wayfinding hints in content heavy areas.
Do not use overline or eyebrow styling for subheaders.
Use title case for most top level headings, except in marketing-related content that includes imagery such as large heroes.
Use title case for menus, sub menus, categories, tabs, and other navigational elements.
Do not use title case for large headers on heroes, where imagery is used to emphasize the content.
Center align and use title case for large sections of main pages to set apart a segment of the page, such as on the home page.
Do not use title case for headings or list elements in smaller container components within a larger window or page.
Use title case for CTAs (buttons). Inline links should follow the style of the surrounding text, typically sentence case.
Do no use title case for lower level headers, when considered in context with the rest of the design. "Money Back Guarantee" is a top level heading within the component, but the hierarchy of the entire page reduces the priority of this content.