Warning! Some of the style content on this page refers to out of date material. For the most up to date reference please refer to our Style Guide

Typography

How to use our typographic styles. Line height, padding and margins of elements are taken care of in the packaged stylesheets, so will not need to be edited.

Fonts

Fonts

Our font stack uses two typefaces: our own version of Chevin Pro and Verdana. Verdana was created specifically to address the challenges of on-screen display. Its generous width, character spacing and superior x-height (tall lower-case characters) is key to its on screen legibility.

Usage is as follows:

Headings: AQA Chevin Pro medium, colour Primary (Purple).
Body copy and links: Verdana, colour Black grey, 1 rem.
The H1 heading to body copy ratio is 2.9.
Standfirst: Verdana regular, colour Black grey, 1.1 rem.
Definition term <dt>: Verdana font-weight 700, colour Black grey, 1 rem.
Quotes: AQA Chevin Pro demibold italic, colour Primary (Purple), 1 rem.

Our house style guide gives recommendations on when to use italics. It also recommends using bold 'occasionally for emphasis'.

Headings

All HTML headings, h1 to h6, are available.

Example

h1. Very large 2.6 rem

h2. Large 2 rem

h3. Medium 1.7 rem

h4. Moderate 1.45 rem

h5. Small 1.28 rem

h6. Tiny 1.15 rem

Code example

<h1>h1. Very large 2.6 rem</h1>
<h2>h2. Large 2 rem</h2>
<h3>h3. Medium 1.7 rem</h3>
<h4>h4. Moderate 1.45 rem</h4>
<h5>h5. Small 1.28 rem</h5>
<h6>h6. Tiny 1.15 rem</h6>

Paragraph

Two examples are given: a standard paragraph and a standfirst paragraph.

Standard paragraph

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales aliquam vestibulum. Nam a porta elit. Nullam eleifend finibus quam, at pellentesque dui. In tincidunt, magna ac efficitur varius, risus velit rutrum nunc, ac sollicitudin purus odio a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam pellentesque ante mi, quis ultricies massa pretium id.

Code example

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales aliquam vestibulum. Nam a porta elit. Nullam eleifend finibus quam, at pellentesque dui. In tincidunt, magna ac efficitur varius, risus velit rutrum nunc, ac sollicitudin purus odio a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam pellentesque ante mi, quis ultricies massa pretium id.</p>

Standfirst paragraph

Use this for paragraphs that need to stand out, such as an introductory summary at the start of a page.

Example

Code example

<p class="standfirst">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales aliquam vestibulum. Nam a porta elit. Nullam eleifend finibus quam, at pellentesque dui. In tincidunt, magna ac efficitur varius, risus velit rutrum nunc, ac sollicitudin purus odio a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam pellentesque ante mi, quis ultricies massa pretium id.</p>

Lists

Some examples are given below: Bare list, Unordered list, styled with icon list, css style c-link, Ordered list and Definition list.

Bare list

This is a list with no styling.

Example

List item with a much longer description or more content.
List item
List item
- Nested list item
- Nested list item
List item

Code example

<ul class="o-list-bare">
    <li>List item with a much longer description or more content.</li>
    <li>List item</li>
    <li>List item
        <ul class="o-list-bare">
            <li>Nested list item</li>
            <li>Nested list item</li>
        </ul>
    </li>
    <li>List item</li>
</ul>

Unordered list

Use this when the order of list items does not matter.

Example

List item with a much longer description or more content.
List item
List item
- Nested list item
- Nested list item
List item

Code example

<ul>
    <li>List item with a much longer description or more content.</li>
    <li>List item</li>
    <li>List item
        <ul>
            <li>Nested list item</li>
            <li>Nested list item</li>
        </ul>
    </li>
    <li>List item</li>
</ul>

Ordered list

Use this when the order of list items does matter.

Example

List item with a much longer description or more content.
List item
List item
1. Nested List Item
2. Nested List Item
List item

Code example

<ol>
    <li>List item with a much longer description or more content.</li>
    <li>List item</li>
    <li>List item
        <ol>
            <li>Nested List Item</li>
            <li>Nested List Item</li>
        </ol>
    </li>
    <li>List item</li>
</ol>

Definition list

Use this for defining terms.

Example

Living Style Guide: Living Style Guides are here to help us transform our front-end codebase into well-described pattern libraries with minimal efforts.

Code example

<dl>
    <dt>Living Style Guide</dt>
    <dd>Living Style Guides are here to help us transform our front-end codebase into well-described pattern libraries with minimal efforts.</dd>
</dl>

Quotes

Two examples are given: a block quote and an inline quote.

Block quote

Use this for longer quotes that may need paragraph breaks. Wrap the source of the quote in the cite element.

Example

Those people who think they know everything are a great annoyance to those of us who do.Isaac Asimov

Code example

<blockquote>Those people who think they know everything are a great annoyance to those of us who do.<cite>Isaac Asimov</cite></blockquote>

Inline quote

Use this for short inline quotes.

Example

This question is, what is the question?

Code example

<q>This question is, what is the question?</q>

Abbreviations

Use the <abbr> tag around abbreviations so an explanation can be added. This uses the tooltip functionality.

Example

Applying the DSM framework will ensure we achieve a great user experience and a responsive website

Code example

<p>Applying the <abbr rel="tooltip" title="Digital Service Manual">DSM</abbr> framework will ensure we achieve a great user experience and a responsive website</p>