Typography
beta

Typefaces

We have four type systems for our products. Each one has a separate typeface.

The Prospect site covers etrade.com pages that fall outside the paywall. The typeface for Prospect site is E*TRADE Fort.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0 + -

  
  

The Customer site covers everyhing behind the paywall on etrade.com. The typeface for Customer site is Helvetica Neue, Helvetica, Arial or sans serif. The first choice is Helvetica Neue, but the device should pick the first available font from the stack.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0 + -

  
  

If a page is designed to appear solely on an iOS app, it should render in San Francisco.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0 + -

  
  

If a page is designed to appear solely on an Android app, it should render in Roboto.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0 + -

  
  

Each type system has different sizes. Each desktop size has a corresponding mobile size.

Note: Resize window to view components at various breakpoints.
The five boxing wizards jump

Extra extra large header • 72px • 46px • Extralight 200 • Header Text Gray .extra-extra-large-header

The five boxing wizards jump quickly.

Extra large header • 46px • 37px • Extralight 200 • Header Text Gray <h1></h1> h1 .extra-large-header

The five boxing wizards jump quickly.

Large header • 32px • 24px • Extralight 200 • Header Text Gray <h2></h2> .h2 .large-header

The five boxing wizards jump quickly.

Small header • 22px • 20px • Light 300 • Header Text Gray <h3></h3> .h3 .small-header

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward. How razorback-jumping frogs can level six piqued gymnasts! Amazingly few discotheques provide jukeboxes. "Now fax quiz Jack!" my brave ghost pled. Cozy lummox gives smart squid who asks for job pen.

Subhead • 15px • 17px • Book 400 • Header Text Gray <h4>Subhead</h4> .h4 .subhead

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward. How razorback-jumping frogs can level six piqued gymnasts! Amazingly few discotheques provide jukeboxes. "Now fax quiz Jack!" my brave ghost pled. Cozy lummox gives smart squid who asks for job pen.

Bold Subhead • 15px • 17px • Medium 500 • Header Text Gray <h4 class="text-bold"></h4> .h4 + .text-bold .subhead + .text-bold

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward. How razorback-jumping frogs can level six piqued gymnasts! Amazingly few discotheques provide jukeboxes. "Now fax quiz Jack!" my brave ghost pled. Cozy lummox gives smart squid who asks for job pen.

body • 13px • 15px • Book 400 • Body Text Gray <div></div>

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward. How razorback-jumping frogs can level six piqued gymnasts! Amazingly few discotheques provide jukeboxes. "Now fax quiz Jack!" my brave ghost pled. Cozy lummox gives smart squid who asks for job pen.

Body Bold • 13px • 15px • Medium 400 • Body Text Gray <div></div>

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward. How razorback-jumping frogs can level six piqued gymnasts! Amazingly few discotheques provide jukeboxes. "Now fax quiz Jack!" my brave ghost pled. Cozy lummox gives smart squid who asks for job pen.

Field Labels • 13px • 15px • Book 400 • Set Back Gray <label></label> .label

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward. How razorback-jumping frogs can level six piqued gymnasts! Amazingly few discotheques provide jukeboxes. "Now fax quiz Jack!" my brave ghost pled. Cozy lummox gives smart squid who asks for job pen.

Disclaimers and Legal Text • 12px • 13px • Book 400 • Set Back Gray .text-disclaimer

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward.

Extra large header • 26px • Light 300 • Header Text Gray <h1></h1> .h1 .extra-large-header

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward.

Large header • 22px • Light 300 • Header Text Gray <h2></h2> .h2 .large-header

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward.

Medium header • 18px • Light 300 • Header Text Gray <h3></h3> .h3 .medium-header

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward. How razorback-jumping frogs can level six piqued gymnasts! Amazingly few discotheques provide jukeboxes.

Small header • 16px • Light 300 • Header Text Gray <h4></h4> .h4 .small-header

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward. How razorback-jumping frogs can level six piqued gymnasts! Amazingly few discotheques provide jukeboxes. "Now fax quiz Jack!" my brave ghost pled.

Tiny header • 14px • Light 300 • Header Text Gray <h5></h5> .h5 .tiny-header

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward. How razorback-jumping frogs can level six piqued gymnasts! Amazingly few discotheques provide jukeboxes. "Now fax quiz Jack!" my brave ghost pled. Cozy lummox gives smart squid who asks for job pen.

