Typography

Aa Metric 2 VF --o3-font-family-metric
Aa Financier Display --o3-font-family-financier-display
Aa Georgia --o3-font-family-georgia

FT typography uses the following typefaces, to convey information to our users in different aspects of FT products.

Metric

Metric is our primary typeface. Clear, contemporary and rational, Metric communicates with clarity. It is best used for CTAs, body copy, and headings across all sub-brands.

Learn more about Metric.

Financier Display

Financier is our secondary typeface. Elegant, authoritative, and with a distinct voice. It is primarily used for large article titles and headings in editorial pages only.

Learn more about Financier Display.

Georgia

Georgia is solely used for editorial article body copy. This is an alternate to Financier Text, as a system font it avoids the performance implications of users downloading additional custom fonts.

Typographic Scale

We do not recommend the direct use of our typographic scale within projects. Instead use a usecase token, which defines family, scale, weight, and style as one token for specific scenarios.

These usecases are based on multiple typographic scales, for different font families. Our scale ranges from -2 to 10, depending on the font family. Consider scale 0 the baseline, with ascending and descending values in each direction. Avoid using styles below zero for long form content.

Sample	Scale	Font size / line height
Make sense of it all	9	72px / 84px `font-size: var(--o3-font-size-metric2-9); line-height: var(--o3-font-lineheight-metric2-9);`
Make sense of it all	8	64px / 72px `font-size: var(--o3-font-size-metric2-8); line-height: var(--o3-font-lineheight-metric2-8);`
Make sense of it all	7	48px / 56px `font-size: var(--o3-font-size-metric2-7); line-height: var(--o3-font-lineheight-metric2-7);`
Make sense of it all	6	40px / 48px `font-size: var(--o3-font-size-metric2-6); line-height: var(--o3-font-lineheight-metric2-6);`
Make sense of it all	5	32px / 40px `font-size: var(--o3-font-size-metric2-5); line-height: var(--o3-font-lineheight-metric2-5);`
Make sense of it all	4	28px / 32px `font-size: var(--o3-font-size-metric2-4); line-height: var(--o3-font-lineheight-metric2-4);`
Make sense of it all	3	24px / 32px `font-size: var(--o3-font-size-metric2-3); line-height: var(--o3-font-lineheight-metric2-3);`
Make sense of it all	2	20px / 28px `font-size: var(--o3-font-size-metric2-2); line-height: var(--o3-font-lineheight-metric2-2);`
Make sense of it all	1	18px / 24px `font-size: var(--o3-font-size-metric2-1); line-height: var(--o3-font-lineheight-metric2-1);`
Make sense of it all	0	16px / 24px `font-size: var(--o3-font-size-metric2-0); line-height: var(--o3-font-lineheight-metric2-0);`
Make sense of it all	-1	14px / 20px `font-size: var(--o3-font-size-metric2-negative-1); line-height: var(--o3-font-lineheight-metric2-negative-1);`
Make sense of it all	-2	12px / 16px `font-size: var(--o3-font-size-metric2-negative-2); line-height: var(--o3-font-lineheight-metric2-negative-2);`

Sample	Scale	Font size / line height
Make sense of it all	10	84px / 84px `font-size: var(--o3-font-size-10); line-height: var(--o3-font-lineheight-10);`
Make sense of it all	9	72px / 72px `font-size: var(--o3-font-size-9); line-height: var(--o3-font-lineheight-9);`
Make sense of it all	8	56px / 56px `font-size: var(--o3-font-size-8); line-height: var(--o3-font-lineheight-8);`
Make sense of it all	7	48px / 48px `font-size: var(--o3-font-size-7); line-height: var(--o3-font-lineheight-7);`
Make sense of it all	6	40px / 40px `font-size: var(--o3-font-size-6); line-height: var(--o3-font-lineheight-6);`
Make sense of it all	5	32px / 32px `font-size: var(--o3-font-size-5); line-height: var(--o3-font-lineheight-5);`
Make sense of it all	4	28px / 32px `font-size: var(--o3-font-size-4); line-height: var(--o3-font-lineheight-4);`
Make sense of it all	3	24px / 28px `font-size: var(--o3-font-size-3); line-height: var(--o3-font-lineheight-3);`
Make sense of it all	2	20px / 24px `font-size: var(--o3-font-size-2); line-height: var(--o3-font-lineheight-2);`
Make sense of it all	1	18px / 20px `font-size: var(--o3-font-size-1); line-height: var(--o3-font-lineheight-1);`
Make sense of it all	0	16px / 20px `font-size: var(--o3-font-size-0); line-height: var(--o3-font-lineheight-0);`
Make sense of it all	-1	14px / 16px `font-size: var(--o3-font-size-negative-1); line-height: var(--o3-font-lineheight-negative-1);`
Make sense of it all	-2	12px / 16px `font-size: var(--o3-font-size-negative-2); line-height: var(--o3-font-lineheight-negative-2);`

