We’re using cookies, but you can turn them off in Privacy Settings. Otherwise, you are agreeing to our use of cookies. Accepting cookies does not mean that we are collecting personal data. Learn more in our Privacy Policy .

Typography

Head Levels

This Is an h1

H1 goes at the top of the page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This Is an h2

H2 usually goes after H1

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

This Is an h3

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

This Is an h4

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

This Is an h5

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

This Is an h6

Vivamus at augue eget arcu dictum. Convallis aenean et tortor at. Tempus urna et pharetra pharetra massa massa ultricies mi quis. Pulvinar mattis nunc sed blandit libero. Convallis tellus id interdum velit.

HTML

<h1>This Is an h1</h1>        

<h2>This Is an h2</h2>

<h3>This Is an h3</h3>

<h4>This Is an h4</h4>

<h5>This Is an h5</h5>

<h6>This Is an h6</h6>
            

Problem Being Solved

Developers need heads for various sections on a page.

When to Use

Head levels should be used when labeling a section.

When Not to Use

Do not use if another appropriate element should be used (ex: a legend in a fieldset or a label in a form).

Formatting

  • Always use head levels in order.
  • Always nest appropriately.
  • If you need a look of a certain head level (on a different head level or something else), you can use the class name of that head level — class="h1", class="h4", etc...

Alternate Head Styles

This Is an h1 with Alt Styles

This Is an h2 with Alt Styles

This Is an h3 with Alt Styles

This Is an h4 with Alt Styles

This Is an h4 with Alt Short Underline Styles.

This Is an h5 with Alt Styles
This Is an h6 with Alt Styles

HTML

<h1 class="alt">This Is an h1 with Alt Styles</h1>

<h2 class="alt">This Is an h2 with Alt Styles</h2>

<h3 class="alt">This Is an h3 with Alt Styles</h3>

<h4 class="alt">This Is an h4 with Alt Styles</h4>

<h4 class="alt-underline color-changer-init after-border">This Is an h4 with Alt Short Underline Styles.</h4>

<h5 class="alt">This Is an h5 with Alt Styles</h5>

<h6 class="alt">This Is an h6 with Alt Styles</h6>
            

Problem Being Solved

Developers need alternative styled heads for various sections on a page.

When to Use

  • Head levels should be used when labeling a section.
  • Only use if a designer has requested an alt head style.

When Not to Use

  • Do not use if another appropriate element should be used (ex: a legend in a fieldset or a label in a form).
  • Do not use if a designer has not requested an alt head style.

Formatting

  • Always use head levels in order.
  • Always nest appropriately.
  • If you need a look of a certain head level (on a different head level or something else), you can use the class name of that head level — class="h1-alt", class="h4-alt", etc...

Default Body Section

Body item text

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

HTML

<section>
    <p>Body item text</p>

    <p>Another body item text example</p>
</section>
            

Problem Being Solved

A developer needs paragraph level text.

When to Use

Use if you need generic text or paragraph level text.

When Not to Use

Do not use if another appropriate elment can and should be used.

Formatting

  • This style applies to most plain text. If there is not a specific section below for a content structure, default to this.
  • Use an H2 if there is a title.
  • Use P for text.
  • Not every <p></p> tag needs to be wrapped in a section. Section tags are to note the start/end of anew component area.

Fonts

Lato

The Chartered Financial Analyst® (CFA®) credential has become the most respected and recognized investment designation in the world; enrolling in the CFA Program is your first step toward earning this qualification.

HTML

<>N/A<>
            

Problem Being Solved

CFA Institute needs to have a consistent font throughout our web properties.

When to Use

This will be the default font for all elements.

When Not to Use

Do not override our default fonts. If you ever needed to, you MUST speak with a designer first so they can bring it to our team for approval.

Formatting

All font will be Lato.

Right Aligned .text-right

Center Aligned .text-center

Left Aligned .text-left

HTML

Problem Being Solved

Text needs to be aligned other than the locale default.

When to Use

Design dictates a non-default alignment.

When Not to Use

For fun

Note

These classes can be applied to any element or container element.