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.