Skip to content
Origami Design System

Typography

The FT typography uses the following typefaces to convey information to our users in different aspects of the FT products. Metric, Financier Display and Georgia.

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

Metric

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

Learn more about Metric.

Financier Display

Financier is a secondary typeface. Elegant, authoritative and has a distinct voice. 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 use multiple typographic scales for different font families. Our scale ranges from -3 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.

SampleScaleFont size / line height
Make sense of it all972px / 84px
font-size: var(--o3-font-size-metric2-9);
line-height: var(--o3-font-lineheight-metric2-9);
Make sense of it all864px / 72px
font-size: var(--o3-font-size-metric2-8);
line-height: var(--o3-font-lineheight-metric2-8);
Make sense of it all748px / 56px
font-size: var(--o3-font-size-metric2-7);
line-height: var(--o3-font-lineheight-metric2-7);
Make sense of it all640px / 48px
font-size: var(--o3-font-size-metric2-6);
line-height: var(--o3-font-lineheight-metric2-6);
Make sense of it all532px / 40px
font-size: var(--o3-font-size-metric2-5);
line-height: var(--o3-font-lineheight-metric2-5);
Make sense of it all428px / 32px
font-size: var(--o3-font-size-metric2-4);
line-height: var(--o3-font-lineheight-metric2-4);
Make sense of it all324px / 32px
font-size: var(--o3-font-size-metric2-3);
line-height: var(--o3-font-lineheight-metric2-3);
Make sense of it all220px / 28px
font-size: var(--o3-font-size-metric2-2);
line-height: var(--o3-font-lineheight-metric2-2);
Make sense of it all118px / 24px
font-size: var(--o3-font-size-metric2-1);
line-height: var(--o3-font-lineheight-metric2-1);
Make sense of it all016px / 20px
font-size: var(--o3-font-size-metric2-0);
line-height: var(--o3-font-lineheight-metric2-0);
Make sense of it all-114px / 20px
font-size: var(--o3-font-size-metric2-negative-1);
line-height: var(--o3-font-lineheight-metric2-negative-1);
Make sense of it all-212px / 16px
font-size: var(--o3-font-size-metric2-negative-2);
line-height: var(--o3-font-lineheight-metric2-negative-2);
Make sense of it all-310px / 16px
font-size: var(--o3-font-size-metric2-negative-3);
line-height: var(--o3-font-lineheight-metric2-negative-3);

Font Weight

Font weight can be used to express hierarchy or urgency of information.

We recommend using our standard UI typography or Editorial typography styles where possible. For custom typography, align to these standard styles where possible. For example when using Metric2 for UI use semibold over other bold weights.

PreviewValueToken
light300
font-weight: var(--o3-font-weight-light);
regular400
font-weight: var(--o3-font-weight-regular);
medium500
font-weight: var(--o3-font-weight-medium);
semibold700
font-weight: var(--o3-font-weight-semibold);
bold800
font-weight: var(--o3-font-weight-bold);

UI Typography

User interface (UI) typography is intended for all design elements except those with an editorial voice, such as article page content (see editorial typography). We exclusively use the Metric font family for UI designs, rather than Financier.

UI Headings

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

PreviewUsage

Heading level 1

Heading 1 is for the main title of a general content page.

Heading level 2

Heading 2 is for section headings.

Heading level 3

Heading 3 is for sub-section headings.

Heading level 4

Heading 4 is for smaller titles, inside a component such as cards or teasers.
Heading level 5
Heading 5 is for lowest level headings, titles with less hierarchy inside a component such as cards or teasers.

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
<>
  <Heading level="1">Heading level 1</Heading>
  <Heading level="2">Heading level 2</Heading>
  <Heading level="3">Heading level 3</Heading>
  <Heading level="4">Heading level 4</Heading>
  <Heading level="5">Heading level 5</Heading>
</>;
Open in StoryBook | Open in Figma

UI Body

PreviewUsage

Body Big - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Body big is primarily used to create a comfortable reading experience on long-form content such as main sub-titles, standfirst and paragraphs.

Body Standard - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Body standard is the default text size. Used for detailed or descriptive content, in components, or where space is limited.

Body Small - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Body small serves secondary level content such as small details in tags, locations, teasers and cards. Avoid using this for long-form text for good readability and user experience.

Body Small (bold) - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Use to emphasise secondary text such as author name or topic tags.

