Typography

Cross Platform Font Options

Primary Typeface – Specifically for product design, as a rule and wherever possible, use Helvetica Neue. Its clean confidence makes it ideal for our product design. After this, use platform specific fonts where needed. 

 

Used for Android products  Includes Android Mobile, Android TV and SUI Android Auto.                   

Used just for Wearables – Apple's San Fransisco font was designed specifically for legibility on their Apple Watch. 

 

Used for Microsoft products  Specifically the XBOX ONE

Used for Auto products 


Typographic Scale

These are general recommended guidelines and best practices for typographic scale across each platform. 'Micro' refers to smaller text that is used for footers, terms, labels with all-caps, and less important informational text. 'Small' is usually used as a secondary style, supporting the larger primary text. Large is used for list items, top items in browsing, song titles etc. 'X-Large' is used more rarely, such as page titles. Sometimes there will be a need for exceptions to these rules. 

Mobile Type Scale

General fonts sizes used across our mobile apps. These sizes are based on iPhone4/5 and are scaled up for larger phones. Android uses sp/dp. 

 

Wearables Type Scale

Because of the simplification and lack of content on watch screens, there isn't a need for a wide hierarchy of font sizes. Type is large enough to quickly read. 

 

Automotive Type Scale

There is a larger and wider range for Auto because text needs to be easily and quickly legible while driving. Text is no smaller than approximately 22pt. 

Home Entertainment Type Scale

A larger and wider scale is needed for Home because of the 10-foot viewing experience and can enhance screen saver modes. Text is not smaller than 22pt. 

 

Web Type Scale

Web font sizes - simpler with a wider scale. Minimum size is 13pt for descriptions and footers. Display is used in hero sections. 


Text Colors

These are standard type colors for light, gray, and dark backgrounds. Text maintains a certain contrast ratio to ensure legibility and hierarchy. True black text on white backgrounds is too harsh on the eyes. 

 

Examples 

auto_example.gif
 

Examples of mobile, auto, web and wear text on light, gray and dark