Typography is used to clearly present information and guide the user through experiences. Blueprint uses a restrained set of type styles and consistent hierarchy. Consistency in typography allows the user to recognize important features and scan through interfaces quickly.
Open Sans
Blueprint uses the Google open-source typeface Open Sans. Open Sans is a sans serif humanist typeface designed by Scott Matteson. Open Sans was chosen because it is a professional, neutral, and extremely legible typeface.
Scales
| Preview | Size | Weight |
|---|---|---|
| Heading 1 | 22px | Regular |
| Heading 2 | 15px | Semibold |
| Heading 3 | 12px | Bold |
| Heading 4 | 12px | Semibold |
| Lead Paragraph | 15px | Regular |
| Emphasized Body | 12px | Semibold |
| Primary Body | 12px | Regular |
| Muted Body 1 | 12px | Regular |
| Muted Body 2 | 12px | Regular |
| Muted Body 3 | 12px | Semibold |
Note: All text is required to have a minimum leading (line spacing) of 1.5 for readability.
Weights
Changing text weight is a quick way to denote to the user the importance of the message. This is why most of our headings and subheadings are either semibold or bold. Bolded text that is not a heading or subheading must have a reason why it is bolded. Never bold whole sentences.
Regular (400)
Semibold (600)
Bold (700)
Italics
Italicizing text can mean the same thing as bolded text. In Blueprint, we italicize text that is informative, but ancillary. Examples of this include 'As of' dates, help text, and notes (see above).
Regular Italic (400)