Typography

Content style

Base typographic styles that should be used for all content pages.

For more details about Stag Sans, how we use it and license restrictions - see our typography guidance.

How to use this pattern

<h1-6> are used to create both visual and semantic structure so that users can easily understand the flow of your content. For more information see WebAIM’s Using Headings for Content Structure

<p class="strapline"> supports the page title as an introduction or highlights the first section of content, after that the default paragraph styling is used for the bulk of content.

<blockquote> is used to mark a quotation in the flow of content, whereas the pullquote class is used to repeat a key piece of content outside of the document flow. Use callout to highlight supporting information to the content that is wrapped around it.

Standard <ul> and <ol> tags will style your un/ordered lists apropriately. Ordered lists within a callout box are given additional emphasis with coloured backgrounds for the numbers.

Examples

H1 - 45px 'Light' (48px line height)

H2 - 30px 'Book' (33px line height)

H3 - 24px 'Light' (27px line height)

H4-6 18px 'Book' (21px line height)

Strapline - 24px light (30px line height) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Paragraph - 18px light (27px line height) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Unordered list 1
  • Unordered list 2
  • Unordered list 3
  • Unordered list 4
  • Unordered list 5
  1. Ordered list 1
  2. Ordered list 2
  3. Ordered list 3
    1. Ordered list inside list level 2
    2. Ordered list inside list level 2
      1. Ordered list inside list level 3
      2. Ordered list inside list level 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

block quote - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua