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.
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 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.
Open Sans is used for body copy and should only be used for text that is 18px and smaller.
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.
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
- To achieve the best contrast and to web accessibility, background colors (behind text) should be
Dopey #666can be used on type 24px or higher.
Bashful #222can be used on type of any size.
- Colors not to be used for type are