Typography

Our typeface

OVO Circular is our custom brand font. We use it everywhere across our brand so that we always look distinctly OVO.

OVO Circular exmample

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.

3 font weights

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

24

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.

 

type example - fallback font 1

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)

 

type example - fallback font 2

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