The typography is modern and familiar. The OLAS 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. The body font is Source Sans Pro, and the display font is Libre Baskerville. Both fonts are freely available through Google Fonts.
Body font: Source Sans Pro
Source® Sans Pro, Adobe’s first open source typeface family, was designed by Paul D. Hunt. It is a sans serif typeface intended to work well in user interfaces. You can download and install Source Sans Pro for free from Google fonts.
Display font: Libre Baskerville
Libre Baskerville is a web font optimized for body text (typically 16px.) It is based on the American Type Founder’s Baskerville from 1941, but it has a taller x-height, wider counters and a little less contrast, that allow it to work well for reading on-screen. You can download and install Libre Baskerville for free from Google fonts.
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
- 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 Libre Baskerville. 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 Source Sans) 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.