Sample	Scale	Font size / line height
Make sense of it all	10	84px / 84px `font-size: var(--o3-font-size-10); line-height: var(--o3-font-lineheight-10);`
Make sense of it all	9	72px / 72px `font-size: var(--o3-font-size-9); line-height: var(--o3-font-lineheight-9);`
Make sense of it all	8	56px / 56px `font-size: var(--o3-font-size-8); line-height: var(--o3-font-lineheight-8);`
Make sense of it all	7	48px / 48px `font-size: var(--o3-font-size-7); line-height: var(--o3-font-lineheight-7);`
Make sense of it all	6	40px / 40px `font-size: var(--o3-font-size-6); line-height: var(--o3-font-lineheight-6);`
Make sense of it all	5	32px / 32px `font-size: var(--o3-font-size-5); line-height: var(--o3-font-lineheight-5);`
Make sense of it all	4	28px / 32px `font-size: var(--o3-font-size-4); line-height: var(--o3-font-lineheight-4);`
Make sense of it all	3	24px / 28px `font-size: var(--o3-font-size-3); line-height: var(--o3-font-lineheight-3);`
Make sense of it all	2	20px / 24px `font-size: var(--o3-font-size-2); line-height: var(--o3-font-lineheight-2);`
Make sense of it all	1	18px / 20px `font-size: var(--o3-font-size-1); line-height: var(--o3-font-lineheight-1);`
Make sense of it all	0	16px / 20px `font-size: var(--o3-font-size-0); line-height: var(--o3-font-lineheight-0);`
Make sense of it all	-1	14px / 16px `font-size: var(--o3-font-size-negative-1); line-height: var(--o3-font-lineheight-negative-1);`
Make sense of it all	-2	12px / 16px `font-size: var(--o3-font-size-negative-2); line-height: var(--o3-font-lineheight-negative-2);`

Font Weight

Font weight can be used to express hierarchy or urgency of information. As with our typographic scale, we do not recommend the direct use of our font weight values within projects. Instead apply a usecase token.

Preview	Value	Token
light	300	`font-weight: var(--o3-font-weight-light);`
regular	400	`font-weight: var(--o3-font-weight-regular);`
medium	500	`font-weight: var(--o3-font-weight-medium);`
semibold	700	`font-weight: var(--o3-font-weight-semibold);`
bold	800	`font-weight: var(--o3-font-weight-bold);`

Usecase Tokens

Typography usecase tokens provide low level typography styles for use in a variety of contexts.

In addition to these usecase tokens, Origami provides typography components which use these. For example the display heading component combines all three display sizes at different breakpoints for a responsive heading.

Display

Display styles, as the largest text on the screen, are reserved for short, important text or numerals.

These styles are responsive to screen sizes and use the Financier Display typeface. This font family should be used exclusively for editorial story headlines, such as teaser headlines or article toppers.

display-lg

Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.

Show code

Make sense of it all

HTML

<span class="o3-type-display-lg">Make sense of it all</span>

Name	CSS Custom Property	Value
fontFamily	--o3-type-display-lg-font-family	financier display VF, serif
fontWeight	--o3-type-display-lg-font-weight	800
fontSize	--o3-type-display-lg-font-size	48px
lineHeight	--o3-type-display-lg-line-height	48px

display-md

Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.

Show code

Make sense of it all

HTML

<span class="o3-type-display-md">Make sense of it all</span>

