Typography is very important to Solaris; it plays a key part in telling our story. We use two typefaces to meet our needs with a third only for publications. We believe that delivering focused content starts with evocative language and we want our typography to deliver that.

Typefaces

Solaris uses three typefaces in its designs. These typefaces are our Productive, Expressive and Publication typefaces that are used for different reasons.

Lato (Productive Face)

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

For our primary typeface we use Lato. This face is used whereever we need to display content on the products and marketing material that has a focus on reading. Its robust weights lets us be flexible in its use across the board.

Filson Soft (Expressive Face)

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

The secondary typeface we use is Filson Soft. This face is our display and heading font. A geometric font, Filson Soft carries the design language into the visuals. We use Filson Soft whenever we want to put a stronger focus on the words and their design, rather than for information.

Merriweather (Publication Face)

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

The alternative typeface we use is Merriweather. Merriweather is a serif font that has a focus on readability. We only use this typeface is official print publications where there is a large about of content on each page. This font can be found in our Bots that Code book which has an academic voice and only uses our illustrations in limited scale. It is a replacement for Lato.

Scale

Our type scale follows a Golden (1:618) ratio. This scale allows us to have large expressive headings alongside our content.

11.089em (177.42px)
Solaris Type Scale
6.854em (109.66px)
Solaris Type Scale
4.326em (67.77px)
Solaris Type Scale
2.618em (41.89px)
Solaris Type Scale
1.618em (25.89px)
Solaris Type Scale
1em (16px)
Solaris Type Scale
0.618em (9.89px)
Solaris Type Scale
0.382em (6.11px)
Solaris Type Scale

Style

Typography creates purposeful texture, guiding users to read and understand the hierarchy of information. The right typographic treatment and the controlled usage of type styles helps manage the display of content, keeping it useful, simple, and effective.

We use three weights for our typefaces:

Bold (700)

Regular (400)

Light (300)

These help us create hierarchy of importance alongside the size of the text. When needed we also use the italic style to emphasize certain words or phrases in content. Italics are never to be used in headings.

Colour

Colour is important to create a sense of excitement in Solaris. However, we adhere to strict usability standards and thus all content should be limited to Primary (Void) or Secondary (Light). Only active links can break this with the use of Brand 1 (Sol). The colours should be used where the highest contrast is achieved. For disabled and lower hierachy content, a transparency may be applied. This is normally capped at 0.6. There is a guide in the colours page on what foreground and background combinations are allowed.

Hierarchy

Solaris uses 4 heading styles and 2 content styles. These alternate fonts and weights to achieve a strong visual hierarchy.