Styles menu
Typography
Use typography to create hierarchy, structure pages and make content easier to read.
Typeface
The Design Standard uses Google’s Poppins font. It's free and open source.
Poppins is a sans-serif font, which is designed to be accessible.
Font rules
These tables show the font sizes, line heights and weights used in the Design Standard.
Font rules for small and large screens
| Element | Font size - small (320px - 991px) |
Font size - large (> 992px) |
Line height | Weight | Colour |
|---|---|---|---|---|---|
| H1 | 2rem / 32px | 2.5rem / 40px | 3.5rem / 56px | 600 | #016574 |
| H2 | 1.7rem / 27.2px | 1.7rem / 27.2px | 3rem / 48px | 600 | #016574 |
| H3 | 1.35rem / 21.6px | 1.5rem / 24px | 1.875rem / 30px | 600 | #012b31 |
| Body | 1rem / 16px | 1rem / 16px | 1.875rem / 30px | 400 | #585856 |
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.
HTML markup for headings
Use the correct HTML heading level in your markup, this helps all users to make sense of your content.
Links
Link styling is scottish teal and underlined by default. If a link appears at the end of a sentence, the full stop should be outside the link.
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.
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.