Typography

Mobile Support: Full

A system of fonts and text styles that communicates clearly and influences how users feel.

On this page

Import
Font Family
Core Text Sizes
Colours
Bold text
Paragraph text
Text Alignment
Maximum number of lines
Wrapping text
Truncating text
Extended "display" styles
Example Hierarchy
Overriding the rendered HTML element
Props

Import

import { Typography } from "@vitality-ds/components";

Font Family

Magentus Product UI uses “system” fonts - meaning our products utilise the fonts native to the user's operating system. These fonts are native to the operating system interface and do not require additional resources to be distributed, licensed or downloaded. They are highly legible and easy to read at small sizes, contain many font weights, and are ideal for software UI. These fonts share similarities with Magentus' corporate brand font.

Core Text Sizes

When using text in products, most of the time that text belongs to some hierarchy based on the page's layout. In Vitality, we pre-define those styles in order to support a logical visual hierarchy of text sizes. Designer's tools also mimic these text size names, so if you encounter any unusual font sizes, discuss with your team. For less-frequent use cases, read about extended display sizes

Set the text size using the variant prop.

<DocsFlex css={{ flexDirection: "column" }}>
  <Typography>Body (Default)</Typography>
  <Typography variant="pageTitle">Page Title</Typography>
  <Typography variant="sectionTitle">Section Title</Typography>
  <Typography variant="sectionSubtitle">Section Subtitle</Typography>
  <Typography variant="sectionSubtitle">Section Subtitle</Typography>
  <Typography variant="body">Body</Typography>
  <Typography variant="paragraph">Paragraph text</Typography>
  <Typography variant="button">Button</Typography>
  <Typography variant="caption">Caption</Typography>
</DocsFlex>

Colours

Whilst colours should be used sparingly with text, there are some occasions when it makes sense. Colour should be used to indicate meaning like positive/negative, success or failure.

To set the text colour, use the color prop:

<DocsFlex
  spacing="md"
  css={{
    flexDirection: "column",
    color: "purple",
    backgroundColor: "$grey1",
    padding: "$lg",
  }}
>
  <Typography>Here is some default text</Typography>
  <Typography color="hiContrast">
    Here is some hiContrast (default) text
  </Typography>
  <Typography color="lowContrast">Here is some lowContrast text</Typography>
  <Typography color="primary">Here is some primary text</Typography>
  <Typography color="disabled">Here is some disabled text</Typography>
  <Typography color="info">Here is some info text</Typography>
  <Typography color="success">Here is some success text</Typography>
  <Typography color="moderate">Here is some moderate text</Typography>
  <Typography color="warning">Here is some warning text</Typography>
  <Typography color="critical">Here is some critical text</Typography>
  <Typography color="accent">Here is some accented text</Typography>
  <Typography color="inherit">Here is some inherited text</Typography>
  <Typography>
    And here is some{" "}
    <Typography color="accent" htmlTag="span">
      inline coloured
    </Typography>{" "}
    text.
  </Typography>
</DocsFlex>

Bold text

By default, Vitality's text heirarchy is already opinionated about font weights; meaning you should not need to override the font weights. In some cases where extra emphasis needs to be placed on a word, use the semantic HTML <strong> tag inside the parent <Typography /> element.

You can only edit the boldness of body and caption text.

<Typography>
  Body: Here is some text that has an <strong>incredibly important</strong>{' '}
  statement.
</Typography>
<Typography variant="caption">
  Caption: Here is some text that has an <strong>incredibly important</strong>{' '}
  statement.
</Typography>

Paragraph text

When dealing with multi-paragraph text, you can set variant="paragraph" to get vertical spacing:

<DocsFlex direction="column">
  <Typography variant="paragraph">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis
    velit et lacinia vulputate. Vivamus varius leo quis tellus egestas, eget
    egestas ligula interdum.
  </Typography>
  <Typography variant="paragraph">
    Vivamus varius leo quis tellus egestas, eget egestas ligula interdum. Lorem
    ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis velit et
    lacinia vulputate. Vivamus varius leo quis tellus egestas, eget egestas
    ligula interdum.
  </Typography>
</DocsFlex>

Text Alignment

All valid CSS values can be passed to the textAlign prop. See the props table for more.

<DocsFlex direction="column" css={{ width: "100%" }}>
  <Typography textAlign="left">Left-aligned</Typography>
  <Typography textAlign="center">Centered text</Typography>
  <Typography textAlign="right">Right-aligned</Typography>
