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

Headings set a logical hierarchy in your content. It is important to use the correct HTML heading level in your markup. This helps all users to make sense of your content including:

• users of assistive technology
• bots (such as those used to automate indexing of sites for search companies)

The main headings on a website are usually H1 size, with smaller sizes, such as H2 and H3, used for subheadings. It is best practice to only have one H1 in a page.

We write headings in sentence case, with a capital letter at the start and no full stop at the end. This is the most popular way of writing headings online.

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

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

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

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

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

Heading override classes

The Design System has override classes for headings. They allow you to make any heading HTML element have the appearance of any other heading level. Use these to maintain the correct heading hierarchy, even when a design needs to change.

For example, you might have some H2 headings that suit your design better at a smaller size. You could add a class of ds_h3 to those H2 headings to make them use the same size and spacing styles as H3 headings.

<h2>This is a standard second-level heading (H2)</h2>

<h3>This is a standard third-level heading (H3)</h3>

<h2 class="ds_h3">This is a second-level heading using the H3 override class</h2>

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

You can apply leader styling to introductory content near the top of the page. Leader text is larger than body text.

<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="https://www.mygov.scot/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>

Font rules

The tables below contains all of the font sizes, line heights and font weights which we use to establish typographic hierarchy.