Skip to content

Typography

For the twoday product world, default font is Libre Franklin.  

Libre Franklin should be used in Web applications over the official corporate font, Franklin Gothic.

Libre Franklin is a free to use open source font made specifically for Web applications. Franklin Gothic is a licensed font family, which can quickly cumulate additional fees when scaling its use to many users.

Choosing Libre Franklin allows teams to allocate their resources more efficiently to essential aspects in their projects, without having to worry about licensing costs or hosting issues. 

Libre Franklin on Google Fonts
Libre Franklin on Adobe Fonts

Libre-Franklin-Specimen

Headings

The twoday Design System has two sets of headings, Large and Small.

Large set:
typography-headline-large

Smaller headings suit well in panel- and widget-based UIs, where the use of white space is limited or otherwise unsuitable. Smaller headings fit well in mobile applications as well.

This means that to accommodate clear titles with room for other UI elements, the titles here have to be quite small, starting from 32px or 2rem. In smaller screens, h1 can start from 24px. 

Small set:
typography-headline-small

Body text

There are 4 variations of body text, default starting from 16px (1 em). For enhanced readability, default line height is set to 150% (1.5 em). Link styles inherit their size from the content they are used in. 

Body text also includes two “eyebrow headings”. These are used as descriptive keywords or phrases, usually placed above the main headings. 

Body text:
typography-body-text

Principles

  • Avoid using fonts outside the one’s documented without a very good reason.  
  • Do not use the twoday brand font Bookman Old Style. 
  • Refrain from decreasing font line height to compensate for a lack of space.  
  • Align all paragraph text and headings on the left when they appear with paragraph text. 
  • Use normal and bold as font weights. In-between weights (light, medium, semi-bold, black) tend to create clutter. Create hierarchy & effect through type size, rather than introducing different font variants. For example: 
    • Use bold (700) text in headings 
    • Use regular (400) in body text. 

Accessibility

  • Use heading levels semantically. For example, next heading after h1 on the same page should be h2, not h3. 
  • When a user overrides the authored text spacing, make sure that content or functionality is not lost. Refer to Text Spacing documentation 
  • Avoid placing text over images where appropriate contrast cannot be assured.