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
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.
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 of mobile, auto, web and wear text on light, gray and dark