Typography
Typography is the most important aspect of the design. The typography is designed to highlight the most important elements on a page, and to naturally guide the eye toward other elements without the use of other visual elements like borders and boxes which adds clutter to the design.
Typeface
The typeface should be the default system font for the platform. This is to give the application a native look and feel, as well as reduce overall page weight.
| OS | Version | Font Library |
|---|---|---|
| Mac OS X | El Capitan or later | San Francisco |
| 20pt or higher | SF Pro Display | |
| 19pt or lower | SF Pro Text | |
| Mac OS X | Mavericks | Lucida Grande |
| Windows | Vista or later | Segoe UI |
| Windows | XP | Tahoma |
| iOS | iOS 9 or higher | San Francisco |
| 20pt or higher | SF Pro Display | |
| 19pt or lower | SF Pro Text | |
| WatchOS | San Francisco | |
| 20pt or higher | SF Compact Display | |
| 19pt or lower | SF Compact Text | |
| Android | 4.0 or later | Roboto |
| Android | 1.5 - 3.2.6 | Droid Sans |
System Font CSS
The CSS to utilize the system typeface is below.
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
Text Styles
The following text styles should always be used to ensure maximum consistency.
Header 1 – 29pt Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Header 2 – 21pt Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Header 3 – 19pt Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Header 4 – 17pt Semibold
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Header 5 – 15pt Medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Base Text – 17pt Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper.
Small Text – 15pt Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper.
Extra Small Text – 13pt Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper.