Typography

System Type

We strive for our products to be reliable and predictable. For this reason, we use system typefaces for most of our written word. System typefaces come pre-installed on every device. They are battle tested, free to use and have little to no technical overhead.

On native Apple products, we use San Francisco. On Android, we use Roboto. And on the web and in marketing materials, we use Helvetica (with font stack fallbacks of Arial and sans-serif).


Units

For the sake of simplicity, we are using pixels (px) as our standard unit of measurement for fixed values in this documentation. Pixel values will need to be converted for each platform.

For type on the Web, we’re using root ems (rem) with a 16px base. This means 1rem = 16px, or 1px = 0.0625rem.

For iOS, type and every other dimension uses points (pt). This means that in the @1x display resolution 1px = 1 pt. For different display resolutions the px value will need to be adjusted accordingly (e.g., 1pt @2x = 0.5px and 1pt @3x = 0.33px).

For Android, type and every other dimension uses density-independent pixels (dp). This means that in the medium density (mdpi) display density 1px = 1dp. For different display densities the px value will need to be upscaled accordingly (e.g., 1dp @hdpi = 1.5px, 1dp @xhdpi = 2px, 1dp @xxhdpi = 3px, and 1px @xxxhdpi = 4px).

We chose pixels as our the common denominator because it is the default unit in graphics software (Sketch, Photoshop, Illustrator, etc.) when designing for the screen.

Marketing Type sizes for print output are labeled as points (pt).

Relative values are labeled as a percent (%). These will also need to be converted to appropriate values (i.e., 3% = 0.03em).


Attributes

With the typeface being determined by device, it becomes all the more important for product cohesion to maintain consistency with the other typography attributes.

Outside of typeface, there are six common attributes when displaying type. They are size, weight, color, line height, character spacing and capitalization.


Style

When it comes to typography in our products, form follows function. We aim for optimal readability and clear hierarchy on a variety of devices.

To support a fresh and clean look, our Headings are lighter weight, lower contrast color, smaller line height and tighter character spacing. Subheads are set in a bold weight to convey ownership over small areas. An assortment of Text sizes are available to allow for maximum flexibility in complex interfaces. Item Titles stand back with less contrasting colors to give priority to items.

Capitalization

To support our understated characteristic and readability, uppercase is only recommended in Item Titles. Item Titles with a probability of being longer than 15 characters or two words should not be set in uppercase as it becomes more difficult to read.

Color

Type should be set in Content Colors.


Preferred Styles

For design coherency we have established a selection of preferred treatments with specific size, weight, color, line height, character spacing and capitalization.

All specimens are set in Helvetica in the Dark Environment.


Headings

Headings are for top level ownership. We provide three levels of headings. While hierarchical order should be maintained (i.e., Level 2 should not “own” a Level 1), not all Headings are needed on every view. The level of Heading you select should be based on providing proper hierarchy and visual coherency on the view.

Headings Specimen

Small Screen Headings

On pocket-sized mobile devices, the oversized nature of Headings can be a bit too overpowering. For these little displays, Small Screen variations should be used. For responsive web design, smaller handheld devices should be targeted to use these sizes.

Small Screen Headings Specimen


Subhead

Subheads provide ownership of a specific area of an interface, such as a list or small text block. The default Subhead is set at the same size as the default Text size (16px) to convey ownership of the area but not dominate the rest of the view.

Subhead Specimen

Subhead + Small

The Small variation of Subheads should be used to own smaller text or owned by a default Subhead. Subhead + Small would likely be used in very dense interfaces.

Subhead + Small Specimen

Subhead + Subtle

The Subtle variation of Subhead decreases the color contrast to provide another layer of Subhead hierarchy if needed. It would most often be paired with the Subhead + Small variation.

Subhead + Subtle Specimen


Text

Text is our most common typographical element. Our default Text is predictable and honed for readability with a regular weight, standard size, mid contrast with breathable line height.

Text Specimen

Text + Tight

The Tight variation of Text decreases the line height to save space. It is intended for dense interfaces or blocks of copy constrained to a small area, such as tool tips. Because it is more difficult to read, the Tight variation is not intended for long blocks of copy.

Text + Tight Specimen

Text + Large

The Large variation of Text increases the type size and line height, but decreases the weight. This Large text is intended for situations when the primary use of the view is reading, such as long form text or an article.

Text + Large Specimen

Text + Small

The Small variation of Text decreases the size of the type. Smaller text can be used to create hierarchy or to save space in dense interfaces. Small can be used with the Tight variation.

Text + Small Specimen

Text + Micro

The Micro variation of Text is the minimum size available. While Micro can be used to save space or create hierarchy, it should be used sparingly as very small type can be difficult to read. Micro can be used with the Tight variation.

Text + Micro Specimen

Text + Additional

The Additional variation of Text changes the text to low contrast. The purpose of this variation is to create hierarchy and downplay as secondary information. Additional can be applied to any Text combination (Small, Micro and/or Tight). Additional is set in Nonessential (in both Light and Dark Environments) and does not comply to accessibility contrast standards. Text set in Additional should be an enhancement to the view, not essential for use.

Text + Additional Specimen


Item Title

An Item Title can be thought of as a Subhead to a single item. Item Title is set in Nonessential (in both Light and Dark Environments) and does not comply to accessibility contrast standards. Item Titles are supportive, giving greater context to the item, but not essential for use.

Item Title Specimen

Item Title + Small

The Small variation of Item Title decreases the size of the type. Small Item Titles can be used to create hierarchy and with smaller text. Small can be used with Caps.

Item Title + Small Specimen

Item Title + Caps

The Caps variation of Item Title changes the capitalization to uppercase. This variation exists to bring visual diversity to information blocks. The straight lines created by uppercase type makes a more graphical type element allowing for interesting visual rhythm. This is the only time uppercase typography is recommended. Item Titles with a probability of being longer than 15 characters or two words should not be set in Caps.

Item Title + Caps Specimen


Brand Typography

For brand typography, we selected typefaces and attributes to support our brand personality traits of smart, reliable, understated and confident.

We use Poppins for display typography and Helvetica for all other copy.


Display Typography

Our display typeface is Poppins Bold. Poppins is a geometric sans-serif with strong slab-like characters. With slightly condensed character spacing and line-height, strong brand-focused headlines come across as both understand and confident.

Only headlines should be set in Poppins Bold. No other weights of Poppins should be used.

Type sizes for digital output are labeled as pixels (px). Type sizes for print output are labeled as points (pt).

Display Typography


Display Typography Usage Dos and Don'ts


Brand Text

For body copy we use Helvetica as it conveys our reliable personality trait. This aligns with typography in the web application, therefor provides a consistent visual from the brochure website to the authenticated experience.

Display Typography


Uniform Typography

A Sketch file with Uniform Typography style attributes for Headings, Subheads, Text, Item Titles.