Information

You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

Typography

The Design System has clear typography that helps to make text easier to read.

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.

Sample HTML

<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.

Sample HTML

<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.

Sample HTML

<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.

Sample HTML

<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.

Sample HTML

<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.

Sample HTML

<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.

Sample HTML

<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.

Sample HTML

<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.

Font rules for small viewports
Element Font size Line height Weight
H1 30px 40px bold/700
H2 22px 32px bold/700
H3 19px 24px bold/700
H4 16px 24px bold/700
H5 14px 24px bold/700
Leader 19px 32px light/300
Body 16px 24px regular/400
Small 14px 24px regular/400
Font rules for large viewports
Element Font size Line height Weight
H1 44px 56px bold/700
H2 30px 40px bold/700
H3 22px 32px bold/700
H4 19px 32px bold/700
H5 16px 24px bold/700
Leader 24px 40px light/300
Body 19px 32px regular/400
Small 16px 24px regular/400
Back to top