Typography

Establish a visual and semantic hierarchy by nesting headings correctly. For example, an H3 follows an H2 when it denotes a section contained within the H2's content. Don't skip to an H4 after an H2, etc. Don't use headings arbitrarily based on their presentation.

View typography style guidelines

Element Pixel sizes Description

Page title

24px

The main page heading is an H1 element.

Heading

20px

The secondary heading to the left is an H2 element, which may be used as a page-level heading. More than one may be used per page

Third-level heading

18px

The heading to the left is an H3 element, which may be used after an H2 heading in the document hierarchy

Fourth-level heading

16px bold

The heading to the left is an H4 element, which may be used after an H3 heading in the document hierarchy
Fifth-level heading
14px uppercase bold
The heading to the left is an H5 element, which may be used after an H4 heading in the document hierarchy
Sixth-level heading
12px uppercase bold
The heading to the left is an H6 element, which may be used after an H5 heading in the document hierarchy
This is a paragraph, using Arial, with 12px font size and 20px line height. 12px

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, natus! Ducimus modi fuga totam, sed itaque ad praesentium voluptate facilis! Repudiandae enim quaerat, nulla culpa, cupiditate tempora! Nihil, earum, esse!