04.1 / Type Families

04.1 / Type Families
Primary type family
Featuring an extended family of weights, excellent on-screen legibility and a clean, modern aesthetic, Open Sans is an ideal choice to be the voice of United 2.0.
Open sans light, 20/24
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&()?”:;<


Open sans light, 14/16
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&()?”:;<


Open sans regular, 20/24
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&()?”:;<


Open sans regular, 14/16
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&()?”:;<


Open sans semibold, 20/24
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&()?”:;<


Open sans semibold, 14/16
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&()?”:;<


Open sans bold, 20/24
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&()?”:;<


Open sans bold, 14/16
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&()?”:;<


Font: Opens sans

These are the web standard defaults

h1 tags look like this…

h2 tags look like this…

h3 tags look like this…

h4 tags look like this…

h5 tags look like this…
h6 tags look like this…


Page Title “h1″

Your headline “h2″ is in Open Sans

This is a sub heading “h3″ in Open Sans.

This paragraph “p” is in Open Sans. Keep reading for how to use the buttons to the left. Change your settings, and choose what section you want the font to apply to. Once you are pleased with the settings for that section you can click save. Your selections will remain as you look for another font for another section of this preview.

Another sub heading “h3″ in Open Sans.

Blockquote: Make other Open Sans text stand out!

The setting for a paragraph “p” continues down here. There is a blockquote next to it. You may want to make that stand out. The setting for a paragraph continues down here. There is a blockquote next to it. You may want to make that stand out. The setting for a paragraph continues down here. There is a blockquote next to it. You may want to make that stand out.

/* This text is in Open Sans */
.class { 
	font-family: Open Sans; 
}
						

This content will include unordered and ordered list examples:

  • - Listed item 1
  • - Listed item 2
  • - Listed item 3
  1. Listed item 1
  2. Listed item 2
  3. Listed item 3

This is what Terms & Conditions, as well as Legal content will look like.This is what Terms & Conditions, as well as Legal content will look like.This is what Terms & Conditions, as well as Legal content will look like.This is what Terms & Conditions, as well as Legal content will look like.This is what Terms & Conditions, as well as Legal content will look like.

This is what an individual, inline link would look and act like.

This is what a simulated list of links would look and act like:
link item #1
link item #1
link item #1
link item #1
link item #1
link item #1

System Alert header
System Alert body

Secondary type family
As a backup to Open Sans, the Helvetica Neue Family can be substituted. It features a similarly extensive family of weights and is an ideal backup when technological barriers prohibit the use of Open Sans.
Helvetica neue 35 thin, 20/24
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&()?”:;<


Helvetica neue 35 thin, 14/16
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&()?”:;<


Helvetica neue 55 roman, 20/24
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&()?”:;<


Helvetica neue 55 roman, 14/16
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&()?”:;<


Helvetica neue 65 medium, 20/24
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&()?”:;<


Helvetica neue 65 medium, 14/16
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&()?”:;<


Helvetica neue 75 bold, 20/24
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&()?”:;<


Helvetica neue 75 bold, 14/16
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&()?”:;<


Font: Helvetica neue

These are the web standard defaults

h1 tags look like this…

h2 tags look like this…

h3 tags look like this…

h4 tags look like this…

h5 tags look like this…
h6 tags look like this…


Page title “h1″

Your headline “h2″ is in Helvetica Neue

This is a sub heading “h3″ in Helvetica Neue.

This paragraph “p” is in Helvetica Neue. Keep reading for how to use the buttons to the left. Change your settings, and choose what section you want the font to apply to. Once you are pleased with the settings for that section you can click save. Your selections will remain as you look for another font for another section of this preview.

Another sub heading “h3″ in Helevetica Neue.

Blockquote: Make other Helvetica Neue text stand out!

The setting for a paragraph “p” continues down here. There is a blockquote next to it. You may want to make that stand out. The setting for a paragraph continues down here. There is a blockquote next to it. You may want to make that stand out. The setting for a paragraph continues down here. There is a blockquote next to it. You may want to make that stand out.

/* This text is in Helvetica neue */
.class { 
	font-family: Helvetica Neue; 
}
						

This content will include unordered and ordered list examples:

  • - Listed item 1
  • - Listed item 2
  • - Listed item 3
  1. Listed item 1
  2. Listed item 2
  3. Listed item 3

This is what terms & conditions, as well as Legal content will look like.This is what Terms & Conditions, as well as Legal content will look like.This is what terms & conditions, as well as Legal content will look like.This is what terms & conditions, as well as Legal content will look like.This is what terms & conditions, as well as legal content will look like.

This is what an individual, inline link would look and act like.

This is what a simulated list of links would look and act like:
link item #1
link item #1
link item #1
link item #1
link item #1
link item #1

System alert header
System alert body

Alternative type family
Arial can be substituted as an alternative to Open Sans and the helvetica neue family. It is an ideal backup when technological barriers prohibit the use of open sans or helvetica neue.
Arial Regular, 20/24
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&()?”:;<


Arial regular, 14/16
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&()?”:;<


Arial bold, 20/24
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&()?”:;<


Arial bold, 14/16
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%&()?”:;<


Font: Arial

These are the web standard defaults

h1 tags look like this…

h2 tags look like this…

h3 tags look like this…

h4 tags look like this…

h5 tags look like this…
h6 tags look like this…


Page title “h1″

Your headline “h2″ is in Arial

This is a sub heading “h3″ in Arial.

This paragraph “p” is in Arial. Keep reading for how to use the buttons to the left. Change your settings, and choose what section you want the font to apply to. Once you are pleased with the settings for that section you can click save. Your selections will remain as you look for another font for another section of this preview.

Another sub heading “h3″ in Arial.

Blockquote: Make other Arial text stand out!

The setting for a paragraph “p” continues down here. There is a blockquote next to it. You may want to make that stand out. The setting for a paragraph continues down here. There is a blockquote next to it. You may want to make that stand out. The setting for a paragraph continues down here. There is a blockquote next to it. You may want to make that stand out.

/* This text is in Arial */
.class { 
	font-family: Arial; 
}
						

This content will include unordered and ordered list examples:

  • - Listed item 1
  • - Listed item 2
  • - Listed item 3
  1. Listed item 1
  2. Listed item 2
  3. Listed item 3

This is what Terms & Conditions, as well as Legal content will look like.This is what Terms & Conditions, as well as Legal content will look like.This is what Terms & Conditions, as well as Legal content will look like.This is what Terms & Conditions, as well as Legal content will look like.This is what Terms & Conditions, as well as Legal content will look like.

This is what an individual, inline link would look and act like.

This is what a simulated list of links would look and act like:
link item #1
link item #1
link item #1
link item #1
link item #1
link item #1

System Alert header
System Alert body

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