Typography

Typography plays a prominent role in all digital designs, especially now with the use of web fonts. Consistent and controlled use of a family of type styles will make our visual identity more recognizable and our interfaces more cohesive.

Two primary typefaces have been selected for Aon digital user experiences: Helvetica Now Display and Helvetica Now Text. Combining these visually compatible typefaces establishes a distinctive typographic platform for Aon.

Please note: to ensure proper page load time, do not use more than five font styles. Our type styles below require these five styles: Helvetica Now Display Light, Helvetica Now Display Light, Regular, Bold, and Helvetica Now Display Regular Italic.

Headlines

The following header styles represent visual hierarchy. These CSS properties could be applied to any text element. In structuring markup, it is important that header elements follow semantic hierarchical order for screen readers and SEO enhancement, regardless of their visual characteristics.

Individual products will have their own hierarchical needs, and some may need a redefined set of headlines. Use these styles as a starting point.
‍

h1

The Quick Brown Fox

h1 Mobile

The Quick Brown Fox

H1
font-face: Helvetica Now Display
font-weight: 700
font-size: 40px
line-height: 52px

H1 Mobile <576px
font-size: 30px
line-height: 36px

Navy

h2

Jumps Over the Lazy Dog

h2 Mobile

Jumps Over the Lazy Dog

H2
font-face: Helvetica Now Display
font-weight: 700
font-size: 28px
line-height: 36px

H2 Mobile <576px
font-size: 24px
line-height: 32px

Navy

Signature Red

h3

The Quick Brown Fox

h3 Mobile

The Quick Brown Fox

H3
font-face: Helvetica Now Display
font-weight: 700
font-size: 24px
line-height: 32px

H3 Mobile <576px
font-size: 20px
line-height: 26px

Navy

h4

Jumps Over the Lazy Dog

h4 Mobile

Jumps Over the Lazy Dog

H4
font-face: Helvetica Now Display
font-weight: 300
font-size: 24px
line-height: 28px

H4 Mobile <576px‍
font-size: 20px
line-height: 26px

Navy

Signature Red

h5

The Quick Brown Fox

h5 Mobile

The Quick Brown Fox

H5
font-face: Helvetica Now Display
font-weight: 700
font-size: 20px
line-height: 24px

H5 Mobile <576px
font-size: 18px

Navy

h6

The Quick Brown Fox

h6 Mobile

The Quick Brown Fox

H6
font-face: Helvetica Now Text
font-weight: 700
font-size: 16px
line-height: 20px
text-transform: uppercase

H6 Mobile <576px‍
font-size: 14px
line-height: 18px

Gray 02

Navy

Signature Red

Style

Specs

Colors

H1

The Quick Brown Fox

H1 Mobile

The Quick Brown Fox

H1
font-face: Helvetica Now Display
font-weight: 700
font-size: 40px
line-height: 52px

H1 Mobile <576pxfont-size: 30px
line-height: 36px

Gray 06

H2
font-face: Helvetica Now Display
font-weight: 700
font-size: 28px
line-height: 36px

H2 Mobile <576pxfont-size: 24px
line-height: 32px

H2

Jumps Over the Lazy Dog

H2 Mobile

Jumps Over the Lazy Dog

H3

The Quick Brown Fox

H3 Mobile

The Quick Brown Fox

H3
font-face: Helvetica Now Display
font-weight: 700
font-size: 24px
line-height: 32px

H3 Mobile <576pxfont-size: 20px
line-height: 26px

Gray 06

H4

Jumps Over the Lazy Dog

H4 Mobile

Jumps Over the Lazy Dog

H4
font-face: Helvetica Now Display
font-weight: 300
font-size: 24px
line-height: 28px

H4 Mobile <576pxfont-size: 20px
line-height: 26px

Gray 06

H5

The Quick Brown Fox

H5 Mobile

The Quick Brown Fox

H5
font-face: Helvetica Now Display
font-weight: 700
font-size: 20px
line-height: 24px

H5 Mobile <576px
font-size: 17px

Gray 06

H6

Jumps Over the Lazy Dog

H6 Mobile

Jumps Over the Lazy Dog

H6
font-face: Helvetica Now Text
font-weight: 700
font-size: 16px
line-height: 20px
text-transform: uppercase

H6 Mobile <576pxfont-size: 12px
line-height: 18px

Gray 06

Gray 04

Paragraphs

Multiple paragraph styles are available to further promote hierarchy. The body size is used in most of our UI Elements, while the Large Paragraph style is used for paragraph copy. Extra Large, Small and Extra Small can be used sparingly to emphasize or de-emphasize information.
‍

dEFAULT

Lorem ipsum dolor sit amet, consectetur...

Nam a libero viverra, venenatis mauris vitae...

This is bold text.

This is italic text.

dEFAULT mobile

Lorem ipsum dolor sit amet, consectetur...

Nam a libero viverra, venenatis mauris vitae...

This is default mobile bold text.

This is a default mobile italic text.

Default
font-face: Helvetica Now Text
font-weight: 400
font-size: 16px
line-height: 20px
bottom-margin: 16px

Default Bold
font-weight: 700

Default Italic
font-weight: 400

Default Mobile
font-size: 15px

Default Mobile Bold
font-weight: 700

Default Mobile Italic
font-weight: 400

Gray 01

Gray 02

Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae suscipit risus, id commodo nibh. Curabitur eget pulvinar erat. Aliquam iaculis, felis a lobortis cursus.

Nam a libero viverra, venenatis mauris vitae, ultrices dui. Vestibulum lorem purus, aliquet vel volutpat sed, porttitor quis metus.

Small

Lorem ipsum dolor sit amet, consectetur...

Nam a libero viverra, venenatis mauris vitae...

This is small bold text.

Small Mobile

