Skip to main content

Typography

Always use the council colour palette.

Font​

If your service is a bristol.gov.uk subdomain you must use the TheSans font.

You should use an alternative typeface like Source Sans Pro or Arial for services that are publicly available on different domains.

If you’re not sure whether you should be using TheSans contact the Web Team.

Headings​

Mark headings semantically using the appropriate <h#> level HTML element. Style headings consistently to create a clear visual hierarchy throughout your service.

Write all headings in sentence case.

Heading 1

Heading 2

Heading 3

Heading 4

<h1 class="h1">heading size: 48px = 3rem</h1>
<h2 class="h2">heading size: 30px = 1.875rem</h2>
<h3 class="h3">heading size: 24px = 1.5rem</h3>
<h4 class="h4">heading size: 19px = 1.1875rem</h4>

Lists​

To remove default list styling, use .list-reset.

You may also use default list styling with nested circle bullets.

  • default-list bullet
  • default-list bullet
  • default-list bullet
  • default-list bullet
  • bullet
  • bullet
  • bullet
  • bullet
  • bullet
    • Nested hollow bullet
    • Nested hollow bullet
    • Nested hollow bullet
    • Nested hollow bullet
  • bullet
  • list-reset
  • list-reset
  • list-reset
  • list-reset
  • list-inline
  • list-inline
  • list-inline
  • list-inline
  1. ordered list
  2. ordered list
  3. ordered list
  4. ordered list
    1. Nested
    2. Nested
    3. Nested
    4. Nested
  • List
    1. Nested
    2. Nested
    3. Nested
    4. Nested
  • List
    1. Nested ordered
    2. Nested ordered
<ul class="default-list">
  <li>default-list bullet</li>
  <li>default-list bullet</li>
  <li>default-list bullet</li>
  <li>default-list bullet</li>
</ul>

<ul>
  <li>bullet</li>
  <li>bullet</li>
  <li>bullet</li>
  <li>bullet</li>
</ul>

<ul>
  <li>
    bullet
    <ul class="default-list">
      <li>Nested hollow bullet</li>
      <li>Nested hollow bullet</li>
      <li>Nested hollow bullet</li>
      <li>Nested hollow bullet</li>
    </ul>
  </li>
  <li>bullet</li>
</ul>

<ul>
  <li className="item"><a href="#">Item list with link</a></li>
  <li className="item"><a href="#">Item list with link</a></li>
  <li className="item"><a href="#">Item list with link</a></li>
  <li className="item"><a href="#">Item list with link</a></li>
</ul>

<ul class="list-reset">
  <li>list-reset</li>
  <li>list-reset</li>
  <li>list-reset</li>
  <li>list-reset</li>
</ul>

<ul class="list-inline">
  <li>list-inline</li>
  <li>list-inline</li>
  <li>list-inline</li>
  <li>list-inline</li>
</ul>

<ol>
  <li>ordered list</li>
  <li>ordered list</li>
  <li><a href="#_">ordered list</a></li>
  <li>
    <a href="#_">ordered list</a>
    <ol>
      <li>Nested</li>
      <li>Nested</li>
      <li>Nested</li>
      <li>Nested</li>
    </ol>
  </li>
</ol>

<ul>
  <li>
    List
    <ol>
      <li>Nested</li>
      <li>Nested</li>
      <li>Nested</li>
      <li>Nested</li>
    </ol>
  </li>
  <li>
    List
    <ol>
      <li>Nested ordered</li>
      <li>Nested ordered</li>
    </ol>
  </li>
</ul>

Paragraph​

The default paragraph font size is 19px on large screens and 16px on small screens

<p>Paragraph text</p>
<p class="paragraph">Paragraph text</p>
size: 19px = 1.1875rem
<p>Light copy colour</p>
<p class="lightcopy">Paragraph text</p>

Paragraph text

Paragraph text

Size​

Lead​

A lead paragraph is an introductory paragraph that you can use at the top of a page to summarise the content. Lead paragraphs use 24px type on desktop and should only be used once per page if needed.

<p class="lead">Lead text</p>
<small>Small text</small>
<small class="micro">Micro text</small>

Lead text

Small textMicro text

Weight​

As with the font size, you can change the font weight to regular or bold.

<p>Regular text</p>
<strong>Bold text</strong>

Regular text

Strong text

Links are blue and underlined by default. If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop.

<a href="#">Link</a>
Link

Block Quotes​

Use the class .quotetext when including a quote on the page. The font size will be increased by 180%.

<span class="quotetext">Some sample quote text here</span>
Some sample quote text here