Everything at your fingertips

Typography

This guideline explains how to use our typography styles across Zionsbancorp web applications.

Type Face

Zions Bank official typeface is DIN Next LT Pro. It should be used for all non-interactive marketing pieces. Where Din is not available, Arial is an approved substitute typeface.

Interactive Type Face

Our Interactive typeface is Open Sans.

Dispay Type Faces

Although DIN can be used as a display typeface. The door is also open to Museo and Din Condensed.

Various versions of BBC ReithAccteped fonts from our Branding Guide.

Type sizes

We’ve developed our type sizes to be suitable for average screen densities and reading comfort under typical conditions.

We size our type across the following four breakpoint groups to suit a range of devices and input methods:

  • Group A - Default sizing 0 - 319 pixels (typically feature phones).
  • Group B - 320 - 599 pixels (typically smart phones).
  • Group C - 600 pixels and above (typically tablet devices).
  • Group D - 600 pixels and above when touch is not available (typically desktop or laptop screens).

To make the type styles reusable across different page-types and contexts, we've set up a naming convention that comes from traditional type measuring techniques.

The sizes shown below correspond to size and line-height (size/line-height) and are in pixels, based on a baseline of 72 pixels per inch (ppi). We recommend you set font sizes using relative units to allow for the changing nature of the user’s browser. This creates uniformity across different screen sizes and capabilities.

Example Usage Group A Group B Group C Group D
Hero or blog post title 28/32 32/36 52/56 44/48
Article title or section header 20/24 24/28 36/40 32/36
Primary headline on indexes 20/24 22/26 28/32 28/32
Sub header 20/24 20/24 26/30 24/28
Headline title or subtitle 18/22 18/22 21/24 20/24
Article body copy only 15/20 16/22 18/24 16/22
Index links, titles & headlines 15/20 16/20 18/22 16/20
Index body copy & image captions 15/18 15/18 15/20 14/18
Time stamps and bylines 14/16 14/18 14/18 13/16
Small header capitals 12/16 12/16 13/16 12/16

Weight, style and tracking

Weight and style

Deciding whether to use DN Next LT Pro or DN Next LT Pro - Condensed and and which weight is entirely dependent on what best suits your product and audience. You can mix and match the various options to help create hierarchy and emphasis on key text.

Heavier weights should mainly be used for headlines, titles and links – basically anything interactive or that needs to shout.

Considerations

As shown in our Type Sizes section above, we use a limited number of sizes and styles on our typographic scale. This helps with consistency across different contexts and page types.

When using the scale, it’s also important to think carefully about line length and colour contrast.

Here are a few hard and fast rules that will help in this area.

Line length

For body copy, try not to have more than 60 characters per line. Make use of the Grid to optimise your layout to suit.

Colour contrast

All text and background colour combinations must be WCAG 2.0 AA compliant.

This is a ratio of 4.5:1 for text 18 pixels or less in size, and 3:1 for text larger than 18px or text that is bold and larger than 14px.

Type in action

Our typographic scale can be used across all page types, catering for a wide range of content across Zionsbancorp.

An example of our type hierarchy used on a promo module.An example of our type hierarchy used on a promo module.
An example of our type hierarchy used on an article page.An example of our type hierarchy used on an article page.
An example of our type hierarchy used on a live text commentary stream.An example of our type hierarchy used on a live text commentary stream.
An example of our type hierarchy used on a blockquote in an article page.An example of our type hierarchy used on a blockquote in an article page.

Additional type sizes for larger contexts

Alongside our main set of type sizes, we have created a range of additional 'display type' sizes. 

This display type can give greater impact where neccessary, especially at large screen sizes. It should only be used for immersive storytelling and infographic experiences. 

The sizes use the same set of breakpoint groups as the standard type sizes (Groups A–D) and follow the same weight, line height & tracking rules.

Group A Group B Group C Group D
78/84 96/104 192/208 140/148
60/64 78/84 156/170 116/124
50/54 64/72 124/136 96/104
40/44 52/60 94/104 76/84
32/36 40/44 72/80 56/60