Typography

We use Avenir Next in regular, medium and demi bold weights. Its characteristic clear, open letterforms and letter spacing help communicate a consistent Co-op brand identity.

If you need the Avenir font contact design@coopdigital.co.uk.

Typesetting basics

To make digital content accessible and easy to read:

  • range text left
  • use sentence case
  • use white space carefully around typography

This helps us design for everyone.

Typographic scale

We have a typographic scale to create clear structure and coherence for readers. We have a recommended scale for larger and smaller devices, but you can add more breakpoints and sizes in the code to suit your user needs.

‘Just as regular use of time provides rhythm in music, so regular use of space provides rhythm in typography, and without rhythm the listener, or the reader, becomes disorientated and lost.’

Richard Rutter - Compose to a Vertical Rhythm

All of our spacing between lines, paragraphs and headings is in multiples of 8px. That is known as the baseline grid. This baseline allows us to space our text, images or any other page elements consistently.

The example below shows the line height and margin values above 768px. 768px and below these values are divided by 2.

Example Default typographic scale

Heading, typeface, line height and margins font size to use above 768px viewport font size to use below 768px viewport

H Mega - Demi Bold

60px

36px

H1 - Demi Bold

46px

30px

H2 - Demi Bold

26px

22px

H3 - Demi Bold

22px

20px

H4 - Demi Bold

22px

20px

H5 - Demi Bold

22px

20px

H6 - Demi Bold

16px

13px

Intro Para - Regular

26px

22px

Paragraph - Regular

20px

16px

Horizontal space

‘The measure’ is the number of characters in a single line of a column of text.

‘Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.’

The Elements of Typographic Style Applied to the Web - 2.1.2 Choose a comfortable measure

Text shouldn't run over more than about 7 columns in our grid (on large devices). It's more comfortable for people reading on screen as eye movement is kept to a minimum. A good tool to help you test your measure is the Google Chrome extension 45 to 75.

Example 45 to 75 characters over 7 grid columns

What is a Co-operative?

A co-operative (co-op) is a different kind of business. Its owners, members – have a say in how it's run. Members make the decisions, not shareholders or investors. Voting is fair and equal because voting rights can't be bought. Voting is ‘one member, one vote’.

Profits mean members receive money, rewards and offers and a co-op can support its local community.

Vertical space

All of our spacing is derived from multiples of 8px. This is our baseline grid. This baseline allows us to space our text, images or any other page elements using these values.

“Just as regular use of time provides rhythm in music, so regular use of space provides rhythm in typography, and without rhythm the listener, or the reader, becomes disorientated and lost.”

Richard Rutter - Compose to a Vertical Rhythm

Our base font size 20px is set on a 32px linespacing (the height of the line that the text sits on) — 8 x 4 = 32.

You can create your own scale in your custom stylesheet by overriding the values in our scale varibles in the Toolkit. But, you must have a good reason to do this and compose it to a well thought-out scale.

Example Text set on the baseline grid

What is a Co-operative?

A co-operative (co-op) is a different kind of business. Its owners, members – have a say in how it's run. Members make the decisions, not shareholders or investors. Voting is fair and equal because voting rights can't be bought. Voting is ‘one member, one vote’.

Profits mean members receive money, rewards and offers and a co-op can support its local community.

Titles

Titles should always be sentence case and descriptive of the contents of the page — someone should be able to get an indication of whether the page is for them by reading the title. Find out how we write titles.

Orphaned words

One word, if left on the last line of a title or paragraph, is known as an ‘orphan’. Avoid orphaned words. Fix them by adding a non-breaking space ( ) between the final 2 words.

Example

What is a design manual?

What is a design manual?

Lists

Lists are an effective way of breaking up content — they make it easier for users to scan and find information.

Use bullet points to break up a list of items, or a numbered list to indicate a logical sequence. Find out how we write and structure lists.

Quotations

When you type ' on your computer it is not a true quotation mark. True quotes are called smart quotes and the right one must be used according to whether you are opening (‘) or closing (’) a quotation. Find out about HTML character codes.

Example Quote: 20px (32px line spacing) in Avenir medium

‘Use hanging punctuation to style a quotation. A “quote within a quote” should use double quotation marks.’

The Design Team

Example Quote: 26px (40px line spacing) Avenir medium

‘Or you can have a big one.’

The Design Team

Horizontal rules

Horizontal rules can be used to separate areas of content. Use them sparingly. They must appear as solid grey #c4c4c4. Do not use dotted or dashed horizontal rules.

Code

The typographic scale can be optimised for different device sizes. For more information see the front-end toolkit code.

Feedback

Did you find this useful?