Overarching digital typography principles

Below are some overarching typography rules applicable to most RAC applications unless a template has been provided. These templates have their own clearly defined typography rules. However, in the absence of a template, please use the below principles as a guide.

Helpful tips:

  • Minimise the number of colours used within artwork
  • Copy should always be left aligned. Never centred or justified unless used within an approved brand template or within a table/graph
  • When text appears over a photograph, preference is to use RAC Yellow then White
  • Keep information grouped and the hierarchy of messaging clear
  • Underline hyperlinks only
  • Do not state/ write “click here” for a hyperlink. Recommend a subscription such as enter here or find out more
  • Refer to the RAC Verbal Mechanical Standards for additional information

Typography

Stag Sans Bold for headlines

Headlines

  • Always Stag Sans Bold ('Stag sans web' CSS font weight: 700)
  • Fallback font:"Arial Black"
  • Size is variable with responsive layouts in mind
  • Never use more than two colours within a heading
  • One headline per page
  • Font size should be consistent
  • No full-stop required
Yellow headline, white subtitle on photo background.
A Headline with a subtitle on an image.

Headline on photo. "Classic" in white, "Roadside Assistance" in yellow.
A split colour headline on image using RAC yellow for emphasis.

Headine variations
When there are three or more words in a headline, you may use these combinations:

  • Deepest diesel (for emphasis) and deep diesel. Only when on a light grey, white or RAC Yellow background
  • RAC Yellow (for emphasis) and white. Only when on a diesel or photographic background
  • If there is a subtitle to the headline, just use the emphasis colour for the whole headline and the complementary colour for the subtitle. See left for example

Header level 2

H2: Stag Sans Semibold ('Stag sans web' CSS font weight: 600), Deep diesel

Header level 3

H3: Stag Sans Semibold ('Stag sans web' CSS font weight: 600), Deep diesel

Header level 4

H4: Stag Sans Book ('Stag sans web' CSS font weight: 400), Deep diesel

Header level 5

H5: Stag Sans Book ('Stag sans web' CSS font weight: 400), Deep diesel

This is a lead paragraph, it can contain links such as this one, it can also contain strong and emphasis elements. It is not compulsory, it should be approximately two to three sentences.

Lead copy

  • Always Stag Light
  • Deep diesel
  • Fallback font: Stag Book then Arial
  • Line height: 1.4
  • Intro copy is not mandatory, and if used should ideally be 1-2 sentences or one paragraph only
  • Strong text: Stag Medium


One or two sentences can be used to introduce a particular section.

Heading sub-text

  • Stag Light (Stag web’CSS font weight: 300)
  • Deep diesel
  • Line height: 1.4

Pellentesque habitant strong morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Emphasis.

Quisque sit amet abbr est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, code, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, visited link, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Body copy

  • Stag Sans Light ('Stag sans web' CSS font weight: 300)
  • Deeper diesel
  • 18px 
    • If smaller is required, use Stag sans book to a minimum of 14px
  • Line height: 1.4
  • When heavier overall body is required: Stag Sans Book ('Stag sans web' CSS font weight: 400)
  • Link text:
    • underlined
    • colour: #0062b2 / rgb(0,98,178)
Quisque ut arcu hendrerit purus ornare porta. Fusce elementum in nulla eu imperdiet. Integer ex felis, tincidunt non venenatis eu, ornare non ligula. Nunc at tortor eu ipsum ornare vestibulum eget eget justo. Donec eu neque odio. Proin imperdiet felis eu libero finibus, a tempus tellus rutrum. Phasellus porttitor lacus in erat aliquet, eu facilisis lacus egestas.

Fine print

  • Stag Sans Light ('Stag sans web' CSS font weight: 300)
  • Deeper diesel
  • Minimum of 14px
    • Stag sans bookmay be used when greater contrast is required

Call to action (CTA)

  • Stag Sans Book
  • Deeper diesel on RAC Yellow
  • Deep diesel on white
  • Fallback font: Arial
  • See navigation for more on CTAs
  • Sentence case

Graphic type elements

Digital icons

Digital icons are generic, and should be used to indicate and denote interactivity and common user actions. They should be used and applied in a logical manner and must work at the smallest of scales (next to 14px text).

Approved icons can be located at fortawesome.github.io/Font-Awesome/icons/

Examples we are likely to use include:

fa-envelope
fa-bars
fa-home
fa-phone
fa-share-alt
fa-chevron-right
fa-plus

There are some icons we will not use under any circumstance. All other “icons” are considered graphics and should align to the digital standards for graphics. If concerned with what icon is relevant and appropriate, please check with the RAC Digital and Creative Services team.

Lists

The following are all the available styles of lists.

Unordered list

A list of items in which the order does not explicitly matter.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Curabitur laoreet consequat augue a ultricies
    • Sed dapibus fringilla nunc
    • Maecenas ac euismod elit
  • Vestibulum auctor dapibus neque.
Ordered list

A list of items in which the order does explicitly matter.

  1. Firstly, non convallis arcu malesuada
  2. Phasellus non tellus nulla
  3. Nulla tincidunt lacus non libero dictum, ac feugiat enim mattis
    1. Proin eu magna dignissim
    2. sodales erat sit amet
    3. Nulla dictum neque
  4. Ordered list item 4
Icon list

A list of items with icons instead of bullets, any font awesome icon can be used.

  • Suspendisse id libero nec lorem rhoncus
  • Nam ut ex efficitur
  • Mauris et lacus id felis
  • Commodo est a, viverra nisl

This list can also be used with links.

Inline list

Place all list items on a single line with some light padding.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
Description list

A list of terms with their associated descriptions.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod, vitae varius eros scelerisque a. Morbi elementum nisi quis leo volutpat, id consequat lectus cursus.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.