Typography

Introduction

Typography creates clarity through hierarchy and aesthetics, guiding users intuitively through textual information and supporting reading comprehension. The controlled usage of type styles helps manage the display of content keeping it concise and understandable. The UPM type scale is made of a combination of predetermined type styles, including range of styles that support multiple design needs. Correct heading levels are important for screen readers and accessibility.

Typeface

UPM corporate typefaces are Futura PT and Vollkorn. Use Helvetica or Arial as a fallback sans-serif.

Futura PT can be licensed from Adobe fonts and Vollkorn from Google Fonts (please note to upload the Google font to your own servers and not to use the dynamic upload option for privacy reasons).

Body 1, 2 (Futura PT)  versus Body 3 (Vollkorn)

  • Body 1 Futura PT is used in short editorial content.
  • Body 2 Futura PT is used in elements where space and text amount is limited, for example in cards, preferably when referring to editorial content.
  • Body 3 Vollkorn is used in long editorial content.
  • List styles typography should be chosen according to Body style selection.

Type Color

Type color should be carefully considered, with legibility and accessibility as paramount concerns. Keep type color natural in running text.  Use of the UPM Bright green should be thought very carefully and sparingly to only highlight minimal amount of items on the page.

 

Content link color

Link color should be dark enough to create a good contrast on light backgrounds.