About
Atoms
Molecules
Organisms
Typography
Helvetica and Proxima Nova are the primary fonts in this Style Guide.

Primary Fonts

Helvetica
ready
<style>
  * {
    font-family: 'Helvetica' !important;
    word-wrap: break-word;
  }
  p {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 1rem;
    font-size: 18px !important;
    
  }
</style>

# AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
# 1234567890',.<>/?;':"[]{}-=_+!@#$%^&*()

A major key, never panic. Don’t panic, when it gets crazy and rough, don’t panic, stay calm. Don’t ever play yourself. Surround yourself with angels, positive energy, beautiful people, beautiful souls, clean heart, angel. You smart, you loyal, you a genius. You do know, you do know that they don’t want you to have lunch. I’m keeping it real with you, so what you going do is have lunch. Always remember in the jungle there’s a lot of they in there, after you overcome they, you will make it to paradise. We the best music.
Proxima Nova
ready
<style>
  * {
    font-family: 'Proxima Nova' !important;
    word-wrap: break-word;
  }
  p {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 1rem;
    font-size: 18px !important;
    
  }
</style>

# AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
# 1234567890',.<>/?;':"[]{}-=_+!@#$%^&*()

Major key, don’t fall for the trap, stay focused. It’s the ones closest to you that want to see you fail. We the best. You do know, you do know that they don’t want you to have lunch. I’m keeping it real with you, so what you going do is have lunch. They will try to close the door on you, just open it. It’s important to use cocoa butter. It’s the key to more success, why not live smooth? Why live rough? Look at the sunset, life is amazing, life is beautiful, life is what you make it. You should never complain, complaining is a weak emotion, you got life, we breathing, we blessed.

Using Proxima Nova

When using Proxima Nova in your HTML web pages, you’ll need to include the following code snippet somewhere in <head> tag of your HTML:

<link rel="stylesheet" href="https://use.typekit.net/ram1occ.css">

When using Proxima Nova in your HTML emails, you’ll need to include the following code snippet near the top of the HTML:

<style> @import url("https://use.typekit.net/ram1occ.css"); </style>

Typography Fallbacks

  • Helvetica. A Arial, sans-serif fallback font stack is used when Helvetica isn’t supported in the target browser.
  • Proxima Nova. A 'Helvetica', Arial, sans-serif fallback font stack is used when Proxima Nova isn’t supported in the target browser or if Typekit fails to load.

Headers

Headline 1 - 4
ready
<h1>Headline 1</h1>
<h2>Headline 2</h2>
<h3>Headline 3</h3>
<h4>Headline 3</h4>

Headlines 1 through 4 are larger than the body text and are reserved for short, important text.

Headline 4
planned
<h4>Headline 4</h4>

Headline 4 is inline style.

Headline with Subtitle
planned
<h1>Headline</h1>
<div class="subtitle">Subtitle</div>

A Subtitle can be used directly after a Headline.

Body Text

Hyperlinks