Amara styleguide

Typography

Font families

Amara uses two font families:

  • Raleway: Used for headers. Provides the clear messaging of a sans serif, but with a subtle, accessible playfulness.
  • Open sans: Used copy, open sans provides a more precise counterpoint to Raleway’s unconventional nature, and champions readability, especially in smaller point sizes.

Header fonts

  • h3: 20px
  • h2: 24px
  • h1: 36px
  • jumbo (css class: jumbo): 48px
  • mega (css class: mega): 72px

Body fonts

  • Base: 16px
  • Large (css class: text-large): 20px (large text on the marketing pages)
  • Small (css class: text-small): 14px (less prominent elements like filter fields)
  • Tiny (css class: text-tiny): 13px (help text, and other fine print)
  • Bold (<strong>): 700 weight -- use for emphasis
  • Light: 300 weight -- use to de-emphasize. We use this by default for the small/tiny text

Examples:

Example


<h1 class="mega">Mega headers</h1>
<h1 class="jumbo">Jumbo headers</h1>
<h1>Primary headers</h1>
<h2>Secondary headers</h1>
<h3>Tertiary headers</h1>

<hr>
<p><span class="text-large">Large body copy. </span>Normal body copy.  <span class="text-small">Small body copy.</span> <span class="text-tiny">Tiny body copy.</span></p>

Mega headers

Jumbo headers

Primary headers

Secondary headers

Tertiary headers

Large body copy. Normal body copy. Small body copy. Tiny body copy.