Newskit Logo
About

Foundations

Fonts

Fonts form an important part of the interface, establishing styles for content such as headlines, sub-headlines or paragraphs, as well as more functional styles for items such as labels, tags and messaging.

Principles

Purposeful

The choice of font families are appropriate for their use e.g. decorative or functional, bold or subtle.

Legible

Font families are legible for screen use across multiple sizes.

Balanced

When using multiple font families, ensure they complement each other.

Overview

The NewsKit design system allows brands to define bespoke typography. Key characteristics such as font-family, font-weight, letter-spacing, line-height and font style are applied in a systematic way when creating a theme in Figma and creating a theme in code. A combination of the key characteristics are grouped to form typography presets that are applied to text interface elements.

Font attributes

Font family

Font family defines a set of characters of the same design. These characters include letters, numbers, punctuation marks, and symbols in various weights. Font families are mapped to design tokens. Font family can be applied to any text element using the fontFamily attribute on a Typography Preset.

TokenFont familyClassification

It is also important to consider a fallback font (web safe font) when defining a font family. Learn more about web safe fonts.

Font size

Font size defines how large the characters are displayed. Font sizes are mapped to a scale of design tokens. Font size can be applied to any text element using the fontSize attribute on a Typography Preset.

ExampleTokenValue

Font weight

Font weight defines the thickness of the character stroke. Font weights are mapped to a scale of design tokens. Font weight can be applied to any text element using the fontWeight attribute on a Typography Preset.

ExampleTokenValue

Font line-height

Font line-height defines the vertical space between lines of text and are mapped to a scale of design tokens. Font line-height can be applied to any text element using the fontLineHeight attribute on a Typography Preset.

ExampleTokenValue

To make sure your font styles round up or down to the nearest 4px value you need to use getLineHeight to acheive this, otherwise your fonts will not be aligned.

1lineHeight: getLineHeight(‘fontSize040’, ‘fontLineHeight020’)

The default baseline of NewsKit is 4px, and when calculating line-height for typographical styles we round either up or down to the nearest 4px value. This maintains a consistent visual approach when using typography across your UI designs.

Font letter-spacing

Font letter-spacing defines the horizontal space between each character and are mapped to a scale of design tokens. Font letter-spacing can be applied to any text element using the fontLetterSpacing attribute on a Typography Preset.

ExampleTokenValue

Additional font properties

The following properties can be applied to typography. These can be defined as part of the Style Presets. Having these properties on Style Presets promotes greater reuse of tokens.

PropertyExampleDescription

Font smooth

To ensure typography in components are rendered smooth and crisp (rounded to nearest pixel as opposed to the subpixel), apply -webkit-font-smoothing: antialiased. Emotion’s global style component can be used to set this as a default across your website.

Accessibility Considerations

For accessibility considerations related to typography, please refer to the Typography Presets.

Text crop

To reduce ‘pixel-pushing' and to keep consistent and predictable spacing across multiple font families, text-cropping is applied to remove additional space (leading) around text. This utility also helps to maintain a 4px baseline; keeping interfaces ‘pixel-perfect’.

The benefits of text cropping

Text cropping (sometimes referred to as leading trim) is an important aspect when creating accurate layouts, allowing for a true representation of spacing and alignment when using text blocks.

Text crop methods

Text-cropping works by cropping the bounding box of the text block component. The are several methods to crop both 'top' and 'bottom', by default NewsKit uses a paring of 'Cap Height' for the 'Top' and 'Baseline' for 'Bottom'. This is achieved by configuring negative margins.

Cap height

This crops to the top of an uppercase letter in the typeface. An example would be the top of an uppercase T.

Baseline

This crops to the baseline of all the lowercase letters in the typeface

Configuring Text-cropping

Text-cropping can be configured in both the code base and Figma.

Code

Text cropping is set up using font metrics, which allows for the easy generation of the code needed and takes into account the various nuances of each font used.

You can generate the code needed using Capsize following the 3 easy steps.

Design

When using a Text Block in Figma, Text-crop is applied using the Text-crop plugin to crop the selected text-block or all text-block components on the page. Learn more about Text-crop Figma plugin.

Applying Text-crop

Text-cropping can be configured in both the code base and Figma.

Code

When using a Text Block component in code, Text-crop is applied by default and can be removed by supplying a noCrop

1
2  import React from 'react';
3  import { TextBlock } from 'newskit';
4
5  export default () => (
6    <TextBlock noCrop>TextBlock Content</TextBlock>
7  );
8  

Design

When using a Text Block in Figma, Text-crop is applied using the Text-crop plugin to crop the selected text-block or all text-block components on the page. Learn more about Text-crop Figma

Examples

Below are some examples of using Text-crop:

Button - before Text-crop

Without the ability to crop text, the button text would be misaligned when changing font family or font size.

Button - after Text-crop

With text-cropping applied the button label is consistently positioned correctly when changing the font family or font size.

Card - before Text-crop

Without the ability to crop text, the layout of the card is unnecessarily elongated due to the misaligned spacing around the text blocks.

Card - after Text-crop

With text cropping applied, the spacing in the card is aligned correctly to the text blocks and the overall size of the card is exactly as defined.

Iconography

Icons provide additional context to information, provide a visual cue, or visually reinforce the interaction.

Iconography

Icons provide additional context to information, provide a visual cue, or visually reinforce the interaction.