A clear typographic hierarchy is critical to the effective communication of our brand. Type should be light and well-spaced to reinforce that we are transparent, open, and approachable. This system uses weight, scale, and capitalization to convey the relative importance of each heading within a document. Readability and accessibility allow all users to efficiently read and absorb textual information.
Avenir Next is the primary brand typeface and can be used across all formats from print to digital. Its round and geometric letterforms are approachable and modern.
Avenir Next Demi Bold
HTML code snippet
<h3 style="font-weight: 600;letter-spacing: 1px;">Avenir Next Demi Bold</h3> <h4 style="font-weight: 600;letter-spacing: 1px;">ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> abcdefghijklmnopqrstuvwxyz<br> 0123456789</h4>
Avenir Next Medium
HTML code snippet
<h3 style="font-weight: 500;">Avenir Next Medium</h3> <h4 style="font-weight: 500;"> ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> abcdefghijklmnopqrstuvwxyz<br> 0123456789</h4>
Avenir Next Regular
HTML code snippet
<h3>Avenir Next Regular</h3> <h4> ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> abcdefghijklmnopqrstuvwxyz<br> 0123456789</h4>
Readable text allows users to efficiently read and take in textual information. Text that is not readable turns off readers or makes it challenging for them to stay focused. The following guidelines promote good readability.
Typography should be set flush left. This provides the eye a constant starting point for each line, making text easier to read.
Ample space between lines of type promotes an open feeling and lends flow to body copy. When setting body copy, the leading should be 1.375 times the type size, or 37.5% larger.
Comfortable line length allows the reader’s eyes to flow easily from the end of one line to the beginning of the next. The ideal line length is 66 characters, including spaces, though lengths may range from 45 to 90 characters.
In digital materials, readers are afforded some level of control over line length by narrowing their browser window or changing the type size display on their devices. In printed materials, readers do not have this control. For this reason, special effort should be made to use a line length as close as possible to 66 characters in printed materials. This can be achieved by using a multi-column layout or larger margins.
White space affects how the user focuses their attention on the content. It makes it easier to know what to read and where to begin. Spacing between typographic elements should be open enough to feel light, but close enough to establish a proper relationship between elements.
Heading followed by body copy
When a heading is followed by paragraph text, include 30px of space below Display and 15px below Headings 1–6.
Body copy followed by a heading
When body copy is followed by a heading, include 45px of space above Heading 2 and 30px above Headings 3–6.
Heading followed by a heading
For stacked headings, include 30 px of space after the primary heading.
Body copy spacing
For multiple paragraphs within the same section set the space between paragraphs to 15px.
Web Content Accessibility (WCAG) standards ensure that content is accessible by everyone, regardless of any disability or user device. To learn more, refer to the http://www.section508.gov.
Colored type is restricted
Never use colored type, unless it’s a link. This restriction includes all brand colors, including CFPB green.
One exception to this rule falls within illustration or other graphics. In instances when a designer determines the best solution includes using colored type, color contrast needs to be checked. Please use the WebAIM Contrast Checker to check and confirm the accessibility of color combinations and type sizes.
Although accessible, the combinations of black type on green or green type on black should never be used.
Accessible and brand compliant combinations
To ensure text remains compliant with WCAG 2.0 standards, use only these permitted type and background color combinations, which fall within the range of foreground/background color contrast permitted by the Section 508 guidelines. For specific color values, visit our Color page.
Black type on colored backgrounds
Black type is accessible on all brand colors with 20% saturation or below when using at least 14pt type. A few colors allow for slightly darker saturations while still maintaining accessibility. If you’re looking to use a combination not listed here, check WebAIM Contrast Checker to verify accessibility.
White type on colored backgrounds
White type is accessible on all brand colors at 100% saturation and their darker shades when using at least 14pt type, with the exception of gold.