Body small (caps) - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Use to emphasise secondary text such as author name or topic tags.

Body Big - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Body Standard - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Body Small - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Body Small Caps - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Body Small Bold - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<>
  <Body size="big">
    Body Big - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </Body>
  <Body size="standard">
    Body Standard - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </Body>
  <Body size="small">
    Body Small - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </Body>
  <Body size="small-caps">
    Body Small Caps - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </Body>
  <Body size="small-bold">
    Body Small Bold - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </Body>
</>;
Open in StoryBook | Open in Figma

For general links in UI pages. The link style can be applied inline (within a paragraph or body text) or standalone. The inline links inherits the text properties of the body it is in.

Link focus style follows the global Origami focus for single ring element.

This is example of

Standard Links.

<Link href="https://origami.ft.com">Standard Links</Link>;
Open in StoryBook | Open in Figma

For footers and copyright notices.

Footer such as copyright notice.
<Footer>Footer such as copyright notice.</Footer>;
Open in StoryBook | Open in Figma

Caption

A caption is a brief text description or explanation that provides context to visual elements such as images, illustrations, charts, or infographics. Captions should be kept brief.

£13.7m
Cost of the rights expected to increase by one-third or about £13.7m a year although some anticipate inflation of up to 70%
<Caption>
  Cost of the rights expected to increase by one-third or about £13.7m a year
  although some anticipate inflation of up to 70%
</Caption>;
Open in StoryBook | Open in Figma

List

For lists in UI pages. 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.

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

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

Unordered List

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

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

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

Editorial Typography

Editorial typography is intended for editorial and article content e.g article and home pages, live news, teasers.

Headings

Names of heading styles in Editorial typography are now aligned with the Editorial naming to allow the freedom to use heading styles as needed. H1 to H5 should be set during development.

Headline Large

Responsive headlines used for titles and headlines of Main news pages and articles. Usually in the full-bleed topper component. Use in moderation.

Don’t settle for black and white

<Headline underline={true} type="headline-large">
  Don’t settle for black and white
</Headline>;
Open in StoryBook

Headline

For titles and introductions of Feature posts and other new stories. Usage example: Top Stories , Opinion

Don’t settle for black and white

<Headline type="headline">Don’t settle for black and white</Headline>;
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.

Don’t settle for black and white

<Headline type="chapter">Don’t settle for black and white</Headline>;
Open in StoryBook | Open in Figma
Subheading

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

Don’t settle for black and white

<Headline type="subheading">Don’t settle for black and white</Headline>;
Open in StoryBook | Open in Figma
Label

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

Don’t settle for black and white

<Headline type="label">Don’t settle for black and white</Headline>;
Open in StoryBook | Open in Figma

Body

Use for body text, paragraphs and lists. This is responsive.

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

<Body>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet earum libero at
  voluptatum illum facere totam architecto eum porro exercitationem, ea,
  accusamus quia? Repellat beatae similique ab? Reprehenderit, ullam quae?
</Body>;
Open in StoryBook | Open in Figma

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.

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
<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>;
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.

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
<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>;
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.

  1. Lorem ipsum adipiscing elit.
  2. Sed feugiat turpis at massa tristique.
  3. Curabitu r accumsan elit luctus.
<Body>
  <List
    type="ordered"
    listItems={[
      "Lorem ipsum adipiscing elit.",
      "Sed feugiat turpis at massa tristique.",
      "Curabitu r accumsan elit luctus.",
    ]}
  />
</Body>;
Open in StoryBook | Open in Figma

Unordered List

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

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

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

An article by The Financial Times.
<Body>
  An article by <Link href="https://ft.com">The Financial Times</Link>.
</Body>;
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.

£27.5
Cost expected to increase by £13.7m a year.
<BigNumber title="£27.5">
  Cost expected to increase by £13.7m a year.
</BigNumber>;
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.

Joe Doe in London 
<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>;
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
OptionDescription
Topic tag colorThe colour of the topic tag.
Topic tag hover colorThe 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;
}
Topic link
<TopicTag href="#">Topic link</TopicTag>;
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.

StandFirst

<StandFirst>StandFirst</StandFirst>;
Open in StoryBook | Open in Figma

Caption

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

© Lorem John Doe
<Caption>&#169; Lorem John Doe</Caption>;
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.