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.
Stately uses two contrasting typefaces: Lato and Lora. Their font files served for free through Google Fonts.
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
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).
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.
<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<h1 class="display-alpha">Display heading alpha</h1>
<h2 class="display-beta">Display heading beta</h2>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.
<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.
<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.
Stately has a few lists inherited from Primer, with some additional custom list styles
<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<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 ametA 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>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>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?
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.
Help improve its content by opening a Pull Request on GitHub.