Styleguide Styleguide

Typography

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.

light

The quick brown fox jumped over the lazy dog.

semibold

The quick brown fox jumped over the lazy dog.

The Source Sans Pro family is available in many weights and widths. For our brand, we only use the “Light”, and “Semibold” weights.

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.

bold

The quick brown fox jumped over the lazy dog.

Libre Baskerville has a limited number of weights. Therefore, we only typically use this font in a single weight, bold.

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 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.