Typography

Use the Typography component for all of your styled text needs

v48 Overhaul

New system

Unlike the previous Typography scales, the new Typography sizes and variants were created following modular scale principles.

We’ve chosen to base the scales on the Major Third for larger screen sizes, and the Minor Third for smaller screen sizes, and to round the values to the nearest multiple of 4.

We’re also standardising names across Coral platforms, so that you can use the same variant names across web and mobile.

A modular scale is a system for sizing typography and spaces where each size is calculated from a base size using a consistent ratio, it allows:

Visual harmony → No random size jumps
Consistent hierarchy → Proportional jumps help create consistent structure and information hierarchy
Scalability → Sizes can be extended give chosen base size and ratio
Responsive flexibility → Using different ratios to cater for smaller screens whilst reserving proportional relationships

Before

After

Lorem Ipsum

Deprecation

hero1, hero2, homepageTitle, h1, h2, h3, h4, h5, h6 are now deprecated, they will be removed in v48.

As TypeScript language servers don’t recognise deprecated string literals in union types (which textStyle is), you won’t see warnings when using these deprecated variants in your IDEs by default.

To solve this, upgrade your project to use the latest versions of @krakentech/eslint-config, @octopus-energy/biome or @octopus-energy/oxc which all includes inline deprecation warnings and automated fixes for your IDEs and CI pipelines. (Versions TBC)

Migration

For now, you can still use the old variants, but they are deprecated and will be removed in v48.

You can use the table below to see the mapping between old and new variants, and what the codemod does.

Current Figma variant	v47 and older versions variant	v48 variant
display1	hero1, hero2, homepageTitle	display1
display2	h1	display2
heading1	h2	heading1
heading2	h3	heading2
heading3	h4	heading3
title1	h5	title1
title2	h6	title2

You can also start using the standalone coral-typography-revamp codemod to automatically update your typography variants to the new variants.


npx @octopus-energy/codemods coral-typography-revamp <path-to-your-project>

Storyblok migration

You can start migrating your Storyblok content to use the new typography variants.

This is will the new variants to your datasources, and migrate your stories to use the new variants.


pnpm --package=@octopus-energy/coral-storyblok dlx storyblok-migration --migration coral-typography-revamp --spaceId <space-id> --accessToken <access-token>

Basic Usage


import { Typography } from '@octopus-energy/coral/atoms';
 
<Typography>The five boxing wizards jump quickly</Typography>

The five boxing wizards jump quickly

Properties

color


<Typography color="success500">The five boxing wizards jump quickly</Typography>

The five boxing wizards jump quickly

component

It may be you want the style of a Heading 2, but the semantics of a Display 1. In this case, you can use the component prop to change the underlying HTML element.


<Typography textStyle="heading2" component="h1">
    The five boxing wizards jump quickly
</Typography>

The five boxing wizards jump quickly

textAlign


<Typography textAlign="center">The five boxing wizards jump quickly</Typography>

The five boxing wizards jump quickly

textTransform


<Typography textTransform="uppercase">Wizard</Typography>

Wizard

textWrap


<Typography textWrap="balance">
    Aliquip incididunt sunt dolore laborum aliquip cupidatat sint mollit commodo
    dolor. Aute cillum excepteur eu excepteur. Cupidatat cupidatat nostrud nisi
    dolore non. Aliqua amet nostrud aute aute exercitation voluptate eiusmod. Ea
    veniam elit quis eiusmod magna sunt irure velit consectetur veniam do sunt.
    Adipisicing deserunt commodo id et ullamco consequat.
</Typography>

Aliquip incididunt sunt dolore laborum aliquip cupidatat sint mollit commodo dolor. Aute cillum excepteur eu excepteur. Cupidatat cupidatat nostrud nisi dolore non. Aliqua amet nostrud aute aute exercitation voluptate eiusmod. Ea veniam elit quis eiusmod magna sunt irure velit consectetur veniam do sunt. Adipisicing deserunt commodo id et ullamco consequat.

hyphens


<Typography hyphens="auto">
    Aliquip incididunt sunt dolore laborum aliquip cupidatat sint mollit commodo
    dolor. Aute cillum excepteur eu excepteur. Cupidatat cupidatat nostrud nisi
    dolore non. Aliqua amet nostrud aute aute exercitation voluptate eiusmod. Ea
    veniam elit quis eiusmod magna sunt irure velit consectetur veniam do sunt.
    Adipisicing deserunt commodo id et ullamco consequat.
</Typography>

textStyle


<Typography textStyle="heading2">The five boxing wizards jump quickly</Typography>

The five boxing wizards jump quickly

Variants


<Typography textStyle="display1">The five boxing wizards jump quickly</Typography>
<Typography textStyle="display2">The five boxing wizards jump quickly</Typography>
<Typography textStyle="heading1">The five boxing wizards jump quickly</Typography>
<Typography textStyle="heading2">The five boxing wizards jump quickly</Typography>
<Typography textStyle="heading3">The five boxing wizards jump quickly</Typography>
<Typography textStyle="title1">The five boxing wizards jump quickly</Typography>
<Typography textStyle="title2">The five boxing wizards jump quickly</Typography>
<Typography textStyle="title3">The five boxing wizards jump quickly</Typography>
<Typography textStyle="title4">The five boxing wizards jump quickly</Typography>
<Typography textStyle="body1">The five boxing wizards jump quickly</Typography>
<Typography textStyle="body2">The five boxing wizards jump quickly</Typography>
<Typography textStyle="body3">The five boxing wizards jump quickly</Typography>
<Typography textStyle="caption">The five boxing wizards jump quickly</Typography>
<Typography textStyle="button">The five boxing wizards jump quickly</Typography>
<Typography textStyle="code">const x = 1;</Typography>
<Typography textStyle="kbd">Ctrl + C</Typography>