Name	CSS Custom Property	Value
fontFamily	--o3-type-display-md-font-family	financier display VF, serif
fontWeight	--o3-type-display-md-font-weight	800
fontSize	--o3-type-display-md-font-size	40px
lineHeight	--o3-type-display-md-line-height	40px

display-sm

Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.

Show code

Make sense of it all

HTML

<span class="o3-type-display-sm">Make sense of it all</span>

Name	CSS Custom Property	Value
fontFamily	--o3-type-display-sm-font-family	financier display VF, serif
fontWeight	--o3-type-display-sm-font-weight	800
fontSize	--o3-type-display-sm-font-size	32px
lineHeight	--o3-type-display-sm-line-height	32px

Headline

Headlines are best suited for short, high-emphasis text on smaller screens and components. They work well for highlighting primary text passages or important content regions. Headlines use the Financier Display typeface, with carefully integrated line height and letter spacing to ensure readability. This font style should be reserved exclusively for editorial story headlines, such as teaser headlines or article toppers.

headline-lg

Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).

Show code

Make sense of it all

HTML

<span class="o3-type-headline-lg">Make sense of it all</span>

Name	CSS Custom Property	Value
fontFamily	--o3-type-headline-lg-font-family	financier display VF, serif
fontWeight	--o3-type-headline-lg-font-weight	300
fontSize	--o3-type-headline-lg-font-size	40px
lineHeight	--o3-type-headline-lg-line-height	40px

headline-md

Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).

Show code

Make sense of it all

HTML

<span class="o3-type-headline-md">Make sense of it all</span>

Name	CSS Custom Property	Value
fontFamily	--o3-type-headline-md-font-family	financier display VF, serif
fontWeight	--o3-type-headline-md-font-weight	300
fontSize	--o3-type-headline-md-font-size	32px
lineHeight	--o3-type-headline-md-line-height	32px

headline-sm

Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).

Show code

Make sense of it all

HTML

<span class="o3-type-headline-sm">Make sense of it all</span>

Name	CSS Custom Property	Value
fontFamily	--o3-type-headline-sm-font-family	financier display VF, serif
fontWeight	--o3-type-headline-sm-font-weight	300
fontSize	--o3-type-headline-sm-font-size	24px
lineHeight	--o3-type-headline-sm-line-height	28px

Title

Titles should be used for medium-emphasis text that remains relatively short. For example, consider using title styles to divide secondary passages of text or story paragraph.

title-lg

Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.

Show code

Make sense of it all

HTML

<span class="o3-type-title-lg">Make sense of it all</span>

Name	CSS Custom Property	Value
fontFamily	--o3-type-title-lg-font-family	metric 2 VF, sans-serif
fontWeight	--o3-type-title-lg-font-weight	700
fontSize	--o3-type-title-lg-font-size	28px
lineHeight	--o3-type-title-lg-line-height	32px

title-md

Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.

Show code

Make sense of it all

HTML

<span class="o3-type-title-md">Make sense of it all</span>

Name	CSS Custom Property	Value
fontFamily	--o3-type-title-md-font-family	metric 2 VF, sans-serif
fontWeight	--o3-type-title-md-font-weight	400
fontSize	--o3-type-title-md-font-size	24px
lineHeight	--o3-type-title-md-line-height	32px

title-sm

Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.

Show code

Make sense of it all

HTML

<span class="o3-type-title-sm">Make sense of it all</span>

Name	CSS Custom Property	Value
fontFamily	--o3-type-title-sm-font-family	metric 2 VF, sans-serif
fontWeight	--o3-type-title-sm-font-weight	400
lineHeight	--o3-type-title-sm-line-height	28px
fontSize	--o3-type-title-sm-font-size	20px

Body

Body styles are used for longer passages of text in your features and components.

body-lg

Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.

Show code

Make sense of it all

HTML

<span class="o3-type-body-lg">Make sense of it all</span>

Name	CSS Custom Property	Value
fontFamily	--o3-type-body-lg-font-family	metric 2 VF, sans-serif
fontWeight	--o3-type-body-lg-font-weight	400
fontSize	--o3-type-body-lg-font-size	18px
lineHeight	--o3-type-body-lg-line-height	24px

body-base

Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.

Show code

Make sense of it all

HTML

<span class="o3-type-body-base">Make sense of it all</span>

