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
|
|
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
|
|
Used only in tables for specific situations.
- CSS:
font-weight: 400; font-style: normal;
- CSS class:
.gotham-extra-narrow-book
|
|
Used only in tables for specific situations.
- CSS:
font-weight: 400; font-style: italic;
- CSS class:
.gotham-extra-narrow-book-italic
|
|
Used only in tables for specific situations.
- CSS:
font-weight: 700; font-style: normal;
- CSS class:
.gotham-extra-narrow-bold
|
|
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.
Expand or close the following content.Abbreviation <abbr>
Used to indicate an abbreviation or an acronym like MCC.
- Output
-
MCC
- Code
-
<abbr title="Millennium Challenge Corporation">MCC</abbr>
Expand or close the following content.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>
Expand or close the following content.a <a>
Indicates a text link.
- Output
-
A text link
- Code
-
<a href="http://www.mcc.gov">A text link</a>
Expand or close the following content.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>
Expand or close the following content.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>
Expand or close the following content.Citation <cite>
Indicates a citation.
- Output
-
The Washington Post
- Code
-
<cite>The Washington Post</cite>
Expand or close the following content.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>
Expand or close the following content.Deleted Text <del>
Indicated deleted text. Generally used in conjunction with the <ins> tag.
- Output
-
deleted text
- Code
-
<del>deleted text</del>
Expand or close the following content.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.
Expand or close the following content.Emphasis <em>
Used to imply emphasis.
- Output
-
Used to imply emphasis
- Code
-
<em>Used to imply emphasis</em>
Expand or close the following content.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>
Expand or close the following content.Heading 2 <h2>
Start headers in the content area with <h2>.
- Output
-
Heading 2
- Code
-
<h2>Heading 2</h2>
Expand or close the following content.Heading 3 <h3>
- Output
-
Heading 3
- Code
-
<h3>Heading 3</h3>
Expand or close the following content.Heading 4 <h4>
- Output
-
Heading 4
- Code
-
<h4>Heading 4</h4>
Expand or close the following content.Heading 5 <h5>
- Output
-
Heading 5
- Code
-
<h5>Heading 5</h5>
Expand or close the following content.Heading 6 <h6>
- Output
-
Heading 6
- Code
-
<h6>Heading 6</h6>
Expand or close the following content.Highlight <mark>
- Output
-
Highlighted text
- Code
-
<mark>highlighted text</mark>
Expand or close the following content.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>
Expand or close the following content.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>
Expand or close the following content.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>
Expand or close the following content.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.
Expand or close the following content.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>
Expand or close the following content.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>
Expand or close the following content.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>
Expand or close the following content.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>
Expand or close the following content.Strikethrough <s>
Indicates strikethrough text.
- Output
-
strikethrough text
- Code
-
<s>strikethrough text</s>
Expand or close the following content.Strong <strong>
Used to imply strong emphasis.
- Output
-
Strong emphasis
- Code
-
<strong>strong emphasis</strong>
Expand or close the following content.Subscript <sub>
Used to create a subscript number or text.
- Output
-
Here is somesubscript text.
- Code
-
Here is some<sub>subscript</sub> text.
Expand or close the following content.Superscript <sup>
Used to create a superscript number or text.
- Output
-
Here is somesuperscript text.
- Code
-
Here is some<sup>superscript</sup> text.
Expand or close the following content.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>
Expand or close the following content.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
Expand or close the following content.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
-
- 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>
Expand or close the following content.Pull Quote — No Citation <blockquote>
- Output
-
Four score and seven years ago…
- Code
-
<blockquote>Four score and seven years ago…</blockquote>
Expand or close the following content.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>
Expand or close the following content.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 |
— |
— |
| Dash - en |
– |
– |
| Divide sign |
÷ |
÷ |
| Ellipsis |
… |
… |
| Fraction - one quarter |
¼ |
¼ |
| Fraction - one half |
½ |
½ |
| Fraction - three quarters |
¾ |
¾ |
| Hyphen |
- |
- |
| Minus sign |
− |
− |
| Multiply sign |
× |
× |
| Not equals sign |
≠ |
≠ |
| Quotation Mark - Left double curly quote |
“ |
“ |
| Quotation Mark - Right double curly quote |
” |
” |
| Quotation Mark - Left single curly quote |
‘ |
‘ |
| Quotation Mark - Right single curly quote |
’ |
’ |
| Prime - Single |
′ |
′ |
| Prime - Double |
″ |
″ |
| Prime - Triple |
‴ |
‴ |
| Section |
§ |
§ |
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 |
