Foundations / Typography

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.

Two primary typefaces have been selected for Aon digital user experiences: Roboto Slab and Roboto Sans. Combining these visually compatible typefaces establishes a distinctive typographic platform for Aon.

Please note: to ensure that we achieve the proper load time for the page, use no more than 5 individual weights.

On This Page

Headlines

The following headlines are dictated by visual hierarchy. However, it’s important that headline styles be applied in order to accomodate screen readers and enhance SEO—this may not align with proper visual hierarchy. In that case, create a new paragraph style with the same specs. Individual products will have their own hierarchical needs, and some may need a redefined set of headlines. Use these styles as a starting point.

Style Specs Colors

H1

Slab 48
  • H1
  • font-face: Roboto Slab
  • font-weight: 300
  • font-size: 48px
  • line-height: 64px
  • bottom-margin: 20px
Blue

Gray A

White

H2

Slab 28
  • H2
  • font-face: Roboto Slab
  • font-weight: 300
  • font-size: 28px
  • line-height: 32px
  • bottom-margin: 20px
Blue

Gray A

White

H3

Sans Bold 24
  • H3
  • font-face: Roboto
  • font-weight: 700
  • font-size: 24px
  • line-height: 32px
  • bottom-margin: 20px
Blue

Gray A

White

H4

Sans Light 24
  • H4
  • font-face: Roboto
  • font-weight: 300
  • font-size: 24px
  • line-height: 32px
  • bottom-margin: 20px
Blue

Gray A

White

H5

Sans Bold 20
  • H5
  • font-face: Roboto
  • font-weight: 700
  • font-size: 20px
  • line-height: 28px
  • bottom-margin: 20px
Blue

Gray A

White

H6

Sans Bold 16
  • H6
  • font-face: Roboto
  • font-weight: 700
  • font-size: 16px
  • line-height: 24px
  • text-transform: uppercase
  • bottom-margin: 20px
Blue

Gray A

Gray C

White

Paragraphs

Multiple paragraph styles are available to further promote hierarchy. Body and Small Paragraph styles are used most commonly, with Large and Extra small being used sparingly to emphasize or de-emphasize information, respectively.

Style Specs Colors

Body

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.

This is bold body text
  • Body Default
  • font-face: Roboto
  • font-weight: 300
  • font-size: 18px
  • line-height: 28px
  • bottom-margin: 16px
  • Body Bold
  • font-face: Roboto
  • font-weight: 700
  • font-size: 18px
  • line-height: 28px
  • bottom-margin: 16px
Gray A

White

Large

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.
  • Large Paragraph
  • font-face: Roboto
  • font-weight: 300
  • font-size: 21px
  • line-height: 32px
  • bottom-margin: 20px
Blue

Gray A

White

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.

This is bold small paragraph text



This is italic small paragraph text
  • Small Paragraph
  • font-face: Roboto
  • font-weight: 400
  • font-size: 16px
  • line-height: 24px
  • bottom-margin: 12px
  • Small Bold Paragraph
  • font-face: Roboto
  • font-weight: 700
  • font-size: 16px
  • line-height: 24px
  • bottom-margin: 12px
  • Small Italic Paragraph
  • font-face: Roboto
  • font-weight: 400
  • font-style: Italic
  • font-size: 16px
  • line-height: 24px
  • bottom-margin: 12px
Gray A

Gray C

White

Extra 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.

This is bold extra small paragraph text
  • Extra Small Paragraph
  • font-face: Roboto
  • font-weight: 400
  • font-size: 14px
  • line-height: 20px
  • bottom-margin: 12px
  • Extra Small Bold Paragraph
  • font-face: Roboto
  • font-weight: 400
  • font-size: 14px
  • line-height: 20px
  • bottom-margin: 12px
Gray A

White

Link Styling

Links in paragraph styles 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

Standard Link

This is a link
This is a hover link
This is an active link
  • Standard Link
  • text-decoration: underline
  • Standard Link - Hover
  • text-decoration: underline
  • Standard Link - Active
  • text-decoration: underline
Teal

Teal Hover

Teal Active

Link with Icon

This is a link
This is a hover link
This is an active link
  • Link with Icon
  • text-decoration: underline
  • Link with Icon - Hover
  • text-decoration: underline
  • Link with Icon - Active
  • text-decoration: underline
Teal

Teal Hover

Teal Active

Forms

Text styles for form elements are listed here. Please see the Form Inputs page to see how they are applied

Style Specs Colors

Input Label

Lorem Ipsum
  • Input Label
  • font-face: Roboto
  • font-weight: 700
  • font-size: 16px
  • line-height: 20px
  • bottom-margin: 4px
Gray A

Input Label - Error

