Official websites use .gov
A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS
A lock ( ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

  • Special Publication:  Public Website Visual Style Guide
  • August 2015

Typography and Text

Use these type families as outlined in MCC’s Standards for Global Marking and Branding.

Type Families

The website uses MCC's two corporate font families: Gotham and Warnock Pro.

Type Families
Example Code
Gotham
  • CSS: font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, sans-serif;
  • CSS class: .gotham
  • SASS variable: $font-sans
Gotham Narrow
Used only in tables for specific situations.
  • CSS: font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', Helvetica, sans-serif;
  • CSS class: .gotham-narrow
  • SASS variable: $font-sans-narrow
Gotham Extra Narrow
Used only in tables for specific situations.
  • CSS: 'Gotham XNarrow SSm A', 'Gotham XNarrow SSm B', Helvetica, sans-serif;
  • CSS class: .gotham-extra-narrow
  • SASS variable: $font-sans-extra-narrow
Warnock Pro
  • CSS: font-family: 'warnock-pro-1', 'warnock-pro-2','Times New Roman', Times, serif;
  • CSS class: .warnock-pro
  • SASS variable: $font-serif

Font Weights

To help optimize page load times, the website's fonts are limited to the following weights.

Font Weights
Example Code
Gotham Book
  • CSS: font-weight: 400; font-style: normal;
  • CSS class: .gotham-book
Gotham Book Italic
  • CSS: font-weight: 400; font-style: italic;
  • CSS class: .gotham-book
Gotham Bold
  • CSS: font-weight: 700; font-style: normal;
  • CSS class: .gotham-bold
Gotham Black
  • CSS: font-weight: 800; font-style: normal;
  • CSS class: .gotham-black
Gotham Narrow Book
Used only in tables for specific situations.
  • CSS: font-weight: 400; font-style: normal;
  • CSS class: .gotham-narrow-book
Gotham Narrow Book Italic
Used only in tables for specific situations.
  • CSS: font-weight: 400; font-style: italic;
  • CSS class: .gotham-narrow-book-italic
Gotham Narrow Bold
Used only in tables for specific situations.
  • CSS: font-weight: 700; font-style: normal;
  • CSS class: .gotham-narrow-bold
Gotham Narrow Bold Italic
Used only in tables for specific situations.
  • CSS: font-weight: 700; font-style: italic;
  • CSS class: .gotham-narrow-bold-italic
Gotham Extra Narrow Book
Used only in tables for specific situations.
  • CSS: font-weight: 400; font-style: normal;
  • CSS class: .gotham-extra-narrow-book
Gotham Extra Narrow Book Italic
Used only in tables for specific situations.
  • CSS: font-weight: 400; font-style: italic;
  • CSS class: .gotham-extra-narrow-book-italic
Gotham Extra Narrow Bold
Used only in tables for specific situations.
  • CSS: font-weight: 700; font-style: normal;
  • CSS class: .gotham-extra-narrow-bold
Gotham Extra Narrow Bold Italic
Used only in tables for specific situations.
  • CSS: font-weight: 700; font-style: italic;
  • CSS class: .gotham-extra-narrow-bold-italic
Warnock Pro Regular
  • CSS: font-weight: 400; font-style: normal;
  • CSS class: .warnock-pro-regular
Warnock Pro Semibold
  • CSS: font-weight: 600; font-style: normal;
  • CSS class: .warnock-pro-semibold

HTML Tags, Styled

Listed alphabetically by tag name.

Abbreviation <abbr>

Used to indicate an abbreviation or an acronym like MCC.

Output
MCC

Code

<abbr title="Millennium Challenge Corporation">MCC</abbr>

Addresses <address>

Used to indicate contact information for content in its parent element.

Output

FOIA requests should be addressed using the following information:

Millennium Challenge Corporation
Attn: Chief FOIA Officer
1099 14th St., NW, Suite 700
Washington D.C. 20005-3550

Code

<address>
<p><abbr title="Freedom of Information Act">FOIA</abbr> requests should be addressed using the following information:</p>
<p>Millennium Challenge Corporation<br>
Attn: Chief FOIA Officer<br>
1099 14th St., NW, Suite 700<br>
Washington D.C. 20005-3550</p>
</address>

a <a>

Indicates a text link.

Output
A text link

Code

<a href="http://www.mcc.gov">A text link</a>

b <b>

Used to stylistically offset text, such as keywords or typographically emboldened text with any implied emphasis.

Output
Stylistically offset text.

Code

<b>Stylistically offset text.</b>

Blockquote <blockquote>

Indicates an extended quotation. See the "Code Patterns" section below for pull quotes code patterns.

Output
Four score and seven years ago…

Code

<blockquote>Four score and seven years ago…</blockquote>

Citation <cite>

Indicates a citation.

Output
The Washington Post

Code

<cite>The Washington Post</cite>

Code <code>

Indicates sample code.

Output
<a href="http://www.mcc.gov">Millennium Challenge Corporation</a>

Code

<code><a href="http://www.mcc.gov">Millennium Challenge Corporation</a></code>

Deleted Text <del>

Indicated deleted text. Generally used in conjunction with the <ins> tag.

Output
deleted text

Code

<del>deleted text</del>

Definition <dfn>

Indicates a definition.

Output
A balloon is a brightly colored rubber, inflatable sac.

Code

A <dfn>balloon</dfn> is a brightly colored rubber, inflatable sac.

Emphasis <em>

Used to imply emphasis.

Output
Used to imply emphasis

Code

<em>Used to imply emphasis</em>

Heading 1 <h1>

The <h1> tag is reserved for the section title at the top of page. Start headers in the content area with <h2>.

Output

Heading 1

Code

<h1>Heading 1</h1>

Heading 2 <h2>

Start headers in the content area with <h2>.

Output

Heading 2

Code

<h2>Heading 2</h2>

Heading 3 <h3>

Output

Heading 3

Code

<h3>Heading 3</h3>

Heading 4 <h4>

Output

Heading 4

Code

<h4>Heading 4</h4>

Heading 5 <h5>

Output
Heading 5

Code

<h5>Heading 5</h5>

Heading 6 <h6>

Output
Heading 6

Code

<h6>Heading 6</h6>

Highlight <mark>

Output
Highlighted text

Code

<mark>highlighted text</mark>

Horizontal Rule <hr>

The horizontal rule should rarely be used. See the "Containers" section and use the .section or .sub-section code pattern instead.

Output

Code

<hr>

i <i>

Used to indicate an alternate voice, like foreign words, technical terms and typographically italicized text without any implied emphasis.

Output
Alternate voice, like foreign words, technical terms and typographically italicized text without any implied emphasis

Code

<i>Alternate voice, like foreign words, technical terms and typographically italicized text without any implied emphasis</i>

Insert <ins>

Indicates inserted text. Generally used in conjunction with the <del> tag.

Output
deleted textinserted text

Code

<del>deleted text</del><ins>inserted text</ins>

Keyboard <kbd>

Indicates an action to be taken on a keyboard, like “then hit Enter.”

Output
Hit Enter on the keyboard.

Code

Hit <kbd>Enter</kbd> on the keyboard.

Paragraph <p>

Output

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at tortor at nunc tincidunt porttitor. Donec porttitor justo in volutpat lacinia. Nunc mi tellus, scelerisque blandit accumsan nec, consequat in libero. Suspendisse vel varius augue. Suspendisse vehicula, massa ut dictum tristique, velit sem sodales odio, ac elementum urna risus vel dolor. Vestibulum sit amet aliquam magna, eget consectetur nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris et pulvinar nunc. Maecenas metus sem, congue vitae consequat et, egestas vitae massa. Etiam quis gravida ex. Sed in egestas enim, quis congue augue. Nunc at massa eu felis maximus pharetra ornare id tellus. Fusce tincidunt ante quis lacus condimentum faucibus.

Aliquam erat volutpat. Quisque malesuada urna arcu, in aliquam magna gravida quis. In vel semper tortor, sed tincidunt est. Nulla eu mi lectus. Donec quis lacus eu quam hendrerit ornare ut vitae leo. Cras consequat posuere vestibulum. Integer tellus odio, vulputate eget dolor scelerisque, hendrerit bibendum metus. Maecenas iaculis auctor mauris ac dapibus. Maecenas non arcu vitae urna pulvinar posuere. Ut at lacus risus. Morbi dui dolor, aliquet a bibendum a, malesuada id velit.

Morbi mi eros, pulvinar commodo urna et, pulvinar pretium metus. Fusce pharetra, massa id malesuada molestie, erat nibh feugiat orci, sit amet imperdiet ipsum sapien eget dui. Integer eu dictum quam, non pharetra mi. Etiam auctor quam ac congue lacinia. Aliquam tempor justo sed nisl pretium, vel porta dolor aliquam. Morbi ut quam sed enim congue faucibus. Cras dictum ultricies ligula nec luctus. Proin scelerisque eget est id tempus. Ut dui justo, imperdiet porta varius quis, euismod id est.

Code

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at tortor at nunc tincidunt porttitor. Donec porttitor justo in volutpat lacinia. Nunc mi tellus, scelerisque blandit accumsan nec, consequat in libero. Suspendisse vel varius augue. Suspendisse vehicula, massa ut dictum tristique, velit sem sodales odio, ac elementum urna risus vel dolor. Vestibulum sit amet aliquam magna, eget consectetur nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris et pulvinar nunc. Maecenas metus sem, congue vitae consequat et, egestas vitae massa. Etiam quis gravida ex. Sed in egestas enim, quis congue augue. Nunc at massa eu felis maximus pharetra ornare id tellus. Fusce tincidunt ante quis lacus condimentum faucibus.</p>
<p>Aliquam erat volutpat. Quisque malesuada urna arcu, in aliquam magna gravida quis. In vel semper tortor, sed tincidunt est. Nulla eu mi lectus. Donec quis lacus eu quam hendrerit ornare ut vitae leo. Cras consequat posuere vestibulum. Integer tellus odio, vulputate eget dolor scelerisque, hendrerit bibendum metus. Maecenas iaculis auctor mauris ac dapibus. Maecenas non arcu vitae urna pulvinar posuere. Ut at lacus risus. Morbi dui dolor, aliquet a bibendum a, malesuada id velit.</p>
<p>Morbi mi eros, pulvinar commodo urna et, pulvinar pretium metus. Fusce pharetra, massa id malesuada molestie, erat nibh feugiat orci, sit amet imperdiet ipsum sapien eget dui. Integer eu dictum quam, non pharetra mi. Etiam auctor quam ac congue lacinia. Aliquam tempor justo sed nisl pretium, vel porta dolor aliquam. Morbi ut quam sed enim congue faucibus. Cras dictum ultricies ligula nec luctus. Proin scelerisque eget est id tempus. Ut dui justo, imperdiet porta varius quis, euismod id est.</p>

Quote <q>

Indicates a short, inline quote. For a longer quote, use <blockquote>.

Output
The quick, brown fox jumps over the lazy dog.

Code

<q>The quick, brown fox jumps over the lazy dog.</q>

Sample Output <samp>

Output
Indicates sample output from a computer program, like this.

Code

Indicates sample output from a computer program, <samp>like this</samp>

Small <small>

Used to create text at a smaller font size. The <small> tag should rarely be used. Use the .text-small helper class instead.

Output
Small text.

Code

<small>Small text.</small>

Strikethrough <s>

Indicates strikethrough text.

Output
strikethrough text

Code

<s>strikethrough text</s>

Strong <strong>

Used to imply strong emphasis.

Output
Strong emphasis

Code

<strong>strong emphasis</strong>

Subscript <sub>

Used to create a subscript number or text.

Output
Here is somesubscript text.

Code

Here is some<sub>subscript</sub> text.

Superscript <sup>

Used to create a superscript number or text.

Output
Here is somesuperscript text.

Code

Here is some<sup>superscript</sup> text.

Underline <u>

Do not ever use underlined text. Use <em> instead. Underlined text is an indicator of a hyperlink.

Output
Underlined text.

Code

<u>Underlined text.</u>

Variable <var>

Indicates a mathematical variable.

Output
Indicates a mathematical variable, like x = y

Code

Indicates a mathematical variable, like <var>x</var> = <var>y</var>

Code Patterns

Footnotes .footnotes and .footnote

Footnote Reference

Output
1

Code

<a href="#fn-1-a" id="ref-1-a" class="ref">1</a>

Footnote Text

The id and href values should match the footnote reference number (e.g. if it's the first footnote, the id should be ref-1-a; if it's the tenth footnote, the id should be ref-10-a).

Output
Footnotes
  • 1 First footnote text.
  • 2 Second footnote text.

Code

<li class="footnote"><a href="#ref-1-a" id="fn-1-a" class="footnote-reference">1</a><i class="fa fa-arrow-circle-up"></i></a><span class="footnote-count"></span> First footnote text.</li>
<li class="footnote"><a href="#ref-2-a" id="fn-2-a" class="footnote-reference">2</a><i class="fa fa-arrow-circle-up"></i></a><span class="footnote-count"></span> Second footnote text.</li>

Pull Quote — No Citation <blockquote>

Output
Four score and seven years ago…

Code

<blockquote>Four score and seven years ago…</blockquote>

Pull Quote — With Citation <blockquote> and <cite>

Output

Yes! Live! Life's a banquet and most poor suckers are starving to death!

—Mame Dennis

Code

<blockquote>
<p>Yes! Live! Life's a banquet and most poor suckers are starving to death!</p>
<cite>—Mame Dennis</cite>
</blockquote>

Callout Data Point <ul class="callout-data-point">

Output
  • 34%
    of applicants received grants

Code

<ul class="callout-data-point">

<li><span class="data-point-big-text">34%</span><br><span class="data-point-text">of applicants received grants</span></li>

</ul>
Callout Data Point Helper Classes
Class Description
.callout-data-point-width-2 Add to the <ul> tag to have two data points display side-by-side
.callout-data-point-width-3 Add to the <ul> tag to have three data points display side-by-side

HTML Codes for Common Punctuation

Listed alphabetically by punctuation mark. See also, common HTML entities used for typography from the W3C's wiki.

HTML Codes for Common Punctuation
Punctuation Mark Output Code
Dash - em — &#8212;
Dash - en – &#8211;
Divide sign ÷ &#247;
Ellipsis … &#8230;
Fraction - one quarter ¼ &#188;
Fraction - one half ½ &#189;
Fraction - three quarters ¾ &#190;
Hyphen - &#45;
Minus sign − &#8722;
Multiply sign × &#215;
Not equals sign ≠ &#8800;
Quotation Mark - Left double curly quote “ &#8220;
Quotation Mark - Right double curly quote ” &#8221;
Quotation Mark - Left single curly quote ‘ &#8216;
Quotation Mark - Right single curly quote ’ &#8217;
Prime - Single ′ &#8242;
Prime - Double ″ &#8243;
Prime - Triple ‴ &#8244;
Section § &#167;

Helper Classes

Listed alphabetically by class name.

Typography Helper Classes
Class Output Description
.clearfix   HTML5BP: Clears floats
.gotham Gotham Sets the font to Gotham
.gotham-book Gotham Book Sets the font to Gotham Book, which is font-weight 400
.gotham-bold Gotham Bold Sets the font to Gotham Bold, which is font-weight 700
.gotham-black Gotham Black Sets the font to Gotham Black, which is font-weight 800
.hidden   HTML5BP: Hides content visually and from screen readers
.invisible   HTML5BP: Hide visually and from screen readers but maintains layout
.js-title-case Title Case Add class to a parent container or ancestor element to change any all-capitalized text to title case.
.link-unvisited Unvisited link Description
.link-visited Visited link  
.link-hover Hover link  
.link-focus Focus link  
.link-active Active link  
.link-external External link  
.pdf-only   Only displays content on PDF output
.print-page-break  
  • On-screen: no styling change
  • Print: inserts a page break
  • PDF: inserts a page break
.swatch
Use div tag to display color swatches
.text-align-center Text align center  
.text-align-left Text align left  
.text-align-right Text align right  
.text-hero Hero text Increases text size to 150%, changes it to Gotham and colors it web-deep-blue
.text-hero-large Hero text - large Increases text size to 200%, changes it to Gotham and colors it web-deep-blue
.text-dateline Dateline text
.text-byline Byline text  
.text-release-type Release type text  
.text-release-timing Release timing text  
.text-release-date Release date text  
.text-small Small text Reduces text size to 70% and changes it to Gotham
.text-medium Medium text Reduces text size to 85% and changes it to Gotham
.text-large Text large Increases text size to 115%
.text-xl Text XL Increases text size to 150%
.text-enormous Text Enormous Increases text size to 200%
.text-gigantic Text Gigantic Increases text size to 300%
.text-quiet Quiet text  
.text-subtitle Subtitle  
.visuallyHidden   HTML5BP: Hides content visually but available to screen readers
.warnock-pro Warnock Pro Sets the font to Warnock Pro
.warnock-pro-regular Warnock Pro Regular Sets the font to Warnock Pro Regular, which is font-weight 400
.warnock-pro-semibold Warnock Pro Semibold Sets the font to Warnock Pro Semibold, which is font-weight 600