The five boxing wizards jump quickly

const x = 1;

Ctrl + C

Variants HTML mapping

`textStyle` variant	Underlying HTML element
`display1`	`<h1>`
`display2`	`<h1>`
`heading1`	`<h1>`
`heading2`	`<h2>`
`heading3`	`<h3>`
`title1`	`<h4>`
`title2`	`<h5>`
`title3`	`<h6>`
`title4`	`<h6>`
`body1`	`<p>`
`body2`	`<p>`
`body3`	`<p>`
`button`	`<span>`
`caption`	`<p>`
`code`	`<code>`
`kbd`	`<kbd>`
deprecated variants
`hero1`	`<h1>`
`hero2`	`<h1>`
`homepageTitle`	`<h1>`
`h1`	`<h1>`
`h2`	`<h2>`
`h3`	`<h3>`
`h4`	`<h4>`
`h5`	`<h5>`
`h6`	`<h6>`

Responsiveness

color, textAlign and textStyle are all responsive variant props, which can be used as shown below.

Note that if textStyle is responsive, you will need to provide the component prop, for example:

<Typography textStyle={{ base: "body1", md: "body2" }} component="p">

The component prop becomes required here.


<Typography
    color={{ base: "primary500", lg: "secondary500" }}
    textAlign={{ base: "center", lg: "left" }}
    textStyle={{ base: "body2", lg: "body1" }}
    component="p"
>
    color
</Typography>

Responsive Element

Responsive sizes

Some textStyle variant already include responsive behaviour, so you might not need to use a responsive variant.

Variant	Base font size	Base font weight	`md`+ font size	`md`+ font weight
`display1`	44px	700	56px	700
`display2`	36px	700	44px	700
`heading1`	32px	500	36px	500
`heading2`	24px	500	28px	500
`heading3`	20px	500	24px	500
`title1`	18px	500	—	—
`title2`	16px	500	—	—
`title3`	14px	500	—	—
`title4`	12px	500	—	—
`body1`	18px	400	—	—
`body2`	16px	400	—	—
`body3`	14px	400	—	—
`caption`	12px	400	—	—
`button`	18px	500	—	—
`code`	0.9em	400	—	—
`kbd`	0.9em	400	—	—
deprecated variants
`hero1`	40px	700	144px	700
`hero2`	40px	700	50px	700
`homepageTitle`	40px	700	50px	700
`h1`	32px	500	40px	500
`h2`	24px	500	36px	500
`h3`	24px	500	28px	500
`h4`	20px	500	22px	500
`h5`	18px	500	—	—
`h6`	16px	500	—	—

Full API

Name	Type	Default
`textStyle`	`TypographyTextStyle \| ResponsiveTypographyTextStyle` The typography variant to apply. The typography variant to apply as a responsive object. When using a responsive object, `component` is required because the element cannot be inferred from multiple breakpoint values.	`body1`
`component`	`ElementType` Overrides the element rendered. Combine this with the `textStyle` prop to control font sizing without sacrificing semantics. Required when `textStyle` is a responsive object, since the rendered element cannot be inferred from multiple breakpoint values.
`children`	`ReactNode` The content to render inside the Typography component.
`color`	`ResponsiveVariant<"inherit" \| "base20" \| "base100" \| "base200" \| "base300" \| "base500" \| "base900" \| "primary10" \| "primary100" \| "primary500" \| "primary600" \| "primary900" \| "secondary10" \| ... 67 more ... \| "contentsInformation500">` The color of the text.	`contentsBase900`
`direction`	ConditionalValue<WithEscapeHatch<OnlyKnown<"direction", `var(--${string})` \| Direction \| readonly NonNullable<Direction \| undefined>[] \| undefined>>> \| undefined The CSS `direction` property to apply.
`id`	`string` A unique identifier for this element.
`overflow`	ConditionalValue<WithEscapeHatch<OnlyKnown<"overflow", `var(--${string})` \| Overflow \| readonly string[] \| undefined>>> \| undefined The CSS `overflow` property to apply.
`textAlign`	`ResponsiveVariant<ConditionalValue<AnyString \| TextAlign \| readonly NonNullable<TextAlign \| undefined>[] \| undefined>>` The CSS `text-align` property to apply.
`textOverflow`	`ConditionalValue<AnyString \| readonly string[] \| TextOverflow \| undefined>` The CSS `text-decoration` property to apply.
`textWrap`	ConditionalValue<`var(--${string})` \| AnyString \| readonly string[] \| TextWrap \| undefined> The CSS `text-wrap` property to apply.
`whiteSpace`	`ConditionalValue<AnyString \| readonly string[] \| WhiteSpace \| undefined>` The CSS `white-space` property to apply.
`wordBreak`	ConditionalValue<WithEscapeHatch<OnlyKnown<"wordBreak", `var(--${string})` \| WordBreak \| readonly NonNullable<WordBreak \| undefined>[] \| undefined>>> \| undefined The CSS `word-break` property to apply.
`textTransform`	`ConditionalValue<AnyString \| readonly string[] \| TextTransform \| undefined>` The CSS `word-spacing` property to apply. ⚠︎ Use with caution. This property should be used for isolated words only.
`htmlFor`	`string` htmlFor attribute for when component is set to label.
`hyphens`	`ConditionalValue<AnyString \| Hyphens \| readonly NonNullable<Hyphens \| undefined>[] \| undefined>` The CSS `hyphens` property to apply.
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`