04.2 / Type Size & Examples
Type scale
Well structured typography has been established to provide good visual hierarchy, leading the reader across the page in accordance to the level of importance of content. It provides visual punctuation and graphic accents to help readers connect headlines with content and text with images. Disciplined use of typographic standards helps create and maintain a strong and recognizable brand.
Well structured typography has been established to provide good visual hierarchy, leading the reader across the page in accordance to the level of importance of content. It provides visual punctuation and graphic accents to help readers connect headlines with content and text with images. Disciplined use of typographic standards helps create and maintain a strong and recognizable brand.
Header tags
Terms & Conditions / Legalese
Link
Tooltip subhead
System alert header
Page title
Opens sans light 30pt
#003057 Navy
#FFFFFF White (used on colored backgrounds)
#003057 Navy
#FFFFFF White (used on colored backgrounds)
Headline1
Opens sans light 20pt
#333333 Dark gray
#FFFFFF White (used on colored backgrounds)
#333333 Dark gray
#FFFFFF White (used on colored backgrounds)
Headline2
Opens sans light 18pt
#333333
#333333
Flight block header (date)
Opens sans regular 16pt
#666666 Medium gray
#666666 Medium gray
Paragraph/Body1
Opens sans light 14pt
#333333 – 18pt line spacing
Unordered Lists
#333333 – 18pt line spacing
- - Listed item 1
- - Listed item 2
- - Listed item 3
Opens sans regular 14pt
#666666 – 18pt line spacing
Ordered lists
#666666 – 18pt line spacing
- Listed item 1
- Listed item 2
- Listed item 3
Opens sans regular 14pt
#666666 – 18pt line spacing
#666666 – 18pt line spacing
Terms & Conditions / Legalese
Opens sans regular 10pt
#666666 – 14pt line spacing
#666666 – 14pt line spacing
Link
Opens sans regular
#2172BA
Inherent surrounding font characteristics
#2172BA
Inherent surrounding font characteristics
Tooltip subhead
Opens sans semibold 12pt
#333333
Tooltip body
#333333
Opens sans regular 10pt
#666666
#666666
System alert header
Opens sans regular 16pt
#333333
System alert body
#333333
Opens sans regular 12pt
#666666
#666666
Links
Links are highlighted words or images on the screen that when engaged, enable the user to travel to another part of the same page or to an entirely different screen or file. They help the user navigate through the site and provide more information to the user when needed.
Links are highlighted words or images on the screen that when engaged, enable the user to travel to another part of the same page or to an entirely different screen or file. They help the user navigate through the site and provide more information to the user when needed.
Page title classes – 30pt type
Headline1 classes – 20pt type
Headline2 Class – 18pt type
Flight Block Header Class – 16pt type
Link Classes & colored backgrounds
Link 2172BA (default)
Hover 2172BA
Link 003507
Hover FFFFFF
Link FFFFFF
Hover 003507
Link FFFFFF
Hover 62A9E3
Link FFFFFF
Hover 003507
Link 003507
Hover 003507
Pg Title
Pg Title
Pg Title
Opens sans light 30pt
#003057
Class usage – backgrounds
#EDB72B Modern gold
#F2F2F2 Light gray
#FFFFFF White
#003057
Class usage – backgrounds
#EDB72B Modern gold
#F2F2F2 Light gray
#FFFFFF White
Pg title
Pg title
Opens sans light 30pt
#FFFFFF
Class usage – backgrounds
#003057 Dark blue
#666666 Dark gray
#FFFFFF
Class usage – backgrounds
#003057 Dark blue
#666666 Dark gray
Headline1 classes – 20pt type
Headline1
Opens sans light 20pt
#333333 – 24pt line spacing
#333333 – 24pt line spacing
Headline1
Headline1
Opens sans light 20pt
#FFFFFF – 24pt line spacing
Class usage – backgrounds
#003399 United blue
#666666 Gray
#FFFFFF – 24pt line spacing
Class usage – backgrounds
#003399 United blue
#666666 Gray
Headline2 Class – 18pt type
Headline2
Opens sans regular 18pt
#333333
#333333
Flight Block Header Class – 16pt type
Flight Block Header
Opens sans regular 16pt
#666666
#666666
Link Classes & colored backgrounds
#FFFFFF Background
Link 2172BA (default)
Hover 2172BA
#FFFFFF Background
Link 003507
Hover FFFFFF
#62A9E3 Background
Link FFFFFF
Hover 003507
#002244 Background
Link FFFFFF
Hover 62A9E3
#999999 Background
Link FFFFFF
Hover 003507
#F2F2F2 Background
Link 003507
Hover 003507
Opens sans light – inherent size
Class usage – backgrounds
#FFFFFF White
#EDB72B Modern gold
#62A9E3 Sky blue
#003507 Premium blue
#999999 Medium gray
#F2F2F2 Light gray
Class usage – backgrounds
#FFFFFF White
#EDB72B Modern gold
#62A9E3 Sky blue
#003507 Premium blue
#999999 Medium gray
#F2F2F2 Light gray
Page titles & headlines
The page title is the text indicating the nature of the information that will follow on the page. A headline should be the first design element the reader’s eye lands upon. Its purpose is to draw your audience in, and it also sets the tone for the rest of the piece.
Accordions
When using accordions, the size of the type should always descend in size as you move from the top to bottom of each section. This layout will indicate to users the importance of information as they follow down the page. Once a new section is introduced, the sizing scale should reset and follow the set guidelines.
Header messaging
Email confirmation headers, should always be set to 20 point type and have a hex #333333. If a body of copy does follow, the text should be regular body copy size of 14 point with a standard line spacing of 18 point.
Modals
When using modals, the size of the type should always descend in size as you move from top to bottom of each section. This layout will show importance of information as the user follows the information down the page. Once a new section is introduced, the sizing scale should reset and follow the set guidelines.
Tool tips
Tool tips follow the same set type rules as does modals. The size of the type should always descend in size as you move from top to bottom of each section. This layout will show importance of information as the user reads the information. Once a new section is introduced, the sizing scale should reset and follow the same type guidelines.
The page title is the text indicating the nature of the information that will follow on the page. A headline should be the first design element the reader’s eye lands upon. Its purpose is to draw your audience in, and it also sets the tone for the rest of the piece.
Accordions
When using accordions, the size of the type should always descend in size as you move from the top to bottom of each section. This layout will indicate to users the importance of information as they follow down the page. Once a new section is introduced, the sizing scale should reset and follow the set guidelines.
Header messaging
Email confirmation headers, should always be set to 20 point type and have a hex #333333. If a body of copy does follow, the text should be regular body copy size of 14 point with a standard line spacing of 18 point.
Modals
When using modals, the size of the type should always descend in size as you move from top to bottom of each section. This layout will show importance of information as the user follows the information down the page. Once a new section is introduced, the sizing scale should reset and follow the set guidelines.
Tool tips
Tool tips follow the same set type rules as does modals. The size of the type should always descend in size as you move from top to bottom of each section. This layout will show importance of information as the user reads the information. Once a new section is introduced, the sizing scale should reset and follow the same type guidelines.
