(e)Headings

< Copy

Overview

Headings consist of h1 - h6, and should always use sentence case. Use headings consistently to create a clear hierarchy, h1 defines the most important heading and h6 defines the least important heading.

Use of this pattern

• Heading 1 copy is the style that should be used to define a high priority title. As an example it can be used to highlight important data information. Style should be set as Frutiger 65 Bold 48px #231F20 (line height 58px)

• Heading 2 copy is the style that should be used to define a lesser priority title than h1. As an example it can be used for article titles. Style should be set as Frutiger 65 Bold 36px #231F20 (line height 44px)

• Heading 3 copy is the style that should be used to define a lesser priority title than h2. As an example it can be used as sub article titles. Style should be set as Frutiger 65 Bold 24px #231F20 (line height 29px)

• Heading 4 copy is the style that should be used to define a lesser priority title than h3. As an example it is used on form field titles. Style should be set as Frutiger 65 Bold 18px #231F20 (line height 22px)

• Heading 5 copy is the style that should be used to define a lesser priority title than h4. As an example it is used for navigation menus. Style should be set as Frutiger 65 Bold 16px #231F20 (line height 19px)

• Heading 6 copy is the style that should be used to define a lesser priority title than h5. As an example it can be used on card titles. Style should be set as Frutiger 65 Bold 14px #231F20 (line height 17px)

How it works

• Use headings to title a section, article or page of content.
• Use sentence case for headings.
• Use headings consistently to create a clear hierarchy.
• h1 defines the most important heading. h6 defines the least important heading.

Research on this pattern

• http://govuk-elements.herokuapp.com/typography/#typography-headings
• http://govuk-elements.herokuapp.com/typography/example-typography/

Related patterns

• (e)Body
• (e)Forms
• (e)Links

Other