Type Is the Foundation

Type is the primary vehicle used to transport content to our users to satisfy their need for information and action. By leveraging correct semantics, visual hierarchy and measure we can ensure that our text content provides the necessary structure and flow for our users to quickly find what they‘re looking for.

Settings

Font Stack: font-family: -apple-system, BlinkMacSystemFont, system-ui, 'Helvetica Neue', 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif;

We leverage system fonts for these reasons:

  • Increased performance and load time
  • Same font stack for all sites and properties without worrying about licensing
  • We’re using the same approach for email, apps and other digital properties

Note: The font stack should be used with the long-hand font-family: declaration to prevent Internet Explorer from reading -apple-system as a vendor prefixed property and ignoring the declaration completely. Reference(external link)

OS Version System Font
Mac OS X El Capitan San Francisco
Mac OS X Yosemite Helvetica Neue
Mac OS X Mavericks Lucida Grande (will use Helvetica Neue)
Windows Vista Roboto* (Segoe UI fallback)
Windows XP Roboto* (Arial fallback)
iOS 8 San Francisco
iOS 7 Helvetica Neue
Android Ice Cream Sandwich (4.0+) Roboto

* Roboto is a preferred fallback to system fonts in these instances and is being loaded via `@font-face`.


  • Last updated April 4, 2017
  • Authorable - Yes
  • Core - Typography