NewsKit Mobile Logo

Typography

Overview

Words are at the heart of our business. Use the type scale and usage guidelines to present your design and content as clearly and efficiently as possible.

Type scale

A type scale is used to provide consistency, hierarchy and rhythm, ensuring responsivity across devices. Typography sizing is based on our root font size (rem) of 16pt, which is adjusted to provide a harmonious scale.

typography example

Applying the type scale

Keeping consistent and sticking to logical hierarchies ensures that elements in the UI are clear and easily recognisable when scanning the page.

Although the scale should remain consistent, type attributes can use custom values for the typeface, font, case, size, and letter spacing.

Headlines

In the type scale, headlines range from 1 to 6. Headlines are the largest text on the screen, reserved for short, important text or numerals. The components for rendering Headlines are H1, H2, H3, H4, H5, H6.

These components can accept overrides for the style and typography presets. All heading components follow a consistent prop and override structure. The default style presets for these map to from headlineH1 - headlineH6

Props
overridesobject
If provided, overrides the respective presets for the component and provided elements. Refer to the defaults below for the object structure:
stylePresetMQ<string>
If provided, this overrides the style preset applied to the Headline.
typographyPresetMQ<string>
If provided, this overrides the typography preset applied to the Headline.
Refer to the defaults below for the overrides object structure:
{
  stylePreset: "inkContrast",
  typographyPreset: {
    xs: "editorialHeading050",
    lg: "editorialHeading070",
    xl: "editorialHeading080"
  }
}
{
  stylePreset: "inkContrast",
  typographyPreset: {
    xs: "editorialHeading030",
    md: "editorialHeading040"
  }
}
{
  stylePreset: "inkContrast",
  typographyPreset: {
    xs: "editorialHeading020",
    md: "editorialHeading030"
  }
}
{
  stylePreset: "inkContrast",
  typographyPreset: {
    xs: "editorialHeading010",
    md: "editorialHeading020"
  }
}
{
  stylePreset: "inkContrast",
  typographyPreset: "editorialSubheading020"
}
{
  stylePreset: "inkContrast",
  typographyPreset: "editorialSubheading010"
}
For more information about how to apply overrides to a component please refer to the Override component defaults page.

Playground

Headlines

We tell the stories that matter.

Props
import React from 'react';
import { H1 } from 'newskit';

export default () => (
  <H1>We tell the stories that matter.</H1>
);

Subtitles

Subtitles are smaller than headlines. They are typically reserved for medium-emphasis text that is shorter in length.

Body

Body text comes in three sizes. It’s typically used for long-form writing as it works well for smaller text sizes. It can be rendered using the P component, shorter for Paragraph.

Props
dropCapboolean = false
If set to true the first letter of the Paragraph text will have an unique style. Note that children should start with string for the drop cap to function correctly. Becoming the drop cap of the paragraph.
overridesobject
If provided, overrides the respective presets for the component and provided elements.
stylePresetMQ<string>
If provided, this overrides the style preset applied to the Paragraph.
typographyPresetMQ<string>
If provided, this overrides the typography preset applied to the Paragraph.
dropCapobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the Paragraph's dropCap.
typographyPresetMQ<string>
If provided, this overrides the typography preset applied to the Paragraph's dropCap.
spaceMQ<string>
If provided, overrides the vertical space above the drop cap, use to align the drop cap to the first line of the paragraph.
Refer to the defaults below for the overrides object structure:
{
  stylePreset: "inkBase",
  typographyPreset: "editorialParagraph020",
  dropCap: {
    stylePreset: "inkContrast",
    typographyPreset: {
      xs: "editorialDropCap010",
      md: "editorialDropCap020",
      lg: "editorialDropCap030"
    },
    space: "space010"
  }
}
For more information about how to apply overrides to a component please refer to the Override component defaults page.

Body Text

Telling the stories that matter, seeding ideas and stirring emotion. Capturing moments, meaning and magic. Making sense of the world. On the shoulders of giants, in the thick of it, behind the scenes and fighting the good fight. Long form and rapid-fire, pragmatic and poetic, comical and critical. Being at the biggest events with the biggest names noticing the smallest details, and sticking up for the little guy.
Props
Drop Cap
import React from 'react';
import { P } from 'newskit';

export default () => (
  <P dropCap>
    Telling the stories that matter, seeding ideas and
    stirring emotion. Capturing moments, meaning and magic.
    Making sense of the world. On the shoulders of giants,
    in the thick of it, behind the scenes and fighting the
    good fight. Long form and rapid-fire, pragmatic and
    poetic, comical and critical. Being at the biggest
    events with the biggest names noticing the smallest
    details, and sticking up for the little guy.
  </P>
);

Captions

Captions are the smallest font sizes. They are generally used to annotate imagery or to introduce a headline.

Accessibility

The P component, even with a drop cap, is fully accessible. Infact the drop cap and the rest of the paragraph's text will be read as unique text by the screen reader.