Typography

Fonts

Our brand font is Lato. Lato is published under the Open Font License by the type foundry tyPoland (with support from Google).

The Lato Family - a free Google Font. ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
[email protected]#$%^&*()+=/?

<-- add this link to the <head> section -->
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
link(href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic', rel='stylesheet', type='text/css')

/* note this css is what is compiled from scss,
these classes do not exist as they are mixins */

.latolight {
  font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 300;
  font-style: normal;
}
.latolight-italic {
  font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 300;
  font-style: italic;
}
.latomedium {
  font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
}
.latomedium-italic  {
  font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  font-style: italic;
}
.latobold {
  font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
}
.latobold-italic {
  font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 700;
  font-style: italic;
}
/* mixins for standard fonts.
To use, add @include mixin name, example @include latolight; */

@mixin latolight {
  font: {
    family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    weight: 300;
    style: normal;
  }
}
@mixin latolight-italic {
  font: {
    family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    weight: 300;
    style: italic;
  }
}
@mixin latomedium {
  font: {
    family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    weight: 400;
    style: normal;
  }
}
@mixin latomedium-italic {
  font: {
    family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    weight: 400;
    style: italic;
  }
}
@mixin latobold {
  font: {
    family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    weight: 700;
    style: normal;
  }
}
@mixin latobold-italic {
  font: {
    family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    weight: 700;
    style: italic;
  }
}

Headings

Using proper typography hierarchy makes information more structured and easier to understand. Generally page titles us h1, section titles use h2, sections are divided with h3, and so on.

Page Title (h1)

Section Title (h2)

Section description (h3)

Section emphasis (h4)

<h1>Page Title (h1)</h1>
<h2>Section Title (h2)</h2>
<h3>Section description (h3)</h3>
<h4>Section emphasis (h4)</h4>
h1 Page Title (h1)
h2 Section Title (h2)
h3 Section description (h3)
h4 Section emphasis (h4)
h1 {
  font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 2.625em;
  color: #0099ff;
  font-style: normal;
  letter-spacing: 1px;
}

h2 {
  font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  color: #0099ff;
  font-size: 1rem;
  letter-spacing: 1px;
}

h3 {
  font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1.125em;
  line-height: 2.063em;
  color: #999cab;
  letter-spacing: 1px;
}

h4 {
  font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  font-size: .75em;
  line-height: 1em;
  color: #999cab;
  letter-spacing: 1px;
}
h1 {
  @include latolight;
  font-size: 2.625em;
  color: $blue;
  font-style: normal;
  letter-spacing: 1px;
}
h2 {
  @include latomedium;
  text-transform: uppercase;
  color: $blue;
  font-size: 1rem;
  letter-spacing: 1px;
}
h3 {
  @include latomedium-italic;
  font-size: 1.125em;
  line-height:2.063em;
  color: $gray;
  letter-spacing: 1px;
}
h4 {
  @include latomedium;
  text-transform: uppercase;
  font-size: .75em;
  line-height:1em;
  color: $gray;
  letter-spacing: 1px;
 }

Body Copy

The default body text is 17px. For optimum reading length, the paragraph-width should never exceed 90 characters.