Typography

Government websites share a common need for easily scannable and highly legible typography. Stately’s typography attempts to elevate headings, make paragraphs clear and consistent, and allow for an immediately recognizable document structure.

Typefaces

Stately uses two contrasting typefaces: Lato and Lora. Their font files served for free through Google Fonts.

Lato

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Lora

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

These two typefaces were chosen to create contrast between heading and body elements (see below).

Headings

Stately has two types of headings: text headings, and display headings. Text headings are used to help structure passages of text, and display headings are for further promotion or to call out a headline. By default, all headings in markdown posts and pages are text-headings.

Text headings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<!-- Markdown example: -->
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Display headings

<h1 class="display-alpha">Display heading alpha</h1>
<h2 class="display-beta">Display heading beta</h2>

Display heading alpha

Display heading beta

Paragraphs

Similar to headings, Stately has two types of paragraphs: intro paragraphs, and regular paragraphs. Intro paragraphs are used to make the first part of a long passage of text stand out (see lede). By default all paragraphs in markdown pages and posts are regular paragraphs.

Intro paragraph

<p class="text-intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Regular paragraph

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lists

Stately has a few lists inherited from Primer, with some additional custom list styles

Ordered list (from Primer)

<ol>
  <li>Lorem</li>
  <li>How long lines<br>will break.</li>
  <li>dolor</li>
  <li>sit amet</li>
</ol>
<!-- Markdown example: -->
  1. Lorem
  1. How long lines<br>will break.
  1. dolor
  1. sit amet
  1. Lorem
  2. How long lines
    will break.
  3. dolor
  4. sit amet

Unordered list (from Primer)

<ul>
  <li>Lorem</li>
  <li>How long lines<br>will break.</li>
  <li>dolor</li>
  <li>sit amet</li>
</ul>
<!-- Markdown example: -->
  - Lorem
  - How long lines<br>will break.
  - dolor
  - sit amet
  • Lorem
  • How long lines
    will break.
  • dolor
  • sit amet

Unordered list - styled

A more stylized version of an ol might be used in content that explains steps or lists requirements that require a specific order.

<ol class="ol-styled">
  <li>Lorem</li>
  <li>How long lines<br>will break.</li>
  <li>dolor</li>
  <li>sit amet</li>
</ol>
  1. Lorem
  2. How long lines
    will break.
  3. dolor
  4. sit amet

Checklist

A checklist is best used for content that explains the satisfaction of requirements, needs met, or other another task-based list.

<ul class="list-checklist">
  <li>Lorem</li>
  <li>How long lines<br>will break.</li>
  <li>dolor</li>
  <li>sit amet</li>
</ul>
  • Lorem
  • How long lines
    will break.
  • dolor
  • sit amet

Quotes

Block quote

For long blocks of quoted text a standard <blockquote> will set the quote off from the surrounding text in style, color, indentation, and border. An equivalent .blockquote class is also included to override css or apply to a different element type.

<blockquote>
  This is a block quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati eius, ratione nulla libero, ab repudiandae ipsum laudantium, ea reiciendis est perspiciatis dignissimos at ullam dolorem aperiam, sit commodi maxime tenetur?
</blockquote>
<!-- Markdown example: -->
> This is a block quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati eius, ratione nulla libero, ab repudiandae ipsum laudantium, ea reiciendis est perspiciatis dignissimos at ullam dolorem aperiam, sit commodi maxime tenetur?
This is a block quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati eius, ratione nulla libero, ab repudiandae ipsum laudantium, ea reiciendis est perspiciatis dignissimos at ullam dolorem aperiam, sit commodi maxime tenetur?

Pull quote

For shorter, more emphasized quotes use a the .pullquote css class to style the text appropriately. Additionally, combine utility classes like float- and col- to size position the text.

<blockquote class="pullquote col-6 float-right">
  This is a pull quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</blockquote>
This is a pull quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit.