Skip to content

Typography

Our typefaces are Bookman Old Style Pro and Franklin Gothic ATF.

Bookman Old Style
The typeface is used for headlines, sub-headings and summary.

Franklin Gothic
The typeface is used for highlighting, eyebrow, body copy, and captions.

We have defined and implemented a font hierarchy, which you can see below.

Use the predefined settings when building your web pages.
twoday-co3-design_colors-black
Bookman Old Style Pro Regular
Font size 50 px, line height 60 px
Use for headings
twoday-co3-design_typography-heading-h2
Bookman Old Style Pro Regular
Font size 40 px, line height 48 px
Use for sub-headings
twoday-co3-design_typography-heading-h3
Bookman Old Style Pro Regular
Font size 26 px, line height 31,2 px
Use for sub-headings
twoday-co3-design_typography-heading-h4
Bookman Old Style Pro Regular
Font size 20 px, line height 24 px
Use for sub-headings
twoday-co3-design_typography-heading-h5
Franklin Gothic ATF Regular
Font size 22 px, line height 26,4 px
Use for eyebrows
twoday-co3-design_typography-heading-h6

Franklin Gothic ATF Regular
Font size 18 px, line height 21,6 px
Use for eyebrows small

twoday-co3-design_typography-introduction
Franklin Gothic ATF Regular
Font size 24 px, line height 36 px
Use for introductions and quotes
twoday-co3-design_typography-body
Franklin Gothic ATF Regular
Font size 18 px, line height 27 px
Use for body copy
twoday-co3-design_typography-body-small
Franklin Gothic ATF Regular
Font size 16 px, line height 24 px
Use for body copy in cards and captions

Highlighting

Highlighted words are an important visual part of our identity. The highlighted word(s) should always be in Franklin Gothic ATF bold.

Here you can see how to use highlighting.

twoday-co3-design_typography-highlighting-heading-h1
Franklin Gothic ATF Bold
Font size 50 px, line height 60 px
Use for headings
twoday-co3-design_typography-highlighting-heading-h2
Franklin Gothic ATF Bold
Font size 40 px, line height 48 px
Use for sub-headings
twoday-co3-design_typography-highlighting-heading-h3
Franklin Gothic ATF Bold
Font size 26 px, line height 31,2 px
Use for sub-headings
twoday-co3-design_typography-highlighting-heading-h4
Franklin Gothic ATF Bold
Font size 20 px, line height 24 px
Use for sub-headings
twoday-co3-design_typography-highlighting-heading-h5
We don’t use highlighting in eyebrows
twoday-co3-design_typography-highlighting-heading-h6
We don't use highlighting in eyebrows
twoday-co3-design_typography-highlighting-heading-introduction
Franklin Gothic ATF Bold
Font size 24 px, line height 36 px
Use for introductions and quotes
twoday-co3-design_typography-highlighting-heading-body
Franklin Gothic ATF Bold
Font size 18 px, line height 27 px
Use for body copy
twoday-co3-design_typography-highlighting-heading-body-small
We don’t use highlighting in body copy in cards and captions