Name	CSS Custom Property	Value
fontFamily	--o3-type-body-base-font-family	metric 2 VF, sans-serif
fontWeight	--o3-type-body-base-font-weight	400
fontSize	--o3-type-body-base-font-size	16px
lineHeight	--o3-type-body-base-line-height	24px

body-highlight

Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.

Show code

Make sense of it all

HTML

<span class="o3-type-body-highlight">Make sense of it all</span>

Name	CSS Custom Property	Value
fontFamily	--o3-type-body-highlight-font-family	metric 2 VF, sans-serif
fontWeight	--o3-type-body-highlight-font-weight	700
fontSize	--o3-type-body-highlight-font-size	16px
lineHeight	--o3-type-body-highlight-line-height	24px

Label and Details

Label styles are smaller, utilitarian styles, used for very small text within body copy such as captions, contextual info, and label tags.

detail

Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.

Show code

Make sense of it all

HTML

<span class="o3-type-detail">Make sense of it all</span>

Name	CSS Custom Property	Value
fontFamily	--o3-type-detail-font-family	metric 2 VF, sans-serif
fontWeight	--o3-type-detail-font-weight	400
fontSize	--o3-type-detail-font-size	14px
lineHeight	--o3-type-detail-line-height	20px

label

Use this style for labels such as badges and metadata in teasers and toppers (e.g., "Live," "Premium," or the main timestamp). Avoid using full sentences.

Show code

Make sense of it all

HTML

<span class="o3-type-label">Make sense of it all</span>

Name	CSS Custom Property	Value
fontFamily	--o3-type-label-font-family	metric 2 VF, sans-serif
fontWeight	--o3-type-label-font-weight	400
fontSize	--o3-type-label-font-size	14px
lineHeight	--o3-type-label-line-height	20px
textCase	--o3-type-label-text-case	uppercase

Body content

Body content styles are used only for editorial content pages such as article body and posts in Live news pages.

body-content-base

Use this style only for the body copy of content pages, such as articles, live news and other content experience page.

Show code

Make sense of it all

HTML

<span class="o3-type-body-content-base">Make sense of it all</span>

Name	CSS Custom Property	Value
fontFamily	--o3-type-body-content-base-font-family	Georgia
fontWeight	--o3-type-body-content-base-font-weight	Regular
fontSize	--o3-type-body-content-base-font-size	20px
lineHeight	--o3-type-body-content-base-line-height	32px

body-content-highlight

Use this style only for the body copy of content pages, such as articles, live news and other content experience page.

Show code

Make sense of it all

HTML

<span class="o3-type-body-content-highlight">Make sense of it all</span>

Name	CSS Custom Property	Value
fontFamily	--o3-type-body-content-highlight-font-family	Georgia
fontWeight	--o3-type-body-content-highlight-font-weight	Bold
fontSize	--o3-type-body-content-highlight-font-size	20px
lineHeight	--o3-type-body-content-highlight-line-height	32px

body-content-emphasis

Use this style only for the body copy of content pages, such as articles, live news and other content experience page.

Show code

Make sense of it all

HTML

<span class="o3-type-body-content-emphasis">Make sense of it all</span>

Name	CSS Custom Property	Value
fontFamily	--o3-type-body-content-emphasis-font-family	Georgia
fontWeight	--o3-type-body-content-emphasis-font-weight	Regular
fontSize	--o3-type-body-content-emphasis-font-size	20px
lineHeight	--o3-type-body-content-emphasis-line-height	32px
fontStyle	--o3-type-body-content-emphasis-font-style	italic

Links

The link style can be applied inline (within a paragraph or body text) or standalone. The inline links inherit the text properties of the body it is in. Its focus style follows the global Origami focus for single ring element.

This example shows a link within copy that uses body-base.

Show code

Make sense of it all.

HTML

<span class="o3-type-body-base">Make <a href="#">sense of</a> it all.</span>

Here is another example which shows a link within body-content-base.

Show code

Make sense of it all.

HTML

<span class="o3-type-body-content-base">Make <a href="#">sense of</a> it all.</span>

UI Components

User interface (UI) typography components apply typography usecase tokens. They are intended for all design elements except those with an editorial voice, such as article page content (see editorial typography).

