arrow-downarrow-leftarrow-rightarrow-upavatarcameracartchevron-upchevron-leftchevron-rightchevron-upclosecommentemailfullscreen-closefullscreen-opengridheadphonesheart-filledheart-openlockmap-geolocatormap-pushpinmenuminusng-borderpauseplayplusprintsearchsharefacebookgithubg+instagramlinkedinlinkedin_inpinterestpinterest_psnapchatsnapchat_2tumblrtwittervimeovinewhatsappspeakerstar-filledstar-openzoom-inzoom-out

Typography

Our websites use the following font-families: "Chronicle Display 3r", "Chronicle Deck 6r", Georgia, and "Pragmatica-Web". Use the nomenclature on this page to develop with these fonts. For static mockups, please contact us to request access to our font package.

 

Page Headings

Page headings may be composed of a kicker, a title, and a description. The kicker is used to indicate that something is part of a larger set of pages, such as a series (i.e., Photo of the Day). The title communicates the main purpose of the page. The description adds extra information about the page.

Page Heading (Large)

The large style is used primarily for Hub Pages, which may only contain promos to other content.

Photography

Photo of the Day

<p class="mt2_subh2">Photography</p>
<h1 class="mt2_h1">Photo of the Day</h1>

Page Heading (Small)

The small style is used for detail pages such as Articles. The title is often longer and descriptive.

Photo of the day

This is an Article Headline, Around 60 Characters Long

This is a description for a story that has a 140-character limit on article pages, which is about this long, and looks like this.

<p class="mt2_subh2">Photo of the day</p>
<h2 class="mt2_h2">This is an Article Headline, Around 60 Characters Long</h2>
<p class="mt2_subh1">This is a description for a story that has a 140-character limit on article pages, which is about this long, and looks like this.</p>
 

Captions and Labels

Component Heading

This is used to label secondary components such as promo blocks or in-line photo galleries.

Photo of the Day

<h3 class="mt2_h3">Photo of the day</h3>

Title

This is used to title in-page elements such as images, videos, or small promos.

Great Barrier Reef
<h5 class="mt2_h5">Great Barrier Reef</h5>

Caption

This is the default text style. It should be used for photo captions, promo descriptions, and graphic notes.

I am the default style for text on the website. I am used for many things including paragraphs of text, standalone labels and descriptions, and many other things.

<p class="mt2_subh4">I am the default style for text on the website. I am used for many things including paragraphs of text, standalone labels and descriptions, and many other things.</p>

Credit

This style is used for smaller text elements such as photo credits, sources, and publication dates.

Photograph by Joel Sartore

<p class="mt2_subh3">Photograph by Joel Sartore</p>
 

Articles and Inline Styles

Body Copy

These paragraph styles can be used either inside or outside a wrapping element, such as an <article> tag.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

<p class="mt2_body">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

or, inside an article container...

<div class="mt2_article">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

Subheadings

Use the heading tags inside an article container to denote structured sections of content. The <h3> — <h6> tags are identical in appearance to discourage excessive levels of hierarchy.

Subheading 1

Subheading 2

Subheading 3

Subheading 4

Subheading 5
Subheading 6
<p class="mt2_h4">Subheading 1</p>
<div class="mt2_article">
  <h1>Subheading 1</h1>
  <h2>Subheading 2</h2>
  <h3>Subheading 3</h3>
  <h4>Subheading 4</h4>
  <h5>Subheading 5</h5>
  <h6>Subheading 6</h6>
</div>

In-Line Text Styles

The following classes can be used within the context of body copy.

Bolded Statement. Italicized statement.

Underlined statement Struckthrough statement

Superscript 2 and Subscript 2

Pellentesque ac turpis egestas. Inline text link. Donec eu libero sit amet quam egestas semper.

<p class="mt2_body"><strong>Bolded Statement.</strong><em>Italicized statement. </em></p>
<p class="mt2_body"><u>Underlined statement</u> <s>Struckthrough statement</s></p>
<p class="mt2_body">Superscript <sup>2</sup> and Subscript <sub>2</sub></p>
<p class="mt2_body">Pellentesque ac turpis egestas. <a href="">Inline text link.</a> Donec eu libero sit amet quam egestas semper.</p>
<div class="mt2_article">
  <p><strong>Bolded Statement.</strong> <em>Italicized statement.</em></p>
  <p><u>Underlined statement</u> <s>Struckthrough statement</s></p>
  <p>Superscript <sup>2</sup> and Subscript <sub>2</sub></p>
  <p>Pellentesque ac turpis egestas. <a href="">Inline text link.</a> Donec eu libero sit amet quam egestas semper.</p>
</div>

Ordered and Unordered Lists

  1. Item One
  2. Item Two
  3. Item Three
  • Item One
  • Item Two
  • Item Three
<ol class="mt2_list">
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ol>

<ul class="mt2_list">
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>
<div class="mt2_article">
  <ol>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ol>

  <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ul>
</div>

Block Quotes

Block quotes are used to offset text that has been quoted or excerpted from another source. It is typically used for longer blocks of text that are too long to display inline. The source of the quote should always be attributed when possible.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

<blockquote class="mt2_blockquote">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
  <footer class="mt2_blockquote--footer"><a href="#" class="mt2_h5 mt2_link">Attribution</a>, <span class="mt2_subh4">Attribution 2</span></footer>
</blockquote>
<div class="mt2_article">
  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
    <footer class="mt2_blockquote--footer"><a href="#" class="mt2_h5 mt2_link">Attribution</a>, <span class="mt2_subh4">Attribution 2</span></footer>
  </blockquote>
<div>
 

Pull Quotes

Pull quotes are used to call out interesting or important quotes. They can also be used to create visual interest in longer bodies of article text. The source of the quote should always be attributed when possible.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam.

<blockquote class="mt2_pullquote">
  <p class="mt2_h3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue.</p>
  <footer>
    <a href="#" class="mt2_h5 mt2_link">Attribution</a>, <span class="mt2_subh4">Attribution 2</span>
  </footer>
</blockquote>