Typography

Here is a list of the typography related information and how to use them.

Font

South Gloucestershire Council website uses the Google font Lato for all of its digital typography.

Email typography

For email typography, we use a font stack of Lato, Calibri, sans-serif

If your service is a seperate website, then you can use your own desired font family for headings, but you must use Lato for the body copy.

To embed Lato on your website you can install it via Google fonts and reference it in the head of the document and also the stylesheet

<link href=”https://fonts.googleapis.com/css?family=Lato” rel=”stylesheet”>

Headings

  • The page should only have 1 heading 1 tag
  • the page should only have up to 3 heading 2 tags
  • the page can have multiple heading 3,4,5,6 tags
  • they should appear in sequential order in the HTML markup for SEO benefits.

Example

This is an h1 heading on the page

This is an h2 heading on the page

This is an h3 heading on the page

This is an h4 heading on the page

                                                                
                                                                <h1>This is an h1 heading on the page</h1>
<h2>This is an h2 heading on the page</h2>
<h3>This is an h3 heading on the page</h3>
<h4>This is an h4 heading on the page</h4>

Headings with captions

Sometimes you will want to use a caption directly underneath the heading.

Example

This is the heading 2

This is the caption accompanying it

                                                                
                                                                <h2>This is the heading 2</h2>
<p class="lead">This is the caption accompanying it</p>

Paragraphs

We use rem units for scaling and therefor the document root is 16px, and the font size is in rem units.

You can use this link to convert what rem size you need.

https://offroadcode.com/rem-calculator/

Example

This is a paragraph and there is an inline style in the HTML tab to show what it outputs as.

                                                                
                                                                <p>This is a paragraph and there is an inline style in the HTML tab to show what it outputs as.</p>
<style>
p {
    font-family: 'Lato';
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
}
</style>

Links

Links are used inline with body text to link a user to another part of the website/external website.

All link should have a title attribute.

Example

This is some text this is the link

                                                                
                                                                <p>This is some text <a href="/" title="This is the link title">this is the link</a></p>

Bulleted lists

Example

  • This is a list item
  • This is a list item
                                                                
                                                                <ul>
<li>This is a list item</li>
<li>This is a list item</li>
</ul>

Organised lists

Example

  1. This is a list item
  2. This is a list item
  3. This is a list item
                                                                
                                                                <ol>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
</ol>