Typography

Typeface

The Design System uses Google’s Roboto font. It's free and open source.  

Roboto is a sans-serif font, which is designed to be accessible. 

Scottish Government directorates and policy areas are expected to use Roboto in online services.  

Designing services using a different font  

We recommend that you use Roboto, but you can implement the Design System with a different font if you’re not a Scottish Government directorate and policy area. 

If you use a different font, it must be readable and legible. Avoid decorative or cursive fonts.  

You must also: 

• use the sizes and line heights in the font rules 
• test the font across all components and patterns  
• do accessibility testing with service users

Read more about fonts and accessibility on Scope and typefaces and readability on WebAIM. 

Font rules

These tables show the font sizes, line heights and weights used in the Design System.

Headings

Use headings and sub-headings to create visual hierarchy in your content.

The main headings on a website are H1. You should only use one H1 per page. H2 and H3 are used for subheadings.

Headings should be written in sentence case, with a capital letter and no full stop.  

Find out more about structuring content with headings on GOV.UK. 

HTML markup for headings 

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) 

<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 heading override classes. 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 in the HTML. 

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

The default body paragraph font size is 16px on smaller screens and 19px on larger 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>

Lead paragraph

A lead paragraph (also known as the ‘leader’) is a short summary of the content at the top of the page.  

There should be one lead paragraph per page. The lead paragraph should:  

• be as concise as possible (usually one sentence) 
• be 19px on smaller screens and 24px on larger screens 
• start with a capital letter 
• be sentence case  
• have a full stop at the end of each sentence 

For example, all components and patterns in the Design System have a lead paragraph.

<p class="ds_leader">
    Allow users to add more input fields to complete an online form.
</p>

Small type

Small type should be used sparingly, for example:  

• when there’s limited space for content within a component 
• for metadata  

The minimum font size for small type is 14px on smaller screens and 16px on larger screens. 

<p class="ds_small">Find out more if you do not 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.

Read more about designing accessible links on GOV.UK. 

<p>If you get an enhanced award for the mobility part, you can <a href="https://www.mygov.scot/lease-accessible-vehicles">apply to lease an accessible vehicle</a>.</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 only when the sequence or count of items are important, such as steps in a process that must be in a defined order. 

Use bullet points if the order of the steps is not important. 

You do not need to use a lead-in line for numbered lists.  

End each item in a numbered list with a full stop, because each one is a complete sentence.  

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