Newskit Logo
View Github

Presets

Typography presets

A collection of foundational font design tokens combined into a preset to define reusable typography styles for specific text elements.

Overview

Typography Presets define properties such as font-family, font-weight and line-height, in one design token. In combination with Style Presets, Sizing, and Spacing they provide the visual attributes of a component.

Default Typography Presets

Typography Presets define properties such as font-family, font-weight and line-height, in one design token. In combination with Style Presets, Sizing, and Spacing they provide the visual attributes of a component.

These styles are used in more expressive scenarios where they may be more aligned to a brand style, these are used in components like the title bar and card.

ExampleTokenFont FamilyFont SizeLine HeightFont WeightLetter SpacingCommon uses

Apply Typography Presets

Typography Presets can be applied to NewsKit components in a number of ways, learn more about using a theme to better understand the trade-offs associated with each approach. For more advanced use cases, Style Presets can be accessed from the theme by calling getTypographyPreset or Emotion’s useTheme hook.

Adding custom Typography Presets to the theme

Custom Typography Presets can be added to the theme. See the Creating a theme guide for more details.

Thoroughly consider adding additional Typography Presets due to the impact on the theming feature when using multiple themes.

Extending Typography Presets

If additional CSS attributes are required on an existing Typography Preset, for ad hoc usage, pass a Text Block to the styled function.

1import {TextBlock, styled} from 'newskit'
2
3const ItalicTextBlock = styled(TextBlock)`
4font-style:italic;
5`;
6
7<ItalicTextBlock stylePreset="editorialParagraph010"> This Text is italic</ItalicTextBlock>

Text-crop

To keep consistent and predictable space from design to code, we use a text-cropping utility that removes additional space (leading) around a text block. This allows us to maintain our 4px baseline and keep designs pixel-perfect. Refer to the Text Crop documentation for more detailed information.

Accessibility Considerations

Legibility is core to the NewsKit typographic system. By following the guidelines below, we ensure consistency and readability across all typographic variations.

Font size

While there is no official minimum font size for the web, it is generally agreed upon that 16px for body text is a good starting point.

Of course, some text will be smaller for elements such as labels and headers will be larger.

To ensure that text is legible, NewsKit recommended that the smallest font-size applied to text is no less 12px for web.

Line Height

Providing an adequate amount of space between lines is critical to the legibility of text. As per W3C accessibility guidelines line spacing should be at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.

Using relative line-heights, NewsKit ensures consistent spacing of all headings and body-text sizes. Heading and Headline styles are set to a default of 1.125-times the font size and body text set at 1.5-times the font size.

Line length

Line-length, also known as a measure, is the number of characters contained in a line of text. Line-length should fall between 50 and 80 characters wide, including spaces, to ensure readability.

Lines narrower than 50 characters require the eye to jump to the next line too frequently, breaking the reader’s rhythm. Lines wider than 80 characters make it difficult to continue to the correct line in a large body of the text.

Font size

While there is no official minimum font size for the web, it is generally agreed upon that 16px for body text is a good starting point.

Of course, some text will be smaller for elements such as labels and headers will be larger.

To ensure that text is legible, NewsKit recommended that the smallest font-size applied to text is no less 12px for web.

Line Height

Providing an adequate amount of space between lines is critical to the legibility of text. As per W3C accessibility guidelines line spacing should be at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.

Using relative line-heights, NewsKit ensures consistent spacing of all headings and body-text sizes. Heading and Headline styles are set to a default of 1.125-times the font size and body text set at 1.5-times the font size.

Line length

Line-length, also known as a measure, is the number of characters contained in a line of text. Line-length should fall between 50 and 80 characters wide, including spaces, to ensure readability.

Lines narrower than 50 characters require the eye to jump to the next line too frequently, breaking the reader’s rhythm. Lines wider than 80 characters make it difficult to continue to the correct line in a large body of the text.

Overview

A NewsKit theme is built up from a layer of foundations - such as colours, fonts and sizing scales.

Overview

A NewsKit theme is built up from a layer of foundations - such as colours, fonts and sizing scales.