Typography

Sphere typography is organized to keep things clean, readable, and non-invasive.

Typeface

Sphere’s primary typeface is Lato font — designed with an upright stress, open forms, and a neutral, yet friendly, appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics.

For more info about color options with type, check out our Color Combinations page.

Typographic Scale

Hello World.

An Adaptable Foundation

Overline

Headline 4

Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator...

Headline 3

Headline 5

By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in ...

Body Big

Headline 4

By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in ...

H1-60 / Lato Black
60px/ 80px
H1-50 / Lato Black
50px/72px
H2 / Lato Black
36px/44px
H3 / Lato Black
26px/36px
H4 / Lato Black
20px/32px
H5 / Lato Light
20px/32px
body-big-dark / Lato Regular
16px/24px
body-big-oblique / Lato Italic
16px/24px
body-small / Lato Regular
14px/22px
Overline / Lato medium
10px / 16px
Caption / Lato Regular
12px / 16px
CTA-primary/ Lato Black
20px/24px
CTA-secondary / Lato semibold
16px/24px
H1-mobile / Lato Black
32px/48px
H2-mobile / Lato Black
26px/32px
H3-mobile / Lato Medium
20px/32px

Type preview on background

Headline h-1 on Primary
Headline h-1 on Primary
Headline h-1 on Primary
#FFFFFF
Light
#FAFAFA
Dark
#D4D6D8
Typography High Emphasis / Dark 100%
Typography Medium Emphasis / Dark 80%
Typography Disabled / Dark 50%