Lorem ipsum dolor sit amet, consectetur...

Nam a libero viverra, venenatis mauris vitae..

This is small mobile bold text.

Small
font-face: Helvetica Now Text
font-weight: 400
font-size: 14px
line-height: 18px
bottom-margin: 12px

Small Bold
font-weight: 700

Small Mobile <576px
font-size: 14px

Small Mobile Bold
font-weight: 700

Gray 01

Gray 02

Extra Small

Lorem ipsum dolor sit amet, consectetur...

Nam a libero viverra, venenatis mauris vitae...

This is small bold text.

Extra Small Mobile

Lorem ipsum dolor sit amet, consectetur...

Nam a libero viverra, venenatis mauris vitae...

This is extra small mobile bold text.

Extra Small
font-face: Helvetica Now Text
font-weight: 400
font-size: 12px
line-height: 16px
bottom-margin: 8px

Extra Small Mobile Bold
font-weight: 700

Extra Small Mobile <576px
font-size: 12px

Extra Small Mobile Bold
font-weight: 700

Gray 01

Gray 02

Large

Lorem ipsum dolor sit amet, consectetur...

Nam a libero viverra, venenatis mauris vitae...

This is large bold text.

Large Mobile

Lorem ipsum dolor sit amet, consectetur..

Nam a libero viverra, venenatis mauris vitae...

This is large mobile bold text.

Large
font-face: Helvetica Now Text
font-weight: 300
font-size: 18px
line-height: 24px
bottom-margin: 16px

Large Bold
font-weight: 700

Large Mobile <576px
font-size: 17px

Large Mobile Bold
font-weight: 700

Gray 01

Gray 02

EXtra Large

Lorem ipsum dolor sit amet, consectetur...

Nam a libero viverra, venenatis mauris vitae...

EXtra Large Mobile

Lorem ipsum dolor sit amet, consectetur...

Nam a libero viverra, venenatis mauris vitae...

Extra Large
font-face: Helvetica Now Text
font-weight: 300
font-size: 21px
line-height: 28px
bottom-margin: 20px

Extra Large Mobile <576px
font-size: 17px
line-height: 24px

Gray 01

Gray 02

Style

Specs

Colors

default

Lorem ipsum dolor sit amet, consectetur...

Nam a libero viverra, venenatis mauris vitae...

This is default bold text.

This is default italic text.

Default Mobile

Lorem ipsum dolor sit amet, consectetur...

Nam a libero viverra, venenatis mauris vitae...

This is default mobile bold text.

This is default mobile italic text.

Default
font-face: Helvetica Now Text
font-weight: 400
font-size: 16px
line-height: 20px
bottom-margin: 16px

Default Bold
font-weight: 700

Default Italic
font-weight: 400

Default Mobile <576px
font-size: 15px

Default Mobile Bold
font-weight: 700

Default Italic
font-weight: 400

Gray 06

Gray 04

small

Lorem ipsum dolor sit amet, consectetur...

Nam a libero viverra, venenatis mauris vitae...

This is small bold text.

small Mobile

Lorem ipsum dolor sit amet, consectetur...

Nam a libero viverra, venenatis mauris vitae...

This is small mobile bold text.

Small
font-face: Helvetica Now Text
font-weight: 400
font-size: 14px
line-height: 18px
bottom-margin: 12px

Small Bold
font-weight: 700

Small Mobile <576px
font-size: 14px

Small Bold Mobile
font-weight: 700

Gray 06

Gray 04

Extra small

Lorem ipsum dolor sit amet, consectetur...

Nam a libero viverra, venenatis mauris vitae...

This is extra small bold text.

Extra small Mobile

Lorem ipsum dolor sit amet, consectetur...

Nam a libero viverra, venenatis mauris vitae...

This is extra small mobile bold text.

Extra Small
font-face: Helvetica Now Text
font-weight: 400
font-size: 12px
line-height: 16px
bottom-margin: 8px

Extra Small Bold
font-weight: 700

Extra Small Mobile <576px
font-size: 12px

Extra Small Mobile Bold
font-weight: 700

Gray 06

Gray 04

Large

Lorem ipsum dolor sit amet, consectetur...

This is large bold text.

Nam a libero viverra, venenatis mauris vitae...

Large Mobile

Lorem ipsum dolor sit amet, consectetur...

Nam a libero viverra, venenatis mauris vitae...

This is large mobile bold text.

Large
font-face: Helvetica Now Text
font-weight: 300
font-size: 18px
line-height: 24px
bottom-margin: 16px

Large Bold
font-weight: 700

Large Mobile <576px
font-size: 17px

Large Mobile Bold
font-weight: 700

Gray 06

Gray 04

Extra Large

Lorem ipsum dolor sit amet, consectetur...

Nam a libero viverra, venenatis mauris vitae...

Extra Large Mobile

Lorem ipsum dolor sit amet, consectetur...

Nam a libero viverra, venenatis mauris vitae...

Extra Large
font-face: Helvetica Now Text
font-weight: 300
font-size: 21px
line-height: 28px
bottom-margin: 20px

Extra Large Mobile <576px
font-size: 17px
line-height: 24px

Gray 06

Gray 04

Link Styling

Text links are indicated by teal color and an underline. Links paired with an icon or used in site navigation do not require the underline.
‍

Style

Specs

Colors

Text link

Default, Small, Extra Small, Large and Extra Large paragraph links include a color change on hover.

This is a link.

This is a hover link.

This is an active link.

Text Link
text-decoration: underline

Text Link - Hover
text-decoration: none

Text Link - Active
text-decoration: none

* No color change

Link Styling

Text links are indicated by teal color and an underline. Links paired with an icon or used in site navigation do not require the underline. The underline is removed on hover as the primary indicator of interactivity. In addition, a subtle color shift is used on larger text.