List

Lists allow users to view two or more individual, but related, text items grouped together. We have ordered and unordered lists.

Ordered list contains items in a sequential order or priority. List items follow an alphanumeric sequence.

Show code

Lorem ipsum adipiscing elit.
Sed feugiat turpis at massa tristique.
Curabitu r accumsan elit luctus.

JSX
HTML

<OrderedList>
  <li>Lorem ipsum adipiscing elit.</li>
  <li>Sed feugiat turpis at massa tristique.</li>
  <li>Curabitu r accumsan elit luctus.</li>
</OrderedList>;

<ol class="o3-typography-ol">
  <li>Lorem ipsum adipiscing elit.</li>
  <li>Sed feugiat turpis at massa tristique.</li>
  <li>Curabitu r accumsan elit luctus.</li>
</ol>

Unordered List

Unordered lists make blocks of related text easier to read. Use for non-sequential lists.

Show code

Lorem ipsum adipiscing elit.
Sed feugiat turpis at massa tristique.
Curabitu r accumsan elit luctus.

JSX
HTML

<UnorderedList>
  <li>Lorem ipsum adipiscing elit.</li>
  <li>Sed feugiat turpis at massa tristique.</li>
  <li>Curabitu r accumsan elit luctus.</li>
</UnorderedList>;

<ul class="o3-typography-ul">
  <li>Lorem ipsum adipiscing elit.</li>
  <li>Sed feugiat turpis at massa tristique.</li>
  <li>Curabitu r accumsan elit luctus.</li>
</ul>

Editorial Components

Editorial typography components bring together typography usecases for a specific purpose. For example combining the 3 display sizes into one responsive heading. They are intended for editorial and article content e.g article and home pages, live news, teasers.

Headings

Names of heading styles in Editorial typography are broadly aligned with the naming used within Editorial, however “display” is sometimes called “headline large”.

Display

Responsive headlines used for titles and headlines of Main news pages and articles, applying the display typography use-cases. Usually in the full-bleed topper component. Use in moderation.

Show code

Don’t settle for black and white

JSX
HTML

<Heading underline={true} type="display">
  Don’t settle for black and white
</Heading>;

<h1 class="o3-editorial-typography-display" data-o3-editorial-underline="true">
  <span>Don’t settle for black and white</span>
</h1>

Open in StoryBook

Headline

For titles and introductions of Feature posts and other new stories. Usage example: Top Stories , Opinion . Applies the headline typography use-cases in one responsive style.

Show code

Don’t settle for black and white

JSX
HTML

<Heading type="headline">Don’t settle for black and white</Heading>;

<h1 class="o3-editorial-typography-headline">
  <span>Don’t settle for black and white</span>
</h1>

Open in StoryBook | Open in Figma

Lower Headings

The following headlines have the same values across all screen sizes, mobile, tablet, desktop.

Chapter

For in-page titles / chapters.

Show code

<Heading type="chapter">Don’t settle for black and white</Heading>;

<h2 class="o3-editorial-typography-chapter">
  Don’t settle for black and white
</h2>

Open in StoryBook | Open in Figma

Subheading

For in-page sub-titles / sub-headings.

Show code

Don’t settle for black and white

JSX
HTML

<Heading type="subheading">Don’t settle for black and white</Heading>;

<h3 class="o3-editorial-typography-subheading">
  Don’t settle for black and white
</h3>

Open in StoryBook | Open in Figma

Label

To provide short details about a chapter, kickers (additional headline) just above a chapter.

Show code

Don’t settle for black and white

JSX
HTML

<Heading type="label">Don’t settle for black and white</Heading>;

<h3 class="o3-editorial-typography-label">Don’t settle for black and white</h3>

Open in StoryBook | Open in Figma

Body

For article body use the body-content typography use-case as above.

Show code

Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet earum libero at voluptatum highlight illum facere totam architecto eum porro exercitationem, ea, emphasis accusamus quia? Repellat beatae similique ab? Reprehenderit, ullam quae?

HTML

<span class="o3-type-body-content-base">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet earum libero at voluptatum <strong>highlight</strong> illum facere totam architecto eum porro exercitationem, ea, <em>emphasis</em> accusamus quia? Repellat beatae similique ab? Reprehenderit, ullam quae?

