You are here

Typography

The style sheets on CLA sites define the font family, weight, and color of all type content. The following sections show how to use those default styles effectively.

The typeface used on all CLA pages is Source Sans Pro in a range of weights and colors.

To make a quality typeface design, mix a vat of math, mojo, and a bit of wizardry.

Normal 400

Normal 400 Italic

Semi-Bold 600

Bold 700

Bold 700 Italic

Source Sans Pro, Adobe's first open source typeface family, was designed by Paul D. Hunt. It is a sans serif typeface intended to work well in user interfaces.

Headers

Headers are used for heirarchy — not for size styling. There is a default set of header sizes and weights that is applied to every page. Within the page are different content types (articles, sections, panels, etc.) which may have their own set of header styles defined. This allows for strict control over heirarchy within sections of a page and differentiates between these sections and content types.

Header 1

<h1>Header 1</h1>

Header 1 is available only as a page title and its use is determined by the stylesheet and Drupal. H1 is not available as a formatting option in the WYSIWYG editor and should not be entered as markup into the content of a page.

Header 2

<h2>Header 2</h2>

Header 2 is used as the top-most hierarchical header within a body of content. It may be used to split up content on a page into manageable sections or to indicate a change of topic.

Header 3

<h3>Header 3</h3>
NOTES

Header 4

<h4>Header 4</h4>
NOTES
Header 5
<h5>Header 5</h5>
NOTES
Header 6
<h6>Header 6</h6>
NOTES

Body

Regular paragraph content
<p>Paragraph</p>

All site content which is meant to be read as body copy must be in paragraph markup.

Emphasized bold content
<strong>Bold</strong>

Do not use the semantically different <b> tag for emphasized type.

Emphasized italic content
<em>Italic</em>

Do not use the semantically different <i> tag for emphasized type.

Why can't I change color, size, etc.?

Type styles are set to specific accessibility and design standards to create a consistent design system across all CLA sites. We avoid communication inconsistencies and confusion by standardizing the look and feel of all type.