Typography | Digital Design Manual

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

Headings

The page should only have 1 heading 1 tag or heading1 class
the page should only have up to 3 heading 2 tags or heading2, heading3 class
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

Output
HTML

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.

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

Output
HTML

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

Output
HTML

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

Output
HTML

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

Output
HTML

This is a list item
This is a list item
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>
                                                                