Typography
The typography is modern and familiar. The Vitae brand uses fonts that you may see in your everyday life as you use your phone or computer. Both fonts are from Google and are widely used. Their ubiquity and familiarity may help users feel immediately comfortable with the brand, while their clarity and legibility ensure that brand materials are accessible and easy to understand.
The body font is Roboto, and the display font is Montserrat. Both fonts are freely available through Google Fonts.
Body font: Roboto
Most type — such as flowing body text, sidebars, and user interface elements — should be set in Roboto, an understated but assertive “neo-grotesque” sans-serif from Google. You may recognize this font as the default system font on Android, Google Maps, and YouTube since 2013. It includes a wide range of weights with matching oblique styles. It also includes condensed widths for contexts where space is constrained (such as mobile interfaces).
You can download and install Roboto for free from Google fonts.
- light
-
The quick brown fox jumped over the lazy dog.
- regular
-
The quick brown fox jumped over the lazy dog.
- bold
-
The quick brown fox jumped over the lazy dog.
Display font: Montserrat
Headlines and subheadings should be set in Montserrat. Montserrat is a geometric sans-serif typeface designed by Argentinian designer Julieta Ulanovsky. The design was inspired by signage from her historical Buenos Aires neighborhood of the same name.
You can download and install Montserrat for free from Google fonts.
- light
-
The quick brown fox jumped over the lazy dog.
- regular
-
The quick brown fox jumped over the lazy dog.
- bold
-
The quick brown fox jumped over the lazy dog.
Fallback and secondary fonts
There are some contexts where it is not possible to use the specific brand fonts. You may not have privileges to install these fonts on your office computer, or you may be using software with limited font choices.
In cases where the brand fonts are not available, you may instead use a system default sans-serif font. In most cases, the default sans-serif will be visually similar to our brand fonts, and equally legible. Used alongside our color palette and scale, the brand will still be consistent and recognizable.
- Windows: Segoe UI or Arial
- Android: Roboto is already the default and should be pre-installed
- MacOS/iOS/iPadOS: San Francisco
Usage guidelines
- Use lighter weights for larger type sizes, and regular weights for smaller sizes. At larger sizes, lighter weights feel cleaner and clearer, while at smaller sizes (below
1rem/16px/14pt), slighty heavier weights are more legible. - For larger display type (such as main headings or callouts), tracking should be reduced slightly for Montserrat. It’s a wide font with relatively open kerning, and tighter tracking makes headlines feel more compact and visually clear.
- In a web- or app-based user interface, use the system default sans-serif font (instead of Roboto) for body text. In the case of a website, this will help pages load faster by reducing the number of webfonts that need to be downloaded. In the case of an app, it will feel more consistent with the rest of the operating system and, in turn, more familar to the user.