Typography

News Cycle is the font use. Currently our font family definition looks like:


  font-family: "NewsCycle", Arial, sans-serif;

The News Cycle font along with icons is served via Fort Awesome. Include the following code at the bottom of the page:


  <script src="https://use.fortawesome.com/eab9b8ee.js"></script>

Examples


Main title h1

36px/40px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa ipsum, tincidunt vel convallis in, suscipit et risus. Morbi erat dolor, mattis at dignissim sed, feugiat sed lorem.

This is an h2 Heading

24px/28px

Mauris feugiat suscipit turpis, ut rhoncus lectus finibus sed. Etiam suscipit consectetur eros vitae venenatis.

This is an h3 Heading

20px/24px

Ut leo ipsum, tincidunt vel mauris eget, convallis egestas justo. Nunc ligula neque, porta ac lorem id, ultrices dapibus dolo

This is an h4 Heading

16px/20px

Phasellus interdum massa ante, ac placerat felis ultricies at. Fusce vulputate, odio sed convallis laoreet, tortor orci venenatis massa, a placerat ligula nisl vitae felis. In pellentesque ornare eleifend. Suspendisse potenti. Quisque eget mauris enim.

This is an h5 Heading
16px/20px

This is some lead body copy. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Lorem ipsum This is a hyperlink, consectetur adipiscing elit. This is visited link. Nullam pharetra sagittis gravida. Phasellus pretium tortor vel risus vulputate, vel porta velit malesuada. Suspendisse potenti. This is some strong text tincidunt. Maecenas ac fermentum dui, non cursus erat. Phasellus sollicitudin neque a rhoncus hendrerit. Mauris a dui efficitur, finibus libero ut, consectetur augue. Vestibulum euismod rhoncus pulvinar. This is some italic text. Nullam congue sapien et tempor finibus. Duis placerat a augue at mollis. Duis bibendum massa nisl, ut aliquet ipsum imperdiet vitae.




Unordered list

When using bulleted lists, it should be set as chevrons

  • Bullet 1
  • Bullet 2
  • Bullet 3
  • Bullet 4
  • Bullet 5

Add the class contentbullets to the <ul> element.

Ordered list

 

  1. Bullet 1
  2. Bullet 2
  3. Bullet 3
  4. Bullet 4
  5. Bullet 5

  <ul class="contentbullets">
    <li>Bullet 1</li>
    <li>Bullet 2</li>
    <li>Bullet 3</li>
    <li>Bullet 4</li>
    <li>Bullet 5</li>
  </ul>


  <ol class="orderedlist">
    <li>Bullet 1</li>
    <li>Bullet 2</li>
    <li>Bullet 3</li>
    <li>Bullet 4</li>
    <li>Bullet 5</li>
  </ol>