Page Loading

Headings

Headings introduce sections of content so users know what to expect. They make content easier to scan and easier for assistive technology to navigate.

Here's an example of a H2

Here's an example of a H3

Here's an example of a H4

See the end of this page for more detailed examples of how headings should appear on different sites and with different components. 

How to use headings

Headings should be used to break up the content on a page into sizeable chunks of related information.  

Headings should be:

  • Clearly marked as H1, H2, H3 and so on, without skipping any levels. If you’re not sure how to do this, see our guidelines on writing accessible content  
  • Written in sentence case – don’t use all capitals or capitalise the first letter of every word
  • Clear and meaningful, so avoid puns and ‘clever’ headings.  

Read more about writing headings in our content guidelines. opens in a new window  

You can read more about the size, font weight, line height and spacing of different heading levels in our typography guidelines. If you’re a content editor, these will be pre-set in the CMS so you shouldn’t need to manually change any of the typography.  

Adding headings in the CMS

There are a few ways to add headings:

  • Using the title component already included in certain component templates (such as cards, inset text, accordions, copy, 50/50s)
  • Using the title template for a heading that sits in its own panel
  • Adding a title component to an existing panel, container or component 
  • Using the heading functionality in the rich text editor for text components

Where headings appear in a panel (rather than within a component like a card) they should be aligned to the left side of the page as standard. We do this by adding a container to the panel, and adding the title component inside a container. We then give the container a span of 8. 

If the heading appears within a component, always follow the component guidelines first. For example, in the stats component, headings should be centre justified and in the centre of the page, because this follows the stats guidelines.

There are a few ways to add headings:

  • Using the title component already included in certain component templates (such as cards, inset text, accordions, copy, 50/50s)
  • Using the title template for a heading that sits in its own panel
  • Adding a title component to an existing panel, container or component 
  • Using the heading functionality in the rich text editor for text components

Where headings appear in a panel (rather than within a component like a card) they should be aligned to the centre of the page, but left justified. This happens automatically when you apply a span of 8 to the panel.

If the heading appears within a component, always follow the component guidelines first. For example:

  • In the stats component, headings should be centre justified and in the centre of the page, because this is how stats are aligned
  • In the card component, headings should be left justified and sit on the left hand side, as this is how cards are aligned

Heading modifier rules

If your heading appears within another component, like an accordion, a card or a block of paragraph text, follow the guidelines for that component. This should be the most common approach, since headings should almost always be followed by some kind of content. However, if the heading appears in a panel on its own due to the layout of your page, here are the modifiers you should use. 

  • Background: default, white (‘none’), grey (‘background’), primary, primary-variant
  • Grid span: 8 
    • Standard - applied at container level. Span removed on pages with left hand navigation
    • SDI - applied at panel level
  • Padding: default, unless required to improve layout  
  • Alignment: default 

Accessibility

Using sentence case makes it easier to read headings quickly. All caps can be especially difficult for people with vision impairments or cognitive disorders like dyslexia to read.  

Using the correct heading structure allows screen readers to properly scan and navigate the page, so that users using this technology can understand what’s on the page.  

We’ve designed our heading line height to be 1.5 times the font size, which creates more space and makes headings easier to read.  

Using clear, descriptive headings makes it easier to scan content for all users, as well as search engines.  

Find out more about writing accessible headings  

Here's how headings look on sites like Scottish Enterprise and Find Business Support

This is our standard approach to headings. They should be left-justified and sit on the left side of the page. Applying an 8 span to the container rather than the panel gives this effect.

This is how it should appear on its own or with paragraph text. However, if you're adding a heading to a component, you should follow the rules for that component. 

Here's how a heading looks on a card panel

It's left aligned, because the card component is left aligned. 

Here's how a heading looks with a stats component

Here, the heading is centre justified and centre aligned, following the guidelines for that component. 

  • Stat heading

  • Stat heading

  • Stat heading

Here's how a heading looks on the SDI website

The heading is still left-justified, but the 8 span on the panel means it sits in the centre columns of the page. This is how it should appear on its own or with paragraph text. However, always follow the guidelines for the component the heading appears in. The next example shows how it look different in a card panel because it's following the card component guidelines. 

Here's how it looks on a card panel

It's left aligned, because the card component is left aligned - even though it appears on the SDI site.

Here's how a heading looks with a stats component

Here, the heading is centre justified and centre aligned, following the guidelines for that component. 

  • Stat heading

  • Stat heading

  • Stat heading