Text

We use two font families, Bitter and Open Sans, on HealthCare.gov. As detailed in the typography section, these fonts were selected for both their approachability and legibility. Text should be treated with the same simple, clean approach used in the overall design of the site. Links, bolding, popovers, and other text modifications should be used only when absolutely necessary to help the consumer understand Marketplace concepts and navigate the Marketplace insurance process.

Header styles

Headers establish a visual and semantic hierarchy when nested correctly. For example, an H3 follows an H2 when it denotes a section contained within the H2's content. Headings should not be used solely based on their visual presentation.

H1s introduce pages or large sections. H2s and H3s introduce subsections. H4s are typically only used to introduce a set of links or other secondary content.

Example & Code

H1 Header 36px

H2 Header 24px

H3 Header 21px

H4 Header 16px

<h1>H1 Header 36px</h1>
<h2>H2 Header 24px</h2>
<h3>H3 Header 21px</h3>
<h4>H4 Header 16px</h4>

Headers with subtitles

If a subtitle is needed below a header, the margin is decreased.

Example & Code

h1 Header + class="sub"

Headers with subtitles have smaller margins

<h1 class="sub">h1 Header + class="sub"</h1>

h2 Header + class="sub"

Headers with subtitles have smaller margins

<h2 class="sub">h2 Header + class="sub"</h2>

h3 Header + class="sub"

Headers with subtitles have smaller margins

<h3 class="sub">h3 Header + class="sub"</h3>

h4 Header + class="sub"

Headers with subtitles have smaller margins

<h4 class="sub">h4 Header + class="sub"</h4>

Headers with rules

If a header introduces a list of links or a series of form fields, a border-bottom is added.

Example & Code

h1 Header + class = "rule"

<h1 class="rule">h1 Header + class="rule"</h1>

h2 Header + class = "rule"

<h2 class="rule">h2 Header + class="rule"</h2>

h3 Header + class = "rule"

<h3 class="rule">h3 Header + class="rule"</h3>

h4 Header + class = "rule"

<h4 class="rule">h4 Header + class="rule"</h4>

Body copy

HealthCare.gov’s global body copy default font size is 16px with a line height of 24px.

Example & Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu urna sit amet dolor tincidunt luctus sit amet ac risus. Aenean nunc ligula, sodales quis urna vitae, varius gravida orci.

<p>...</p>

Popovers

Popovers are used to define terms or program names that consumers might not be familiar with. All popovers are oriented with data-placement="bottom" to avoid overlaying content above the term or program name and to keep the popover from falling off the page.

Example & Code

An example of a popover minimum requirements.

<a role="button" href="#" class="glossary-term help-popover" data-title="Popover title" data-content="Popover content">Example popover</a>

Link lists

Link lists are used to provide links to important actions like appealing a marketplace decision, as well as links to pages related to the current page.

Example & Code

Take Action

<h4 class="rule">Take Action</h4>
<ul class="link-list">
    <li><a href="#" title="Link title">Link title</a></li>
    <li><a href="#" title="Link title">Link title</a></li>
</ul>