Typography
Simplicity
Simplicity should be employed with fonts. Limit multiple type styles to maintain legibility and coherence.
The below variations were chosen to balance content density and reading comfort. Type sizes are specified with pixels and rems for responsive web design.
Measurement Guide
Font Weight = Bold indicator, measured in font weight increments of 100
Font Size = Height from ascenders’ top (l,t, caps) to descenders’ (g,p,q) bottom in pixels and rems (16px = 1rem)
Line Height = Space between baselines of type measured in pixels and rems (16px = 1rem)
Specification Guide
Each font style is shown with a font name, followed by two numbers that represent font size and line height.
Font Styles
Primary & System Fonts
Consistent typography is an important element of a brand’s visual identity. American Express brand typography consists of two primary typefaces: Benton Sans and Guardian, along with Helvetica Neue as an additional font.
Use Benton Sans in most cases. Save Guardian for use in marketing messages such as new product announcements, special offers and promotions. Don’t use it for servicing messages. To learn more about when to use Benton Sans and Guardian, visit the Brand site.
Use Helvetica Neue and either Benton Sans or Guardian. Don’t combine the two primary typefaces on one page.
Each of the following heading style examples is presented as the font name, followed by font size and line-height.
Headings
Use heading styles as the header of a page or component to help establish hierarchy.
Specs - Heading 6
Font Weight = 300
Font Size = 2.375rem
Line Height = 2.75rem
Class Name = .heading-6
BentonSans Book 38px/44px
Specs - Heading 5
Font Weight = 300
Font Size = 1.875rem
Line Height = 2.375rem
Class Name = .heading-5
BentonSans Book 30px/38px
Specs - Heading 4
Font Weight = 400
Font Size = 1.250rem
Line Height = 1.75rem
Class Name = .heading-4
BentonSans Regular 20px/28px
Specs - Heading 7-G
Font Weight = 400
Font Size = 3rem
Line Height = 3.75rem
Class Name = .heading-7-g
Guardian Regular 48px/60px
Specs - Heading 6-G
Font Weight = 400
Font Size = 2.375rem
Line Height = 2.75rem
Class Name = .heading-6-g
Guardian Regular 38px/44px
Specs - Heading 5-G
Font Weight = 400
Font Size = 1.875rem
Line Height = 2.375rem
Class Name = .heading-5-g
Guardian Regular 30px/38px
Specs - Heading 4-G
Font Weight = 400
Font Size = 1.250rem
Line Height = 1.75rem
Class Name = .heading-4-g
Guardian Regular 20px/28px
Specs - Heading 3
Font Weight = 600
Font Size = 1rem
Line Height = 1.5rem
Class Name = .heading-3
Helvetica Neue Bold 16px/24px
Specs - Heading 2
Font Weight = 600
Font Size = 0.9375rem
Line Height = 1.375rem
Class Name = .heading-2
Helvetica Neue Bold 15px/22px
Specs - Heading 1
Font Weight = 600
Font Size = 0.813rem
Line Height = 1.125rem
Text Transform = uppercase
Class Name = .heading-1
Helvetica Neue Bold ALL CAPS 13px/18px
Label
Use label styles on quickly scanned components such as input fields or tables.
Please note, Label 3 is the label style used for labels within components and should not be applied to other copy.
Specs - Label 3
Font Weight = 600
Font Size = 1rem
Line Height = 1.5rem
Class Name = .label-3
Helvetica Neue Bold 16px/24px
Specs - Label 2
Font Weight = 600
Font Size = 0.9375rem
Line Height = 1.375rem
Class Name = .label-2
Helvetica Neue Bold 15px/22px
Specs - Label 1
Font Weight = 600
Font Size = 0.813rem
Line Height = 1.125rem
Text Transform = uppercase
Class Name = .label-1
Helvetica Neue Bold ALL CAPS 13px/18px
Body text
Body text styles are used for the main content on a page, such as the paragraphs, links, and buttons.
Specs - Body 3
Font Weight = 400
Font Size = 1rem
Line Height = 1.5rem
Class Name = .body-3
Helvetica Neue Regular 16px/24px
Specs - Body 2
Font Weight = 600
Font Size = 0.9375rem
Line Height = 1.375rem
Class Name = .body-2
Helvetica Neue Bold 15px/22px
Specs - Body 1
Font Weight = 400
Font Size = 0.9375rem
Line Height = 1.375rem
Class Name = .body-1
Helvetica Neue Regular 15px/22px
Legal
Use legal styles for terms, conditions, and any other variety of regulatory information.
Specs - Legal 2
Font Weight = 600;
Font Size = 0.8125rem;
Line Height = 1.25rem;
Class Name = .legal-2
Helvetica Neue Bold 13px/20px
Specs - Legal 1
Font Weight = 400;
Font Size = 0.8125rem;
Line Height = 1.25rem;
Class Name = .legal-1
Helvetica Neue Regular 13px/20px
Line Height
Legibility
The proper line height allows the typeface to breathe, ensuring legibility.
Line heights were determined based on each style’s individual size and weight. If the line height is too tight or too loose, the customer’s ability to understand the message will be compromised.
Example
Just right.
If the line height is too loose, the lines start to float away from each other. It makes vertical scanning difficult. If the line height is too tight, readers will start scanning down the text, even if they don't want to. 15/22
Too tight.
If the line height is too loose, the lines start to float away from each other. It makes vertical scanning difficult. If the line height is too tight, readers will start scanning down the text, even if they don't want to. 15/18
Too loose.
If the line height is too loose, the lines start to float away from each other. It makes vertical scanning difficult. If the line height is too tight, readers will start scanning down the text, even if they don't want to. 15/28
Line Length
Optimal Length
Similar to line height, line length is also determined based on the individual style and weight, and measured in characters not pixels. A comfortable measure is 45 to 75 characters (including punctuation and spaces) per line.
Example
Getting the line length right is important to ensure that the reader can maintain a good rhythm. If the line is too long, it will be difficult to find the beginning of the next line. But if the line is too short, it will be too easy to find the start of the next line, tempting the eye to move before fully processing what’s being said in the line above.
Getting the line length right is important to ensure that the reader can maintain a good rhythm. If the line is too long, it will be difficult to find the beginning of the next line. But if the line is too short, it will be too easy to find the start of the next line, tempting the eye to move before fully processing what’s being said in the line above.
Getting the line length right is important to ensure that the reader can maintain a good rhythm. If the line is too long, it will be difficult to find the beginning of the next line. But if the line is too short, it will be too easy to find the start of the next line, tempting the eye to move before fully processing what’s being said in the line above.