Typography

Contents

Font
Typographic Scale
Sizes

Font

ITC Johnston is our core font. It is used for all printed marketing and product materials and for online display copy. We use ITC johnston in two weights: light and medium.

ITC Johnston Light

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

ITC Johnston Medium

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

Typographic Scale

Use the following scales for typography across Admiralty websites. All spacing is based on our 4px baseline.

Heading 1 - Large

The quick brown fox jumped over the lazy dog.

Heading 1 - Medium

The quick brown fox jumped over the lazy dog.

Heading 1 - Small

The quick brown fox jumped over the lazy dog.

Heading 2 - Large

The quick brown fox jumped over the lazy dog.

Heading 2 - Medium

The quick brown fox jumped over the lazy dog.

Heading 2 - Small

The quick brown fox jumped over the lazy dog.

Heading 3,4,5 - Large

The quick brown fox jumped over the lazy dog.

Heading 3,4,5 - Medium

The quick brown fox jumped over the lazy dog.

Heading 3,4,5 - Small

The quick brown fox jumped over the lazy dog.

Label - Large

The quick brown fox jumped over the lazy dog.

Label - Medium

The quick brown fox jumped over the lazy dog.

Label - Small

The quick brown fox jumped over the lazy dog.

Paragraph - Small

The quick brown fox jumped over the lazy dog.

Paragraph - Medium

The quick brown fox jumped over the lazy dog.

Paragraph - Large

The quick brown fox jumped over the lazy dog.

Sizes

The sizes we use on our website are taken from the Typographic Scale above and are applied

CSS variables

Variable

Rem

Px

--admiralty-font-size--3

0.688

11.008

--admiralty-font-size--2

0.75

12

--admiralty-font-size--1

0.875

14

--admiralty-font-size--0

1

16

--admiralty-font-size-1

1.375

22

--admiralty-font-size-2

1.5

24

--admiralty-font-size-3

1.75

28

--admiralty-font-size-4

2

32

--admiralty-font-size-5

2.25

36

--admiralty-font-size-6

2.75

44

--admiralty-font-size-7

3.5

56

Font weights

Variable

Weight

--admiralty-font-weight-normal

300

--admiralty-font-weight-medium

400

--admiralty-font-weight-bold

700

Spacing variables

Variable

Rem

Px

--admiralty-spacing-0

0

0

--admiralty-spacing-1

0.3

4

--admiralty-spacing-2

0.5

8

--admiralty-spacing-3

0.8

12

--admiralty-spacing-4

1

16

--admiralty-spacing-5

1.3

20

--admiralty-spacing-6

1.5

24

--admiralty-spacing-7

1.8

28

--admiralty-spacing-8

2

32

--admiralty-font-size-6

2.75

44

--admiralty-spacing-auto

auto

auto

--admiralty-spacing-unset

unset

unset

--admiralty-spacing-inherit

inherit

inherit

The following values are based on the assumption that your browser default is set to 16px.

Desktop

Px

Rem

Line height

Font weight

Heading 1 - Medium

44

2.75

52

400

Heading 2 - Large

32

2

40

400

Heading 3, 4, 5 - Large

22

1.375

28

400

Heading 3, 4, 5 - Medium

16

1

24

400

Heading 3, 4, 5 - Small

14

0.875

20

400

Paragraph - Large

16

1

24

300

Paragraph - Small

12

0.75

16

300

Label - Large

14

0.875

20

400

Label - Medium

12

0.75

16

400

Tablet / Mobile

Px

Rem

Line height

Font weight

Heading 1 - Medium

42

2.625

54

400

Heading 2 - Large

30

1.875

42

400

Heading 3, 4, 5 - Large

20

1.25

30

400

Heading 3, 4, 5 - Medium

16

1

24

400

Heading 3, 4, 5 - Small

14

0.875

24

400

Paragraph - Large

16

1

24

300

Paragraph - Small

12

0.75

24

300

Label - Large

14

0.875

24

400

Label - Medium

12

0.75

24

400

Privacy Policy

Accessibility