Typography
beta

Graphik is the typeface used on the etrade.com pages, for both the Customer and Prospect webpages.

The Prospect site covers etrade.com pages that fall outside the paywall. The Customer site covers everything behind the paywall on etrade.com. Although we use the same font family across the site, font sizes differ between the two font stacks.

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 - =

! @ # $ % ^ & * ( ) _ + -

You can modify any of the fonts above using these styles

Body text
Header text
Muted text
$100.00
-100.00
White text
Green text

Use these helper classes to transfrom your text.

Text bold
Text bold
Text truncate will add an ellipse when the text overflows the width of the containing div. Text truncate will when the text overflows the width of the containing div
Text truncate will add an ellipse when the text overflows the width of the containing div. Text truncate will when the text overflows the width of the containing div
Text nowrap
Text nowrap
Text lowercase
Text lowercase
Text uppercase
Text uppercase
Text capitalize
Text capitalize

Text alignment can be applied through helper classes. Alignment can be applied differently per breakpoint. For instance, if the design called for text aligning center on mobile and right on desktop, you would style your element class="text-center text-right-sm"

Align left
Align center
Align right

The Design Language supports three types of unordered lists:

  1. Standard: A vertical list with a bullet on each item
  2. Unstyled: A vertical list without bullets
  3. Piped: A horizontal list, items separated by a pipe ( "|" )

  • Milk
  • Eggs
  • Bread
  • Milk
  • Eggs
  • Bread
  • Milk
  • Eggs
  • Bread