Design Tokens for Mesh have just been released!
Skip to content

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.

Buenos Aires

Buenos Aires is our default, sans-serif font for Copy, Headings and interactive elements like Buttons.

Weights used:

400 Regular

600 Semibold

700 Bold

Grenette Pro

Grenette Pro is our serif font, used almost exclusively for large Headings (size 1 to 3). It should be used only for page or section headings, or where nib's brand voice is used to communicate a value proposition.

Weights used:

600 Semibold

Fallbacks (Font stack)

In situations where the core brand fonts can't be loaded, Mesh reverts to a commonly-available font hierarchy, as below:

  • Grenette Pro > Georgia > serif (System Font)
  • Buenos Aires > -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif (System Font)

Line Height & Tracking

Line Height

For both Buenos Aires and Grenette Pro fonts, we use dynamic line-heights, varied across sizes. To maximise readability on web and digital devices, these diverge from our core brand guidelines, according to the following stipulations:

  • For size 1 to 3 headings, we use 100% line height.
  • For size 4 to 6 headings, we use 120% line height.
  • For body copy and blocks of text, we use 150% line height.

Example Size [1] heading over multiple lines

Example Size [2] heading over multiple lines

Example Size [4] heading over multiple lines

Example copy over multiple lines

Tracking

For both Buenos Aires and Grenette Pro fonts, Mesh applies a -2% (-0.02em) letter-spacing adjustment to all headings and text copy.

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.

Our Copy component has a built in line-length of 34em. At this point the text will wrap, even if there is space for it not to. This can be configured via a prop but special attention must be paid to line length when rendering text at all screen sizes to ensure it remains comfortably legible.

Applying color to type

For guidance on color usage, implementation and definitions within Mesh, refer to our Colors documentation.

Considerations to be mindful of:

  • Our default copy color is automatically set to Darkest (#434343).
  • When using other colors, you must ensure that the contrast ratio between the text and background is accessible. Refer to our Accessibility Checklist or our Colors documentation for more information.

Including fonts

In Figma, the supported font families, weights, line-height and tracking etc. are included automatically within our figma library. You do not need to have these fonts installed on your machine.

Including fonts in your app requires use of the Fonts package at the root of your app.