Typography

Headings, body text, lists, etc

Fonts

Fonts on stlouis-mo.gov are a combination of Open Sans and Merriweather. In general, Merriweather is used for headings, and Open Sans is used for body text.

Headings

Headings <h1> - <h5> are available for use. Pages should only have one h1 tag, and headings should be nested approrpiately. <h1> - <h4> use the font Merriweather.

Heading 1 Heading 2 Heading 3 Heading 4 Heading 5
Headings
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>

Page Summary

H1 tags are usually paired with a page summary paragraph, which outputs the page's description in larger text. Use the .page-summary class for this.

Services provided by City of St. Louis departments and agencies

Page Summary
<p class="page-summary">
    Services provided by City of St. Louis departments and agencies
</p>

Inline Text Elements

Some common inline text elements. The class .small can also be used in place of <small>, and is more commonly used on stlouis-mo.gov.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

This line is rendered as code.

Inline Text
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<p><code>This line is rendered as code.</code></p>

Blockquotes

Use blockquotes to quote content from another source. 

This is a quote from somewhere else. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Blockquote
<blockquote>
    This is a quote from somewhere else. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</blockquote>

Lists

Ordered and unordered lists. See also list groups.

Ordered List

  1. Item one
  2. Item two
    1. Sub-item one
    2. Sub-item two
  3. Item three

Unordered List

  • Item one
  • Item two
    • Sub-item one
    • Sub-item two
  • Item three
Lists
<!-- Ordered List -->
<ol>
    <li>Item one</li>
    <li>
        Item two
        <ol>
            <li>Sub-item one</li>
            <li>Sub-item two</li>
        </ol>
    </li>
    <li>Item three</li>
</ol>

<!-- Unordered List -->
<ul>
    <li>Item one</li>
    <li>
        Item two
        <ul>
            <li>Sub-item one</li>
            <li>Sub-item two</li>
        </ul>
    </li>
    <li>Item three</li>
</ul>

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.