Typography & Fonts

Primary

The primary typeface for Xylem is Avenir Next Pro.

We own the license for the web fonts, should you need access to them please contact James.Bayne@xyleminc.com.

Our partner agencies should own these fonts to carry out the work for our communication materials. Should you require the Desktop font, please purchase the license from: http://www.fonts.com/font/linotype/avenir-next/family-pack

Primary Typeface

Secondary typefaces

Use Avenir Next Pro Condensed for legal/extensive amounts of copy, especially on packaging where space constraints are a concern. Note: Do not use for primary messaging such as headlines, body copy and callouts. For all desktop applications, use Arial.

Secondary Typeface

International typefaces

The following typefaces are suggested for international applications.

International Typefaces

Type hierarchy

A consistent approach to type hierarchy and layout is important for creating engaging, accessible communications. While there is no one-size-fits-all solution for type hierarchy, keep these general principles in mind when setting text.

Headlines

Headlines should be the largest-sized text on the page. Assign Avenir Next Pro Medium and core colors to headlines to ensure that they stand out and grab the reader’s attention. Track in headline text to allow for easy reading, as shown below.

Introductory text

Text that immediately follows headlines generally should be sized smaller than headlines, but larger than body text to allow for a quick, easy read. Set introductory text in Avenir Next Pro Medium and core colors. When using all-caps, track out the text so that it appears open and clean.

Paragraph headings

Paragraph headings should be in Avenir Next Pro Medium or Bold, using core colors or the same color as body text.

Body text

Body text should be set in Avenir Next Pro Regular in Xylem Gray. Use color or bold treatments sparingly and only to attract attention to key points. When there is concern over the legibility of Xylem Gray, use black.

Call-outs

Call-outs should be sized larger than body text and set in Avenir Next Pro Medium, using core or accent colors.

Type hierarchy example

Type Hierarchy

Incorrect Usage

There are a few things to avoid when working with typography. Some examples of misuse are illustrated below.

Type Incorrect Use 1
Do not use unapproved typefaces.
Type Incorrect Use 2
Do not add drop shadows or special effects to text.
Type Incorrect Use 3
Do not justify blocks of text.
Type Incorrect Use 4
Do not skew, distort or place text at an angle.
Type Incorrect Use 5
Do not use all-caps in headlines or long blocks of text.
Type Incorrect Use 6
Do not center-align blocks of text.

Rev: 11-07-2016