Drop Cap

Use for stylistic emphasis on the first letter of an article.

Show code

HTML

<span class="o3-type-body-content-base o3-editorial-typography-drop-cap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet earum libero at voluptatum <strong>highlight</strong> illum facere totam architecto eum porro exercitationem, ea, <em>emphasis</em> accusamus quia? Repellat beatae similique ab? Reprehenderit, ullam quae?

Quotes

The quote component is used to highlight notable statements, excerpts, or phrases from articles, interviews, and other types of content. It draws attention to key information and enhances the reading experience.

We have two variants:

Block quote

For direct quotations of an author's words from other sources. It’s usually indented from the main body of text.

Show code

This paragraph is for snippet of contents from an author’s speech to be quote. The following elements in the quote components are optional to provide flexibility appropriate for your use case: caption that tells more information about the author and the vertical bar on the side.
Jon DoeQuote Source

JSX
HTML

<Quote type="block" quoteAuthor="Jon Doe" quoteSource="Quote Source">
  This paragraph is for snippet of contents from an author’s speech to be quote.
  The following elements in the quote components are optional to provide
  flexibility appropriate for your use case: caption that tells more information
  about the author and the vertical bar on the side.
</Quote>;

<blockquote class="o3-editorial-typography-blockquote">
  <p>
    This paragraph is for snippet of contents from an author’s speech to be
    quote. The following elements in the quote components are optional to
    provide flexibility appropriate for your use case: caption that tells more
    information about the author and the vertical bar on the side.
  </p>
  <cite>
    <span class="o3-editorial-typography-blockquote__author">Jon Doe</span>
    <span class="o3-editorial-typography-blockquote__source">Quote Source</span>
  </cite>
</blockquote>

Open in StoryBook | Open in Figma

Pull quote

Pull quote is used to highlight important points within a body of text. It is usually placed within the body of the text and left-aligned.

Show code

This paragraph is for snippet of contents from an author’s speech to be quote. The following elements in the quote components are optional to provide flexibility appropriate for your use case: caption that tells more information about the author and the vertical bar on the side.
Jon Doe

JSX
HTML

<Quote type="pull" quoteAuthor="Jon Doe">
  This paragraph is for snippet of contents from an author’s speech to be quote.
  The following elements in the quote components are optional to provide
  flexibility appropriate for your use case: caption that tells more information
  about the author and the vertical bar on the side.
</Quote>;

<blockquote class="o3-editorial-typography-pullquote">
  <p>
    This paragraph is for snippet of contents from an author’s speech to be
    quote. The following elements in the quote components are optional to
    provide flexibility appropriate for your use case: caption that tells more
    information about the author and the vertical bar on the side.
  </p>
  <cite>
    <span class="o3-editorial-typography-pullquote__author">Jon Doe</span>
  </cite>
</blockquote>

Open in StoryBook | Open in Figma

Lists

For lists in article content. Refer to guidelines under UI lists above.

Ordered List

Ordered list contains items in a sequential order or priority. List items follow an alphanumeric sequence.

Show code

Lorem ipsum adipiscing elit.
Sed feugiat turpis at massa tristique.
Curabitu r accumsan elit luctus.

JSX
HTML

<List
  type="ordered"
  listItems={[
    "Lorem ipsum adipiscing elit.",
    "Sed feugiat turpis at massa tristique.",
    "Curabitu r accumsan elit luctus.",
  ]}
/>;

<ol class="o3-editorial-typography-list-ordered">
  <li>Lorem ipsum adipiscing elit.</li>
  <li>Sed feugiat turpis at massa tristique.</li>
  <li>Curabitu r accumsan elit luctus.</li>
</ol>

Open in StoryBook | Open in Figma

Unordered List

Unordered lists make blocks of related text easier to read. Use for non-sequential lists.

Show code

Lorem ipsum adipiscing elit.
Sed feugiat turpis at massa tristique.
Curabitu r accumsan elit luctus.

JSX
HTML

<List
  type="unordered"
  listItems={[
    "Lorem ipsum adipiscing elit.",
    "Sed feugiat turpis at massa tristique.",
    "Curabitu r accumsan elit luctus.",
  ]}
