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’.
Sample HTML
<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.
Sample HTML
<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.
Sample HTML
<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.
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
Leader styling should apply to introductory content near the top of the page. The leader font size used by the Design System is 24px.
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="/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>
Feedback, help or support
If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot