Typography
Type Style#
Typeface: Open Sans
Type Color#
Main text color: Charcoal
Muted text color: Charcoal lighter
Large screen#
| Style name | Weight | Size (px) | Line height (px) | Char spacing (px) | Text transform |
|---|---|---|---|---|---|
| Display Large | Semibold (600) | 28 | 32 | 0 | none |
| Display Medium | Regular (400) | 26 | 32 | 0 | none |
| Display Small | Regular (400) | 20 | 28 | 0 | none |
| Heading | Semibold (600) | 16 | 24 | 0 | none |
| Subheading | Semibold (600) | 12 | 16 | 0 | uppercase |
| Body | Regular (400) | 14 | 20 | 0 | none |
| Caption | Regular (400) | 12 | 16 | 0 | none |
Small screen#
| Style name | Weight | Size (px) | Line height (px) | Char spacing (px) | Text transform |
|---|---|---|---|---|---|
| Display Large | Semibold (600) | 24 | 28 | 0 | none |
| Display Medium | Regular (400) | 21 | 28 | 0 | none |
| Display Small | Regular (400) | 16 | 24 | 0 | none |
| Heading | Semibold (600) | 17 | 24 | 0 | none |
| Subheading | Semibold (600) | 13 | 16 | 0 | uppercase |
| Body | Regular (400) | 15 | 20 | 0 | none |
| Caption | Regular (400) | 13 | 20 | 0 | none |
Style usage#
Display large#
- Use for page titles or top-level screen titles
Display medium#
- Use for empty screen messaging
Display small#
- Use for modal titles
- Use for empty screen messaging
Heading#
- Use heading style to title the top-level section of a page. If there are more than one sections to a page, each section's title should use the heading style
Subheading#
- TBD
Body#
Most frequenly used text style. Use the body style for:
Input lables and fields
Buttons
Tab labels
Information
Table headings
Caption#
Use when content is compact and space is limited.
- Breadcrumbs
- Use on the second line in a table cell for secondary data
Emphasis styles#
Use the following styles for additional emphasis or de-emphases.
Muted#
Muted can be used with any of the core text styles. De-emphasizes content and provides another layer of visual hierachy - especially with content using the same text style. Common uses:
- Help text along with an input field
Bold#
Bold should be used only with body style. Common uses:
- Input labels
- Highlight a word or phrase in the interface copy. Example use bodl in the following body text: "Are you sure you want to delete product iphone7? This action cannot be undone"