04.2 / Type Size & Examples

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.
Header tags

Page title

Opens sans light 30pt
#003057 Navy
#FFFFFF White (used on colored backgrounds)


Headline1

Opens sans light 20pt
#333333 Dark gray
#FFFFFF White (used on colored backgrounds)


Headline2

Opens sans light 18pt
#333333


Flight block header (date)

Opens sans regular 16pt
#666666 Medium gray


Paragraph/Body1

Opens sans light 14pt
#333333 – 18pt line spacing


Unordered Lists
  • - Listed item 1
  • - Listed item 2
  • - Listed item 3
Opens sans regular 14pt
#666666 – 18pt line spacing


Ordered lists
  1. Listed item 1
  2. Listed item 2
  3. Listed item 3
Opens sans regular 14pt
#666666 – 18pt line spacing



Terms & Conditions / Legalese
Opens sans regular 10pt
#666666 – 14pt line spacing



Link
Opens sans regular
#2172BA
Inherent surrounding font characteristics



Tooltip subhead
Opens sans semibold 12pt
#333333


Tooltip body
Opens sans regular 10pt
#666666



System alert header
Opens sans regular 16pt
#333333


System alert body
Opens sans regular 12pt
#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.
Page title classes – 30pt type
Pg Title
Pg Title
Pg Title
Opens sans light 30pt
#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




Headline1 classes – 20pt type
Headline1
Opens sans light 20pt
#333333 – 24pt line spacing


Headline1
Headline1
Opens sans light 20pt
#FFFFFF – 24pt line spacing

Class usage – backgrounds
#003399 United blue
#666666 Gray




Headline2 Class – 18pt type
Headline2
Opens sans regular 18pt
#333333



Flight Block Header Class – 16pt type
Flight Block Header
Opens sans regular 16pt
#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






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.
Page titles

Page Header with Page Title example



Headlines (Email)

Headline examples on confirmation page/email



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.
Accordions & containers

Accordion examples



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.
Email header messaging – scenario: reservation on 24-hour hold

Email confirmation messaging example



Email header messaging – scenario: trip advisory due to selected O&Ds

Email confirmation messaging example




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.
Modal type example

Modal type treatment example


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.
Modals – tool tips

Modal type treatment example

Available Assets Use the links below to access the available files for the assets referenced on this page.