responsive mode

Typography

We use a variation of Apax for all our type on Zuto.

The font is a clean, bold and clear Sans Serif that doesnt detract from the content and matches our compay ethos of transparency.

Core Typography

Marketing Typography

Mobile 320px - 599px

This matches desktop however we will refine.

Headings

H1

Apax Bold

32/36

H2

Apax Bold

26/30

H3

Apax Regular

22/32

H4

Apax Regular

18/24

Body

Large

Apax Regular

16/26

Body Copy

Apax Regular

16/26

Small Print

Apax Regular

14/20

Tablet 600px - 999px

This matches desktop however we will refine.

Headings

H1

Apax Bold

50/50

H2

Apax Bold

40/40

H3

Apax Regular

26/30

H4

Apax Regular

20/26

Body

Large

Apax Regular

20/34

Body Copy

Apax Regular

16/26

Small Print

Apax Regular

14/20

Desktop 1000px +

Headings

H1

Apax Bold

50/50

H2

Apax Bold

40/40

H3

Apax Regular

26/30

H4

Apax Regular

20/26

Body

Large

Apax Regular

20/34

Body Copy

Apax Regular

16/26

Small Print

Apax Regular

14/20

Fonts

The font we use at Zuto is called Apax. The font files are stored on our CDN (https://assets.zuto.com) and we import it vis CSS.

The code below is taken directly from our font SASS on GitHub.

@font-face {
  font-family: 'Apax';
  src: url('//assets.zuto.com/fonts/ApaxThree-Regular.eot');
  src: url('//assets.zuto.com/fonts/ApaxThree-Regular.eot?#iefix') format('embedded-opentype'), url('//assets.zuto.com/fonts/ApaxThree-Regular.woff') format('woff'), url('//assets.zuto.com/fonts/ApaxThree-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Apax';
  src: url('//assets.zuto.com/fonts/ApaxThree-Bold.eot');
  src: url('//assets.zuto.com/fonts/ApaxThree-Bold.eot?#iefix') format('embedded-opentype'), url('//assets.zuto.com/fonts/ApaxThree-Bold.woff') format('woff'), url('//assets.zuto.com/fonts/ApaxThree-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

Mobile 320px - 599px

Headings

H1

Apax Bold

30/34

H2

Apax Bold

22/36

H3

Apax Regular

22/26

H4

Apax Regular

18/24

Body

Large

Apax Regular

20/24

Body Copy

Apax Regular

18/22

Small Print

Apax Regular

14/20

XS Print

Apax Regular

12/16

Tablet 600px - 999px

Headings

H1

Apax Bold

35/39

H2

Apax Bold

30/34

H3

Apax Regular

26/30

H4

Apax Regular

20/24

Body

Large

Apax Regular

26/30

Body Copy

Apax Regular

20/24

Small Print

Apax Regular

14/18

XS Print

Apax Regular

12/16

Desktop 1000px +

Headings

H1

Apax Bold

35/39

H2

Apax Bold

30/34

H3

Apax Regular

26/30

H4

Apax Regular

20/24

Body

Large

Apax Regular

22/26

Body Copy

Apax Regular

20/24

Small Print

Apax Regular

14/18

XS Print

Apax Regular

12/16