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