UI Toolkit

Typographic Hierarchy

Typographic hierarchy refers to the difference in type size and weight between text elements. It creates focus points that signal the user where to read; a successful hierarchy enables readers to easily scan content.

For information about how our typography relates to our visual identity, please visit the Typography page. For information about accessible text color combinations, please visit the Text Contrast page.

More Information in the WCAG 2.0 Guidelines

G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text

Useful Tool

This color contrast tool is a useful resource for testing the compliance of any color combination.

Font Stacks Requires MAX Custom Bootstrap Stylesheet

A font stack is a list of fonts in a CSS font-family declaration. The fonts are listed in order of preference. A font stack allows a us to control the look of the typefaces on a web page even if the computer doesn't have the best font for the job.

Sans Serif

This is the base font used for body copy and almost all content. The preferred font is Open Sans, but when that is not available, it will fall back to appropriate fonts all the way down to the OS default sans serif font.

font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

Serif

This font is used mainly for headers. We use a webfont because most systems do not have Trajan Pro installed. If the webfont is unable to load, it will fall back to appropriate fonts all the way down to the OS default serif font.

font-family: "Trajan Pro", Georgia, "Times New Roman", Times, serif;

Monospace

This font is used in very specific situations, mainly to display code. It will fall back to appropriate fonts all the way down to the OS default monospace font.

font-family: Menlo, Monaco, Consolas, "Ubuntu Mono", "Courier New", monospace;
Back to Top

Headers Requires MAX Custom Bootstrap Stylesheet

Consistent scaling and coloring are used to create distinction between header levels. They provide the user with a familiar focus point when they scan through text and it helps organize content. Headers are set in Trajan Pro.

Header 1 — 38px
Dark Gray (#424242)

MAX.gov Design System

Header 2 — 29px
Base Blue (#317ab9)

MAX.gov Design System

Header 3 — 26px
Dark Gray (#424242)

MAX.gov Design System

Header 4 — 20px
Base Blue (#317ab9)

MAX.gov Design System

Header 5 — 16px
Dark Gray (#424242)

MAX.gov Design System

Header 6 — 14px
Base Blue (#317ab9)

MAX.gov Design System
<h1>MAX.gov Design System</h1>
<h2>MAX.gov Design System</h2>
<h3>MAX.gov Design System</h3>
<h4>MAX.gov Design System</h4>
<h5>MAX.gov Design System</h5>
<h6>MAX.gov Design System</h6>
Back to Top

Body Text Requires MAX Custom Bootstrap Stylesheet

Open Sans should be used for the majority of body copy on the web. Trajan Pro may be used for introductory or accent text. For example, Trajan Pro is well-suited for use in menus or labels.

Body text should provide an efficient and pleasant experience on every viewport size. Readable text makes good use of alignment, spacing, line length and height, and contrast.

16px font size /
25px line height
Dark Gray (#424242)

MAX.gov strives to better serve our users by using plain language; relying on simple, user-friendly design; and providing easy access to services and tools that make them more effective in their daily work.

<p>MAX.gov strives to better serve our users by using plain language; relying on simple, user-friendly design; and providing easy access to services and tools that make them more effective in their daily work.</p>
Back to Top