Our typeface
OVO Circular is our custom brand font. We use it everywhere across our brand so that we always look distinctly OVO.
We can use it in three different weights.
We want to make sure we stay accessible to everyone. So Book and Bold don’t include our angled punctuation.
Type styling
This type scale includes contrasting and flexible styles to support a range of use cases. It helps us feel cohesive across lots of different touch points.
This style guide should be used as a guide when typesetting across the brand. Feel free to add sizes needed for specific applications, long as they correlate to one of our styles.
When setting type, visually judge what works best for the application.
Display 0
|
Large screens |
Small screens |
Font size |
120+ |
80+ |
Line height |
95% / 114 |
95% / 76 |
Letter spacing |
-4% |
-4% |
Display 1
|
Large screens |
Small screens |
Font size |
96 |
72 |
Line height |
95% / 92 |
95% / 68 |
Letter spacing |
-4% |
-4% |
Display 2
|
Large screens |
Small screens |
Font size |
96 |
72 |
Line height |
95% / 76 |
95% / 61 |
Letter spacing |
-4% |
-4% |
Display 3
|
Large screens |
Small screens |
Font size |
64 |
48 |
Line height |
100% / 64 |
100% / 48 |
Letter spacing |
-4% |
-4% |
Heading 1
|
Large screens |
Small screens |
Font size |
48 |
32 |
Line height |
48 |
32 |
Letter spacing |
-4% |
-4% |
Heading 2
|
Large screens |
Small screens |
Font size |
32 |
28 |
Line height |
32 |
28 |
Letter spacing |
-4% |
-4% |
Heading 3
|
Large screens |
Small screens |
Font size |
28 |
24 |
Line height |
32 |
28 |
Letter spacing |
-2% |
-2% |
Heading 4
|
Large screens |
Small screens |
Font size |
24 |
20 |
Line height |
28 |
24 |
Letter spacing |
-2% |
-2% |
Lead
|
Large screens |
Small screens |
Font size |
24 |
20 |
Line height |
28 |
24 |
Letter spacing |
0% |
0% |
Base
|
Large screens |
Small screens |
Font size |
16 |
16 |
Line height |
24 |
20 |
Letter spacing |
0% |
0% |
Small
|
Large screens |
Small screens |
Font size |
14 |
14 |
Line height |
20 |
20 |
Letter spacing |
0% |
0% |
Alternative fonts
Where OVO Circular is unavailable for a technical reason, we fall back to these alternative fonts.
Google font
We use Figtree for Google Workspace. It has similar characteristics as our brand font. We use three weights of Figtree to replicate the three weights of our brand font:
– Figtree Regular (to replicate OVO Book) – Figtree Bold (to replicate OVO Bold) – Figtree ExtraBold (to replicate OVO Black)
Fallback font
We need a fallback font when we’re sending files externally with editable text (like emails, Word documents, Powerpoint decks etc). The recipient won’t have our brand font installed on their system, so we need a universal one. We’ve chosen Arial because it’s widely available. Arial Unicode MS is an extended version of the Arial typeface to support a large set of international characters including:
– Arabic – Hindi – Japanese – Simplified Chinese We use Arial Regular and Bold weights.
Typography tokens
Font families
Token name (Native) |
Font family (Native) |
ovo-core-font-family-heading-native |
OVOCircularTT-Black |
ovo-core-font-family-body-bold-native |
OVOCircularTT-Bold |
ovo-core-font-family-body-native |
OVOCircularTT-Book |
ovo-core-font-family-mono-native |
Courier New |
Token name (Web) |
Font family (Web) |
ovo-core-font-family-heading-web |
OVOCircular |
ovo-core-font-family-body-bold-web |
OVOCircular |
ovo-core-font-family-body-web |
OVOCircular |
ovo-core-font-family-mono-web |
IBM Plex Mono |
Font weights
Token name |
Font weight name |
Font weight value |
ovo-core-font-weight-book |
OVO Circular Book |
450 |
ovo-core-font-weight-bold |
OVO Circular Bold |
700 |
ovo-core-font-weight-black |
OVO Circulr Black |
900 |
Font sizes and line heights
Font size token name |
Font size value |
Line height token name |
Line height value |
ovo-core-font-size-heading1-large |
4.8rem |
ovo-core-lineheight-heading1-large |
4.8rem |
ovo-core-font-size-heading1-small |
3.2rem |
ovo-core-lineheight-heading1-small |
3.2rem |
ovo-core-font-size-heading2-large |
3.6rem |
ovo-core-lineheight-heading2-large |
3.6rem |
ovo-core-font-size-heading2-small |
2.8rem |
ovo-core-lineheight-heading2-small |
2.8rem |
ovo-core-font-size-heading3-large |
2.8rem |
ovo-core-lineheight-heading3-large |
3.2rem |
ovo-core-font-size-heading3-small |
2.4rem |
ovo-core-lineheight-heading3-small |
2.8rem |
ovo-core-font-size-heading4-large |
2.4rem |
ovo-core-lineheight-heading4-large |
2.8rem |
ovo-core-font-size-heading4-small |
2.0rem |
ovo-core-lineheight-heading4-small |
2.4rem |
ovo-core-font-size-lead-large |
2.4rem |
ovo-core-lineheight-lead-large |
2.8rem |
ovo-core-font-size-lead-small |
2.0rem |
ovo-core-llineheight-lead-small |
2.4rem |
ovo-core-font-size-body-large |
1.6rem |
ovo-core-lineheight-body-large |
2.4rem |
ovo-core-font-size-body-small |
1.6rem |
ovo-core-lineheight-body-small |
2.4rem |
ovo-core-font-size-small-large |
1.4rem |
ovo-core-lineheight-small-large |
2rem |
ovo-core-font-size-small-small |
1.4rem |
ovo-core-lineheight-label-small |
2rem |
ovo-core-font-size-label-large |
1.4rem |
ovo-core-lineheight-label-large |
2rem |
ovo-core-font-size-label-small |
1.41em |
ovo-core-lineheight-label-small |
2rem |