Lorem Ipsum
  • Input Label - Error
  • font-face: Roboto
  • font-weight: 700
  • font-size: 16px
  • line-height: 20px
  • bottom-margin: 4px
Red

Input Content

Lorem Ipsum
  • Input Content
  • font-face: Roboto
  • font-weight: 400
  • font-size: 16px
  • line-height: 20px
  • bottom-margin: 0px
Gray A

Input Placeholder

Lorem Ipsum
  • Input Placeholder
  • font-face: Roboto
  • font-weight: 400
  • font-size: 16px
  • line-height: 24px
  • bottom-margin: 0px
Gray E

Input Description

Lorem Ipsum
  • Input Description
  • font-face: Roboto-Regular
  • font-weight: 400
  • font-size: 16px
  • line-height: 24px
  • bottom-margin: 20px
Gray C

Input Error Description

Lorem Ipsum
  • Input Error Description
  • font-face: Roboto
  • font-weight: 400
  • font-size: 16px
  • line-height: 24px
  • bottom-margin: 20px
Red

Checkbox/Radio Title

Lorem Ipsum
  • Checkbox/Radio Title
  • font-face: Roboto
  • font-weight: 700
  • font-size: 16px
  • line-height: 24px
  • bottom-margin: 4px
Gray A

Checkbox/Radio Label

Lorem Ipsum
  • Checkbox/Radio Label
  • font-face: Roboto
  • font-weight: 700
  • font-size: 16px
  • line-height: 24px
  • bottom-margin: 0px
Gray A

Checkbox/Radio Title - Error

Lorem Ipsum
  • Checkbox/Radio Title - Error
  • font-face: Roboto
  • font-weight: 700
  • font-size: 16px
  • line-height: 20px
  • bottom-margin: 4px
Red

Checkbox/Radio Label

Lorem Ipsum
  • Checkbox/Radio Label
  • font-face: Roboto
  • font-weight: 700
  • font-size: 16px
  • line-height: 24px
  • bottom-margin: 0px
Gray A

Checkbox/Radio Title - Error

Lorem Ipsum
  • Checkbox/Radio Title - Error
  • font-face: Roboto
  • font-weight: 400
  • font-size: 16px
  • line-height: 24px
  • bottom-margin: 20px
Red

Buttons

Style Specs Colors

White Button Text

Button
  • White Button Text
  • font-face: Roboto
  • font-weight: 400
  • font-size: 16px
  • line-height: 20px
White

Blue Button Text

Button
  • Blue Button Text
  • font-face: Roboto
  • font-weight: 400
  • font-size: 16px
  • line-height: 20px
Blue

Blue Lighter

Blue Darker

Ghost Button Text

Button
  • Ghost Button Text
  • font-face: Roboto
  • font-weight: 400
  • font-size: 16px
  • line-height: 20px
  • text-decoration: underline
Teal

Teal Hover

Teal Active

Group Button Text

  • Group Button Text
  • font-face: Roboto
  • font-weight: 400
  • font-size: 16px
  • line-height: 20px
Gray A

Gray A Hover

Gray A Active

Icon Button Text

  • Icon Button Text
  • font-face: FontAwesomePro5 Light
  • font-size: 20px
  • line-height: 24px
Gray A

Teal Active

Navigation

Text styles for navigation types are listed here. Please see the Supplemental Navigation section of this guide to see how they are applied.

Style Specs Colors

Breadcumb - Not linked

Lorem Ipsum
  • Breadcrumb - Not Linked
  • font-face: Roboto
  • font-weight: 700
  • font-size: 16px
  • line-height: 28px
  • bottom-margin: 0px
  • text-transform: uppercase
Gray D

Breadcumb - Linked

Lorem Ipsum
  • Breadcrumb - Linked
  • font-face: Roboto
  • font-weight: 700
  • font-size: 16px
  • line-height: 28px
  • bottom-margin: 0px
  • text-transform: uppercase
Teal

Teal Hover

Teal Active

Horizontal Tab - Active

Lorem Ipsum
  • Horizontal Tab - Active
  • font-face: Roboto
  • font-weight: 700
  • font-size: 16px
  • line-height: 20px
  • bottom-margin: 8px
  • text-transform: uppercase
Blue

Vertical Tab - Active

Lorem Ipsum
  • Vertical Tab - Active
  • font-face: Roboto
  • font-weight: 700
  • font-size: 18px
  • line-height: 28px
  • bottom-margin: 20px
Blue

Vertical Tab - Inactive

Lorem Ipsum
  • Vertical Tab - Inactive
  • font-face: Roboto
  • font-weight: 700
  • font-size: 16px
  • line-height: 20px
  • bottom-margin: 20px
Gray A