Typography

Font

We use the Roboto font, which is a free open source font developed by Google for use on screen. It has different weight options.

If your service is going to be a subdomain of either gov.scot or mygov.scot then you must use Roboto as your font.

Headings

Most websites use scaled headings to create a visual hierarchy of content. Headings should use HTML heading elements.

The main headings on a website are usually H1 size, with smaller sizes, such as H2 and H3, used for subheadings.

Hierarchical headings are helpful for accessibility and help all users to understand your content. Search engines may make use of them to understand the content of your site.

We write headings with a capital letter at the start. The only difference is we do not use full stops. This is the most popular way of writing headings online and is known as ‘sentence case’.

<h1 id="heading-1">Heading 1</h1>

<h2 id="heading-2">Heading 2</h2>

<h3 id="heading-3">Heading 3</h3>

<h4 id="heading-4">Heading 4</h4>

<h5 id="heading-5">Heading 5</h5>

Heading with captions

A caption is a piece of text above a page’s title. It shows when a heading is part of a larger section or group. For example mygov.scot uses a heading and caption on the ‘guide’ format.

<header class="ds_page-header">
    <span class="ds_page-header__label  ds_content-label">Guide</span>
    <h1 class="ds_page-header__title">Apply for or renew a disabled parking permit</h1>
</header>

You can see how to implement this on the page header component.

Heading with metadata

Some heading formats may also have supporting metadata shown beneath the main header. For example ‘Last updated’ underneath the page title.

<header class="ds_page-header">
    <span class="ds_page-header__label  ds_content-label">Guide</span>
    <h1 class="ds_page-header__title">Apply for or renew a disabled parking permit</h1>

    <dl class="ds_page-header__metadata  ds_metadata">
        <div class="ds_metadata__item">
            <dt class="ds_metadata__key">Last updated</dt>
            <dd class="ds_metadata__value">8 November 2016</dd>
        </div>
    </dl>
</header>

Paragraphs

Body

The default paragraph font size used by the Design System is 19px on larger screens and 16px on smaller screens.

<p>As a landlord, you can do background checks on any new tenants before they move in. This includes checking they're able to pay the rent.</p>

<p>A letting agent can help you with these background checks, if you choose to use one.</p>

Leader

Leader styling should apply to introductory content near the top of the page. The leader font size used by the Design System is 24px.

<p class="ds_leader">
    Different organisations can help your business to export. Who can help depends on what you’re trying to do.
</p>

Small

Small type should be used sparingly and when content is limited in space within a component.

<p class="ds_small">Find out more if you don't have a landlord registration number.</p>

Links

Link styling is blue and underlined by default. If a link appears at the end of a sentence, the full stop should be outside the link.

<p>If you need to <a href="/disabled-bus-pass/travelling-with-a-companion/">travel with a companion</a> you'll need supporting evidence.</p>

Lists

Use lists to make blocks of text easier to read.

Bulleted list

Introduce bulleted lists with a lead-in line ending in a colon. Start each item with a lowercase letter, and do not use a full stop at the end.

<p>You can use your Blue Badge to park in certain restricted areas for free, including:</p>

<ul> 
    <li>at on-street parking meters</li> 
    <li>in pay and display bays</li> 
    <li>in disabled parking spaces</li> 
    <li>on single and double yellow lines if there are no loading restrictions</li> 
</ul>

Numbered list

Use numbered lists instead of bulleted lists when the order of the items is important. You do not need to use a lead-in line for numbered lists. Items in a numbered list should end in a full stop, because each one should be a complete sentence.

<p>Follow these 3 steps to apply:</p>

<ol>
    <li>Create an account.</li>
    <li>Create and complete your planning proposal.</li>
    <li>Pay the application fee.</li>
</ol>