</DocsFlex>

Maximum number of lines

In some cases, you may wish to limit a block of text based on number of lines. Vitality offers a maximum of three lines to limit.

<DocsFlex css={{ flexDirection: "column" }}>
  <Typography maxLines={2}>
    Here is a very long text, Here is a very long text, Here is a very long
    text, Here is a very long text, Here is a very long text, Here is a very
    long text, Here is a very long text, Here is a very long text, Here is a
    very long text, Here is a very long text, Here is a very long text, Here is
    a very long text, Here is a very long text,
  </Typography>
  <Typography maxLines={2} variant="pageTitle">
    Here is a very long text, Here is a very long text, Here is a very long
    text, Here is a very long text, Here is a very long text, Here is a very
    long text, Here is a very long text, Here is a very long text, Here is a
    very long text, Here is a very long text, Here is a very long text, Here is
    a very long text, Here is a very long text,
  </Typography>
</DocsFlex>

Wrapping text

"In some cases, you may wish to explicitly set the wrapping behaviour of text - for instance in tables. You can use the wrap boolean property to set its white-space value.

<DocsFlex css={{ flexDirection: "column", maxWidth: 100 }}>
  <Typography wrap={false}>Here is some default text</Typography>
  <Typography wrap={true} textOverflow="ellipsis">
    Here is some default text
  </Typography>
</DocsFlex>

Truncating text

<DocsFlex css={{ flexDirection: "column", maxWidth: 100 }}>
  <Typography wrap={false}>Here is some default text</Typography>
  <Typography wrap={false} textOverflow="ellipsis">
    Here is some default text
  </Typography>
  <Typography wrap={false} textOverflow="clip">
    Here is some default text
  </Typography>
</DocsFlex>

Extended "display" styles

For less-common usages of text, you can utilise these display styles. Note that font weights are pre-set and should not be overridden.

<DocsFlex css={{ flexDirection: "column" }}>
  <Typography variant="display900">Display 900</Typography>
  <Typography variant="display800">Display 800</Typography>
  <Typography variant="display700">Display 700</Typography>
  <Typography variant="display600">Display 600</Typography>
  <Typography variant="display500">Display 500</Typography>
  <Typography variant="display400">Display 400</Typography>
  <Typography variant="display300">Display 300</Typography>
  <Typography variant="display200">Display 200</Typography>
  <Typography variant="display100">Display 100</Typography>
</DocsFlex>

Example Hierarchy

Example Page Title

Section Title

Here is some body text if you would like to learn more about the text sizes and styles, check that out in the other Storybook page!

Section Subtitle

Amet, consectetur adipiscing elit. Cras convallis velit et lacinia vulputate. Vivamus varius leo quis tellus egestas, eget egestas ligula interdum. Amet, consectetur adipiscing elit. Cras convallis velit et lacinia vulputate. Vivamus varius leo quis tellus egestas, eget egestas ligula interdum.

Section Title Floating

Section Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis velit et lacinia vulputate. Vivamus varius leo quis tellus egestas, eget egestas ligula interdum.

Overriding the rendered HTML element

By default, caption, body, sectionSubtitle, sectionTitle and pageTitle already map to the most generally appropriate HTML element. In some cases, you may wish to override the rendered HTML element though. Do this by passing the htmlTag prop to the component.

<Typography variant="caption" htmlTag="figcaption">
  Caption
</Typography>

By design, the Typography component does not include an as prop as it will have unintended side affects. Instead, the htmlTag prop allows you to override the default html element with This is to safeguard against passing invalid attributes to the component.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes

Props

color

Description

Sets the color of the text.

Type

Default Value

hiContrast

htmlTag

Description

Override the rendered HTML element one of a predefined set of options

Type

"caption" | "small" | "span" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p"

maxLines

Description

Sets a limit on the maximum number of lines to display.

Type

1 | 2 | 3 | "1" | "2" | "3"

ref

Type

Ref<HTMLSpanElement>

textAlign

Description

Set the text element's text alignment

Type

textOverflow

Description

Allows you to handle CSS text overflow behaviour

Type

"clip" | "ellipsis"

variant

Description

Customises the font size and weight to a pre-set option.

Type

Default Value

body

wrap

Description

Allows you to handle CSS white space behaviour

Type

boolean