Bold Body/Subhead • 13px • Medium 500 • Body Text Gray <h6></h6> .h6 .subhead

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward. How razorback-jumping frogs can level six piqued gymnasts! Amazingly few discotheques provide jukeboxes. "Now fax quiz Jack!" my brave ghost pled. Cozy lummox gives smart squid who asks for job pen.

Body text • 13px • Normal 400 • Body Text Gray <div></div>

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward. How razorback-jumping frogs can level six piqued gymnasts! Amazingly few discotheques provide jukeboxes. "Now fax quiz Jack!" my brave ghost pled. Cozy lummox gives smart squid who asks for job pen.

Small Label (Field and Table Column Header) • 11px • Regular 400 • Set Back Gray .label.label-small

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward. How razorback-jumping frogs can level six piqued gymnasts! Amazingly few discotheques provide jukeboxes. "Now fax quiz Jack!" my brave ghost pled. Cozy lummox gives smart squid who asks for job pen.

Large Label (Inline labels, Timestamps, Null States) • 13px • Light 300 • Set Back Gray .label.label-large

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward.

Extra Large Header • 50px • Thin 100 • Header Text Gray .extra-large-header

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward.

Large Header • 23px • Light 200 • Header Text Gray <h1></h1> .h1 .large-header

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward.

Subhead • 17px • Semi-bold 500 • Header Text Gray <h2></h2> .h2 .subhead

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward.

Page Title • 17px • Semi-bold 500 • Body Text Gray <h3></h3> .h3 .medium-header

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward. How razorback-jumping frogs can level six piqued gymnasts! Amazingly few discotheques provide jukeboxes. "Now fax quiz Jack!" my brave ghost pled. Cozy lummox gives smart squid who asks for job pen.

Body text • 17px • Regular 400 • Body Text Gray <div></div>

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward. How razorback-jumping frogs can level six piqued gymnasts! Amazingly few discotheques provide jukeboxes. "Now fax quiz Jack!" my brave ghost pled. Cozy lummox gives smart squid who asks for job pen.

Field Label, Radio, and Checkbox • 15px • Regular 400 • Set Back Gray <label></label> .label

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward. How razorback-jumping frogs can level six piqued gymnasts! Amazingly few discotheques provide jukeboxes. "Now fax quiz Jack!" my brave ghost pled. Cozy lummox gives smart squid who asks for job pen.

Disclaimers • 13px • Regular 400 • Set Back Gray .text-disclaimer

Footer • 13px • Regular 400 • Set Back Gray .text-footer

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward.

Extra Large Header • 50px • Thin 100 • Header Text Gray .extra-large-header

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward.

Large header • 23px • Light 200 • Header Text Gray <h1></h1> .h1 .large-header

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward.

Subheader • 17px • Bold 700 • Header Text Gray <h2></h2> .h2 .subhead

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward.

Page Title • 17px • Medium 500 • Body Text Gray <h3></h3> .h3 .medium-header

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward. How razorback-jumping frogs can level six piqued gymnasts! Amazingly few discotheques provide jukeboxes. "Now fax quiz Jack!" my brave ghost pled. Cozy lummox gives smart squid who asks for job pen.

Body text • 17px • Regular 400 • Body Text Gray <div></div>

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward. How razorback-jumping frogs can level six piqued gymnasts! Amazingly few discotheques provide jukeboxes. "Now fax quiz Jack!" my brave ghost pled. Cozy lummox gives smart squid who asks for job pen.

Field Label, Radio, and Checkbox • 15px • Regular 400 • Set Back Gray <label></label> .label

The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz. Jaded zombies acted quaintly but kept driving their oxen forward. How razorback-jumping frogs can level six piqued gymnasts! Amazingly few discotheques provide jukeboxes. "Now fax quiz Jack!" my brave ghost pled. Cozy lummox gives smart squid who asks for job pen.

Disclaimers • 13px • Regular 400 • Set Back Gray .text-disclaimer

Footer • 13px • Regular 400 • Set Back Gray .text-footer

You can modify any of the styles above using these variations.

White on navy

.text-white

Green on navy

.text-brand-green

Set back gray

.text-muted

Bold text

.text-bold strong b

$100.00

.text-positive

$100.00

.text-negative

text center

.text-center

text left

.text-left

text right

.text-right
  • Milk
  • Eggs
  • Bread
Standard, unordered list
<ul>
  • Milk
  • Eggs
  • Bread
Unstyled, unordered list
<ul class="list-unstyled">
  • Milk
  • Eggs
  • Bread
Pipe divided, unordered list
<ul class="list-pipe">