/>;

<ul class="o3-editorial-typography-list-unordered">
  <li>Lorem ipsum adipiscing elit.</li>
  <li>Sed feugiat turpis at massa tristique.</li>
  <li>Curabitu r accumsan elit luctus.</li>
</ul>

Open in StoryBook | Open in Figma

Big Number

Big Number is a composite component that includes a large number and a label. It is used to describe a big number in the editorial content.

Show code

£27.5

Cost expected to increase by £13.7m a year.

JSX
HTML

<BigNumber title="£27.5">
  Cost expected to increase by £13.7m a year.
</BigNumber>;

<div class="o3-editorial-typography-big-number">
  <div class="o3-editorial-typography-big-number__title">£27.5</div>
  <div class="o3-editorial-typography-big-number__content">
    Cost expected to increase by £13.7m a year.
  </div>
</div>

Open in StoryBook | Open in Figma

Byline

Byline component tells information about the author of a piece. The elements that constitute a byline include, author name, location and timestamp.

Show code

Joe Doe in London October 11 2019

JSX
HTML

<Byline>
  <a className="o3-editorial-typography-byline-author" href="#">
    Joe Doe
  </a>
  &nbsp;
  <span className="o3-editorial-typography-byline-location">in London</span>
  &nbsp;
  <time
    className="o3-editorial-typography-byline-timestamp"
    dateTime="2019-10-11T20:51:54Z"
    title="October 11 2019 9:51 pm"
  >
    October 11 2019
  </time>
</Byline>;

<div class="o3-editorial-typography-byline">
  <a class="o3-editorial-typography-byline-author" href="#">Joe Doe</a>

  <span class="o3-editorial-typography-byline-location">in London</span>

  <time
    class="o3-editorial-typography-byline-timestamp"
    datetime="2019-10-11T20:51:54Z"
    title="October 11 2019 9:51 pm"
  >
    October 11 2019
  </time>
</div>

Open in StoryBook | Open in Figma

Topic Tag

Topic tag is used to indicate the category of a post. Its default colour may be customised to suit your product need.

Topic tag customisation options

Option	Description
Topic tag color	The colour of the topic tag.
Topic tag hover color	The colour of the topic tag on hover.

E.g. To make the topic tag pink.

:root{
	--o3-editorial-typography-topic-tag-color: hotpink;
	--o3-editorial-typography-topic-tag-hover-color: deeppink;
}

Show code

Topic link

JSX
HTML

<TopicTag href="#">Topic link</TopicTag>;

<a href="#" class="o3-editorial-typography-topic-tag">Topic link</a>

Open in StoryBook | Open in Figma

Standfirst

Short intro below the headline that provides context about a post. Used in combination with a header in the topper component.

Show code

StandFirst

JSX
HTML

<StandFirst>StandFirst</StandFirst>;

<p class="o3-editorial-typography-standfirst">StandFirst</p>

Open in StoryBook | Open in Figma

Caption

For additional information about a piece or image that should be less prominent.

Show code

JSX
HTML

<Caption>&#169; Lorem John Doe</Caption>;

<figcaption class="o3-editorial-typography-caption">
  © Lorem John Doe
</figcaption>

Open in StoryBook | Open in Figma

Usage Guidelines

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

Use descriptive words to describe links

Link text should be clear, concise, and descriptive enough to make sense out of context. Avoid vague phrases like “click here” or “read more.” for example: use “Read our accessibility guidelines” Instead.

Define heading levels

Styles can be assigned a heading level that is independent of style name, size, weight, or other properties.

✅ Do

A h1 heading follows a h2
heading.

Don’t use Financier fonts for UI

The Financier Display font must be used for Editorial article content only, use Metric for UI. .

❌ Don't

The cost of an annual subscription in a signup flow incorrectly uses
Financier.

Avoid negative font scales

Scales less than zero, o3-font-size--1(14px) and o3-font-size--2(12px), are edge cases. Avoid these as they can be hard to read especially on large screens. Negative scales may be used to present short, secondary information where needed to align to existing designs. However we recommend using predefined ui typography styles where possible.

❌ Don't

A small, negative font scale is incorrectly used for a large body of
copy.