Skip to contentSkip to footer
Give feedbackv3.0.2

Typography

We use Open Sans - it’s a sans-serif font chosen for legibility and consistency in online and offline applications. The font comes in various weights, but we only use 4 of these.

When calling in the font weights or any of the typographic styles in LESS, be sure to use the variable rather than the font weight directly.

Open Sans 400 @font-weight-base

Open Sans 600 @font-weight-bold

Open Sans 700 @font-weight-bolder

Open Sans 800 @font-weight-boldest

h1 for page titles @font-size-h1

h2 sub header, for section titles @font-size-h2

h3 for headings within sections @font-size-h3

h4 @font-size-h4

h5 @font-size-h5

This is a paragraph of text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Sub header, for introducing content sections

This is a paragraph of text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

h3 header within sub header

This is a paragraph of text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Links

<ul>
	<li>This is a standard text <a href="#">with a link</a> and an external.</li>
	<li>This is a standard text <a href="#" class="a-external-link">with an external link</a>.</li>
	<li>This is a standard text <a href="#" class="a-file-doc">with a link to an unspecified file</a>.</li>
	<li>This is a standard text <a href="#" class="a-pdf-doc">with a link to a pdf document</a>.</li>
	<li>This is a standard text <a href="#" class="a-word-doc">with a link to a word document</a>.</li>
	<li>This is a standard text <a href="#" class="a-excel-doc">with a link to an excel document</a>.</li>
	<li>This is a standard text <a href="#" class="a-code-doc">with a link to a code document</a>.</li>
</ul>

Standard unordered list

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Standard ordered list

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit
    1. Lorem ipsum dolor sit amet
    2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet