Newskit Logo

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
fontFamily010
DM Sans sans-serif
fontFamily020
Bitter serif
fontFamily030
Poppins sans-serif

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
The quick brown fox
fontSize010
12px
The quick brown fox
fontSize020
14px
The quick brown fox
fontSize030
16px
The quick brown fox
fontSize040
18px
The quick brown fox
fontSize050
20px
The quick brown fox
fontSize060
22px
The quick brown fox
fontSize070
24px
The quick brown fox
fontSize080
28px
The quick brown fox
fontSize090
32px
The quick brown fox
fontSize100
36px
The quick brown fox
fontSize110
40px
The quick brown fox
fontSize120
44px
The quick brown fox
fontSize130
48px
The quick brown fox
fontSize140
56px
The quick brown fox
fontSize150
64px
The quick brown fox
fontSize160
80px

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
The quick brown fox
fontWeight010
400
The quick brown fox
fontWeight020
500
The quick brown fox
fontWeight030
600
The quick brown fox
fontWeight040
700

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
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
fontLineHeight010
1
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
fontLineHeight020
1.125
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
fontLineHeight030
1.25
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
fontLineHeight040
1.5
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
fontLineHeight050
1.75
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
fontLineHeight060
2

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
The quick brown fox
fontLetterSpacing010
-0.5px
The quick brown fox
fontLetterSpacing020
-0.25px
The quick brown fox
fontLetterSpacing030
0
The quick brown fox
fontLetterSpacing040
0.25px
The quick brown fox
fontLetterSpacing050
0.5px

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
textAlignCSStext-align sets the horizontal position of text inside of a block
textDecorationCSStext-decoration sets the visual appearance of decorative lines on text
textOverflowCSStext-overflow sets how the user is informed of hidden overflow content
textTransformCSStext-transform specifies how elements of text are capitalised. e.g. uppercase, lowercase
whiteSpaceCSSwhite-space sets how white space is collapsed and whether line are able to wrap at soft-wrap opportunities
wordBreakword-break sets whether line breaks appear when the text would otherwise overflow the containing box

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

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

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.

Need Help?

Cant find what you are looking for?

Cant find what you are looking for?