Skip to content
Mesh

Typography

Typography helps to create structure and hierarchy of a page. Typography also helps users read, absorb and comprehend content. Communication should be clear and easy to read. Our font choices are a reflection of this. The typefaces below were chosen for their pairing and range of weights.

Fonts

We use fonts that are specifically crafted and designed for use on all screen types e.g. mobile, desktop and TV. This ensures that our UI is optimised to be legible, performs well and is frictionless as you move between nib products. We have limited our font weights to ensure clear simple hierarchy on page and minimal impact on load time of pages.

Roboto

Roboto is used for headings and should only be used for text that is over 18px in size. View the Heading component page for further information.

Weights used:

  • 300 Light
  • 400 Regular

Open Sans

Open Sans is used for body copy and should only be used for text that is 18px and smaller.

Weights used:

  • 400 Regular
  • 700 Bold

Optimal line length

Line length or measure refers to the number of characters in a line of text, before it wraps to the next line. Anything from 45 to 75 characters is widely regarded as a satisfactory line length for a single-column page with a 66-character line (counting both letters and spaces) regarded as ideal.

We are working on implementing measures to handle limiting the line length of copy by default, but for now it is still a consideration for designers and developers. Special attention must be paid to line length when rendering text at all screen sizes.

Applying color to type

Color documentation that provides guidance on color usage and a reference of Mesh named colors mentioned below can be found at the Colors component page.

Considerations to be mindful of:

  • As a general rule type should be set with Doc #444444.
  • To achieve the best contrast and to web accessibility, background colors (behind text) should be White #ffffff or Sneezy #eeeeee.
  • Charles #0a6d12 and Dopey #666 can be used on type 24px or higher.
  • Doc #444444 and Bashful #222 can be used on type of any size.
  • Colors not to be used for type are Kate #ffb400 (ever), Sneezy #eee, Sleepy #ddd, Happy #ccc and Grumpy #ccc.

How do I make sure the right fonts are used?

Use @nib-components/react-html to include the necessary fonts. Our Theme component will automatically apply the default fonts to body copy.

If you are creating mockups, download and install the fonts Roboto and Open Sans on your local machine.